How to Add Stagger In Animations in Webflow with GSAP
Easily stagger animations in webflow element when scrolling into view
Install the VisualDX Script
Firstly, make sure you have the VisualDX script before your </body>
Enable GSAP and ScrollTrigger Plugin
Add GSAP StaggerIn Attribute
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Div that is the parent of the element you wish to stagger.
Control Animation Duration
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Div that is the parent of the element you wish to stagger.
Add a Value in seconds to the Custom Attribute Value field.
e.g.
0.5 = 0.5 second duration
1 = 1 second duration
5 = 5 second duration
Control Animation Stagger
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Div that is the parent of the element you wish to stagger.
Add a Value in seconds to the Custom Attribute Value field.
e.g.
0.5 = 0.5 second duration
1 = 1 second duration
5 = 5 second duration
Add GSAP Fade In Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the same Webflow Div with the Stagger In Attribute
Add GSAP Slide Up Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the same Webflow Div with the Stagger In Attribute
Add GSAP slide-down Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP slide-left Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP slide-right Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP Scale Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP Bounce Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP Flip Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP Zoom Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Add GSAP Rotate Stagger Animation
Copy this value:
Paste the value into the Custom Attributes Value field of the Webflow Div with the Stagger In Attribute
Sponsor the Magic and
Buy Me a Beer
VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.
Think of it like buying me a pint for keeping your Webflow spells flowing.
You can support it here.
Cheers, legend!
This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.