Webflow CMS: Stagger Items Animation per Grid Row

Animate Webflow CMS Collection List Items one after the other when scrolling—even if GSAP Stagger doesn't work.

In this video, you will learn how to make a high-quality Stagger Reveal Animation per Webflow CMS Collection List Items Build as soon as they enter the viewport. The catch: If all items have the same class, Webflow interactions often fire for a whole series at the same time—and a normal stagger doesn't behave as you'd expect.

You get a simple solution with Set Class (new interactions), cleaner CSS Transition/Transform Setup And a bit Custom CSS with :nth-child () Delays—included Prefers-reduced-motion A variant and a trick so that the items remain visible in the Webflow Designer while building.

🎓 Bonus: Oliver Garais also has one course about editorial design. With the code FORMBURG At the cash desk you get 50% discount.

Why GSAP Stagger often fails with Webflow CMS grids

If you a Webflow CMS Collection List To animate interaction via scroll, the first thought is: Timeline + Stagger, done. In practice, however, there is often a problem: If all collection items share the same class, Webflow triggers several items at the same time—often an entire row in the grid.

The result appears “choppy” instead of high-quality.

Objective: Animate CMS items one after the other when entering the viewport

What you want to achieve:

• Every CMS item animates Exactly when it enters the viewport
• Items in a row still get small delays to each other
• The whole thing remains easily maintainable in Webflow

Step 1: Scroll triggers to “Comes into view” and “Play once”

Create a scroll interaction on the collection item:

• Trigger: When element comes into the viewport
• Behavior: Play once
• Deactivate clamp start/end if necessary, especially if items are already starting visibly

In this way, the trigger remains neatly linked to the individual item.

Step 2: Don't animate in the timeline, but use Set Class

Instead of animating Transform/Opacity in the interaction timeline, use a Set Class Step:

• On entry: Add class, e.g. is-visible
• Optionally remove when leaving (but you usually want to leave it “once”)

The advantage: You separate “When does it trigger?” from “What does the animation look like?”

Step 3: Build an animation using CSS transitions in Webflow styles

Now you define the animation using Webflow Styles (CSS).

On your basic class (e.g. poster item):

• Opacity upon 0
• Transform TranslateY (slide down slightly)
• Transition for Transform (and optional Opacity)

On the modifier class (e.g. is-visible):

• Opacity back to 1
• Transform back to TranslateY (0)

You can even ease Opacity faster/differently than Transform, which immediately looks more high-quality.

Step 4: Real staggering with :nth-child () Delays

Webflow cannot target CMS items the way you need (2nd, 3rd, 4th item, etc.). There is usually only first/last/even.

That's why a small piece of custom CSS is added, which distributes delays by child position. In principle:

• Item: no delay
• Item: small delay
• Item: something more
• Item: etc

This gives you the “premium” stagger look without structural rebuilding.

Step 5: Consider Reduced Motion

Supplements Prefers-reduced-motionso that users get a clean display with reduced movement:

• Deactivate transitions/animations
• Opacity to 1
• Remove transform

Small change, big UX gain.

Step 6: Make items visible in Webflow Designer while building

Because the default state uses Opacity 0, items quickly “disappear” in the designer.

A practical workaround is a “Design Mode” override, which forces the designer to:

• opacity: 1
• Transform: none

To finalize, remove/deactivate this override again.

Result

You'll get a CMS Grid Reveal that:

• Triggered per item upon entry
• Within the range clean staggers
• Remains maintainable
• Reduced motion supported
• Webflows bypasses interaction limits

Bonus: Editorial Design discount

Oliver Garais has a course on editorial design. With the code FORMBURG at checkout you get 50% discount.