How do I create a staggered GSAP animation in Webflow without code?

Clone an attribute-based component, then add fc-gsap-staggered="list" to the div block wrapping your items — or to a Collection List. The included script reads it and applies a staggered slide-and-fade, so there is no JavaScript for you to write.

What's the difference between the each and amount options?

The "each" option sets a fixed time in seconds between each item's start; "amount" sets a total time to split across all the items in a row. They conflict on purpose — if you set amount, each is ignored even if it has a valid value.

Can I control which item the animation starts from?

Yes. The "from" option accepts start, end, center, edges, random, or a zero-based index, so the wave can begin at the first item, the last one, both ends moving inward, a shuffled order, or any specific item you point to.

Does this work with Webflow CMS collections and grid layouts?

It does. The same attribute goes on a Collection List, so CMS items animate the same way, and it also handles custom grid layouts and several independent lists on one page — no extra indexes needed to keep them apart.

No-Code GSAP Staggered Animations in Webflow

January 13, 2025 Beginner 9:36 webflowgsapstaggeranimationno-code

Add staggered slide-and-fade animations to any Webflow gallery, CMS list, or grid with GSAP — no code, just a few attributes to control timing, easing, and order.

Watch on YouTube

Key takeaways

The whole effect is attribute-driven — a single fc-gsap-staggered="list" on the div wrapping your items, or on a Collection List, is enough to get a working staggered slide-and-fade. Everything else is optional.
There are two ways to space the animations, and they conflict: "each" sets a fixed gap in seconds between items, while "amount" sets a total time split across the row — and if you set amount, each is ignored even when it holds a valid value.
The "from" option decides where the wave begins — start, end, center, edges, random, or a zero-based index — and it quietly changes the whole personality of the animation.
Two separate easings do two separate jobs: "ease" shapes how each individual item moves, while "staggered-ease" distributes the start times across the row, so the gaps can bunch up or spread out.
It scales without fiddly setup — multiple lists on one page need no indexes to tell them apart, and the exact same attribute works on static layouts, CMS collections, and custom grids alike.

Video chapters

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: fc-gsap-staggered="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.

One naming detail to notice before you start, because it’s the opposite of what you’d guess: only the marker is prefixed. Every option below is a plain attribute name — each, not fc-gsap-staggered-each.

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: offset-y 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 staggered-ease is a second easing that distributes the start times across the row (default power1.out) — a curve like power1.out starts with bigger gaps between items and then clusters them tighter toward the end.

Write offset-y with the hyphen, not offsetY. HTML lower-cases attribute names, so a camelCase spelling arrives as offsety, never matches, and quietly leaves you on the default with no error to tell you why.

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

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.
Mark the list. Add fc-gsap-staggered="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.
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.
Shape the motion (optional). Adjust offset-y for how far each item slides up, ease for how each item moves, and staggered-ease for how the start times spread across the row. See the GSAP easing reference for the values these accept.
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.
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.

Configuration reference

Attribute	Values	Default	What it does
`fc-gsap-staggered`	`list`	—	The one required attribute. Put it on the div block that wraps all your items, or straight onto a Collection List. On its own it gives you a working staggered slide-and-fade on defaults. Note that this is the only prefixed attribute here — every option below is a bare attribute name.
`threshold`	`number, 0–1`	`0.4`	At what fraction of the element's visibility the animation fires. 0.4 means it starts when the element is 40% visible.
`each`	`seconds`	`0.2`	A fixed gap between each item's start time, so adding items makes the whole sequence longer. Conflicts with amount — if amount is set, each is ignored.
`amount`	`seconds`	`0.5`	A total time split across all the items in a row, so adding items shrinks each gap instead of lengthening the sequence. If this is set it wins, and each is ignored even when it holds a valid value.
`duration`	`seconds`	`0.5`	How long a single item's animation lasts.
`offset-y`	`length`	`3rem`	The initial vertical offset each item slides up from. Mind the kebab-case spelling: HTML lower-cases attribute names, so a camelCase offsetY arrives as offsety, never matches, and silently leaves you on the default.
`from`	`start · end · center · edges · random · zero-based index`	`start`	Where in the row the wave begins. start runs left to right, end from the right, edges fires the outer items first and moves inward, random shuffles, and an index like 1 starts from the second item.
`ease`	`GSAP ease name`	`power3.out`	The easing applied to each individual item as it moves from its start value to its end value.
`staggered-ease`	`GSAP ease name`	`power1.out`	A second, separate easing that distributes the start times across the row rather than shaping any one item. power1.out starts with bigger gaps between items and clusters them tighter toward the end.

Resources

In the knowledge base

Reference pages derived from this lesson — the same material reorganised by concept, so you can look one thing up without rewatching. In English.

Stagger — spreading one animation across many targets
Stagger spreads a single animation across multiple targets, so it does nothing at all with one target; offset time sets a fixed gap between each target's start while total time is one budget divided across the intervals, and the stagger's own ease shapes the distribution of delays — a different job from the action's ease.
Add a staggered reveal to any list with one attribute
Drop fc-gsap-staggered="list" on the div wrapping your items — or straight onto a Collection List — and the included script builds a staggered slide-and-fade with sensible defaults; every other option is a bare attribute you add only when you want tighter control over timing, motion or order.

Frequently asked questions

How do I create a staggered GSAP animation in Webflow without code?: Clone an attribute-based component, then add fc-gsap-staggered="list" to the div block wrapping your items — or to a Collection List. The included script reads it and applies a staggered slide-and-fade, so there is no JavaScript for you to write.
What's the difference between the each and amount options?: The "each" option sets a fixed time in seconds between each item's start; "amount" sets a total time to split across all the items in a row. They conflict on purpose — if you set amount, each is ignored even if it has a valid value.
Can I control which item the animation starts from?: Yes. The "from" option accepts start, end, center, edges, random, or a zero-based index, so the wave can begin at the first item, the last one, both ends moving inward, a shuffled order, or any specific item you point to.
Does this work with Webflow CMS collections and grid layouts?: It does. The same attribute goes on a Collection List, so CMS items animate the same way, and it also handles custom grid layouts and several independent lists on one page — no extra indexes needed to keep them apart.

← Back to the course Browse all lessons