Custom staggered animations in Webflow usually require JavaScript, timeline logic, and a bit of GSAP knowledge — but not this time.

In this tutorial, you’ll learn how to recreate a fully dynamic staggered slide-and-fade animation using Webflow + a small script placed in your Page Settings. Everything else is powered by attributes only, which means you can set up and customize the entire animation without writing code.

We start by looking at two different layouts — a complex Flexbox structure and a standard grid. The goal is the same for both: animate all items in rows with smooth GSAP timing, clean movement, and full control over how each element enters the screen.

Once the base attribute (fc-gsap-stagger="list") is applied, you can customize:

• the visibility threshold that triggers the animation
• the timing strategy (each vs amount)
• the duration of each item
• the vertical offset for the slide effect
• the easing for both the animation and the stagger distribution
• the direction and order of the stagger (start, end, center, edges, random, or a specific index)
  

You’ll also see real use cases: multiple independent lists on the same page, CMS Collection Lists with images and lightboxes, and custom grid layouts where every animation works flawlessly.

By the end of the lesson, you’ll be able to apply this technique to galleries, testimonial sliders, portfolio items, or even — why not — a list of all your favorite anime. With just a few attributes, GSAP becomes accessible, reusable, and incredibly powerful inside Webflow.

A link to the cloneable is available in the description so you can explore, remix, and adapt the solution to your own projects.