GSAP Animations

Stagger children

Cascade an element’s direct children in, one after another.

Live demo

Scroll down to see it

First

First

Cascades in first.

Second

Second

Then this one.

Third

Third

And finally this.

How to set it up

Add it in under a minute

  1. Put your items (cards, columns, blocks) inside one Column or Section.
  2. Open that container → Animations → Scroll Motion (GSAP).
  3. Set Scroll Effect to Stagger children.
  4. Tune Time between items and Cascade from, then Save.
Open the manual

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free