Template Guide

1. Classic vs GSAP interactions

This template uses a combination of Webflow Classic Interactions and Webflow’s newer GSAP-based Interactions. This approach allows us to balance performance, flexibility, and ease of editing, while avoiding unnecessary custom code.

Most animations in the template are built using GSAP-based interactions, but some elements still rely on Classic Interactions where they make more sense or provide simpler control. Because of this mixed setup, you may encounter elements that clearly animate or respond to interaction, but do not appear in the currently active Interactions mode.

When this happens, simply check the other interaction system. For example, if you are viewing GSAP interactions and cannot find the animation, it is likely created using Classic Interactions — and vice versa. Keeping this in mind will help you quickly locate, edit, or disable animations without affecting other parts of the design.

‍

2. Modular Interactions

We applied most interactions using class names to make applying interactions and animations easier and modular, although sometimes there is no issue, most of the time the interaction doesn't show up in the Interactions panel when paired with other class names (usually happens when you applied the interaction class after the normal styling classes).

This makes editing the animation a little difficult, so I will provide all of the classes used for modular interactions:

‍

Image into view (Immediate)

Image Mask Immediate

• Reveals the image when container is 20% into view
• GSAP-based animation
• Structure: apply class combo to the image container, and then apply Wrapped Image class to the image, and add a div block right next to the image and give it a class name Image Blocker
• Note: you can find an example in the homepage in About or Inspirations section, or anywhere that has an image (some do not have Image Into View animation due to image placements)

Image into view (Delay 250ms)

Image Mask Delay 250ms

• Same as before, but revealed 250ms (or 0.25 second) after container is 20% into view

H2 Heading Into View

H2 Heading Animation

• Reveals when text is 20% into view
• GSAP-based animation
• Simply add the class name into the heading

Section Paragraph Into View

Section Paragraph Animation

• Reveals when text is 20% into view
• GSAP-based animation
• Simply add the class name into the paragraph text

‍

3. Separated Slider Contents

In this template, sliders are used only to hold the primary text content of each section. For example, in the Inspirations section, the slider contains the interior name and descriptive text, while in the Testimonials section, it contains the testimonial feedback and client information.

Supporting elements such as images and navigation numbers are placed outside of the Slider component. These elements are synchronized with the active slide using Slide Change trigger interactions, allowing for greater layout flexibility and cleaner visual structure.

Each supporting element uses a unique combo class to track its corresponding slide order. This applies to all supporting elements, including images, slide navigation numbers, and certain text elements. To reduce confusion while editing, these elements are also arranged in the same order inside the Navigator, making it easier to visually match each element to its related slide.

This structure is necessary because supporting elements exist outside of the Slider component and are not automatically aware of slide changes. Instead, their visibility and transitions are controlled manually through interactions, which rely on these numbered combo classes to determine which element should be shown or hidden at a given time.

Since Slide Change interactions can only target one slide at a time, you will need to duplicate all supporting elements, assign a new numbered order class to each one, and then duplicate the existing interaction animation. This approach is recommended because it is faster and reduces the chance of errors, although you may create a new animation from scratch if preferred. After duplicating the animation, update each animation block’s target to point to the next set of supporting elements.

Please note that Slide Change trigger interactions are only available in Webflow’s Classic Interactions. If you do not see the related animation while editing, make sure you are viewing the Classic Interactions panel rather than the GSAP interaction mode.