GSAP guide

Load Animations

Load animations are designed for hero sections only. They happen immediately when the page loads, creating an engaging first impression before the visitor starts scrolling.

To enable load animations on a hero section, the parent element must have the following attribute:

data-load hero

Think of this as telling Meridian which section contains load animations. Any child elements inside that parent can then be given one of the following attributes:

data-load heading

‍Splits the heading text into individual letters and animates each one upward into position. Best used on short, bold hero headlines.

data-load heading-lines

‍Splits the heading text into lines and animates each line upward into position. Better suited for longer headings that wrap across multiple lines.

data-load fade-up

‍The element moves upward and fades in. Works well for subheadings, body text, buttons, and supporting elements below the main headline.

data-load fade-left

‍The element moves in from the right and fades in. Useful for visual elements and cards that sit alongside text content.

data-load image

‍The image gently scales down into its final size on load.

Scroll Animations

Scroll animations can be applied to any element on any page. They happen when the element scrolls into view, creating a progressive reveal as the visitor moves down the page.

Unlike load animations, scroll animations don't require a parent attribute. Simply add the attribute directly to any element you want to animate.

data-scroll heading

Splits the heading into individual letters and animates each one upward as the section comes into view.

data-scroll heading-lines

Splits the heading into lines and animates each line upward on scroll. Best for larger headings that span multiple lines.

data-scroll fade-up

The element moves upward and fades in as it enters the viewport.

data-scroll fade-left

The element moves in from the right and fades in on scroll.

data-scroll image

The image scales down into its final size as it scrolls into view.

Animating New Elements

Adding an animation to any element takes less than 30 seconds:

1. Select the element in the Webflow canvas.
2. Click the Settings tab in the panel to the right of the canvas.
3. Scroll down to the Custom Attributes section.
4. Click the + button to add a new attribute.
5. Enter the attribute name in the Name field, such as data-load or data-scroll
6. Enter the animation value in the Value field, such asfade-up

That's it! That element will now animate when the page is previewed or published.

Customizing Animations

Animation timing, speed, and easing can be adjusted inside Webflow's native GSAP interaction builder. To access these settings:

1. Click the Interactions icon in the left sidebar.
2. Find the interaction you want to adjust.
3. Click one of the Actions in the right side panel.
4. Duration  This controls the overall timing of the animation.
5. Start This controls how long it takes for the animation to start once the trigger fires.
6. Animated Properties This is where all the animated properties will be listed for each animation. You can control different properties by changing the From or To states.  From changes the initial state of the element, whereas To animates the element to a certain state.
7. Repeat This controls how often the animation repeats.