No-Code GSAP Staggered Animations in Webflow

Add a smooth, staggered slide-and-fade animation to any gallery, CMS list, or grid in Webflow — powered by GSAP, and set up entirely with a handful of custom attributes. No script to touch, no single line of code to write: you build your layout, label the wrapper, and the animation is there.

The nice part is how little you actually have to do. Beware of the defaults, because you might already be good to go with just one attribute — the rest are options you reach for only when you want tighter control over the timing, the easing, or the order the items animate in. And once it’s set up, it just works: multiple lists on the same page, items coming from the CMS, custom grids — same attribute, same result.

How it works

The whole thing is attribute-driven. A script (included in the cloneable) looks for the elements you’ve marked and asks GSAP to build a staggered slide-and-fade for the items inside them. Because the logic reads from attributes, you never open the code — you add the attributes in Webflow’s settings panel and let the script do the rest.

There’s really only one required attribute: the marker with the value list, added to the div block that wraps all your items, or straight onto a Collection List. That alone gives you the default staggered animation. Every other attribute is optional and ships with a sensible default, so a first pass can be a single attribute and nothing more.

When you do want to tune it, the options fall into a few groups. Timing: threshold controls at what percentage of the element’s visibility the animation fires (default 0.4, i.e. 40%), and duration sets how long a single item’s animation lasts (default 0.5s). Spacing is the one to understand: each sets a fixed gap in seconds between each item’s start time, while amount sets a total time that gets split across all the items in a row — so with an amount of 0.5 across five items you get 0.1s between each. These two conflict by design: if amount is set, each is ignored even if it has a valid value. Motion: offsetY is the initial vertical offset each item slides up from (default 3rem), ease is the easing applied to each individual item (default power3.out), and the stagger ease is a second easing that distributes the start times across the row — a curve like power1.out starts with bigger gaps between items and then clusters them tighter toward the end.

The most expressive option is from, which decides where in the row the wave begins. start (the default) runs left to right; end runs from the right; edges fires the first and last items first and moves inward; random shuffles the order; and a zero-based index (like 1) starts from a specific item — so 1 begins with the second item from the left. It’s a small attribute that completely changes the feel.

How to use it

1. Clone the project. Grab the Webflow cloneable — it includes the structure, the styling, and the script that powers the animation. There’s a full recap of every attribute (with links to the GSAP easing docs) at the bottom of the cloned page, so keep that as your reference.

2. Mark the list. Add the required attribute with the value list to the div block that wraps all your items, or to a Collection List. Publish and you already have a working staggered slide-and-fade on defaults.

3. Tune the timing (optional). Reach for threshold to change when it triggers on scroll, duration for how long each item animates, and either each (a fixed gap between items) or amount (a total time split across the row) for the spacing — remember, don’t set both, because amount wins.

4. Shape the motion (optional). Adjust offsetY for how far each item slides up, ease for how each item moves, and the stagger ease for how the start times spread across the row. See the GSAP easing reference for the values these accept.

5. Choose the order (optional). Set from to start, end, center, edges, random, or a zero-based index to control which item the wave begins from.

6. Reuse it freely. Drop the same attribute on as many lists as you like on one page — no indexes needed to tell them apart — and use it exactly the same way on CMS Collection Lists and custom grid layouts.