GSAP Staggered Animation in Webflow | No Code Attributes-Only Solution

How it works

Copy the code in Page Settings and paste it into your project
Apply the attributes to the elements inside the page
Below is a list of elements to implement the custom video popup functionality.
component
I want this
Div Block
or
Collection List
to get the staggered animation.
Add this attribute
Name
fc-gsap-staggered

Value
list

Description
Defines the element the staggered animation will be applied to. It should be added to a Div Block wrapping all the items, or to a Collection List.
Option
threshold
I want to set a threshold for the animation trigger.
Add this attribute
Name
threshold

Value
0.4

Description
Use this attribute to specify at what percentage of the target's visibility the animation will be triggered. 0.4 means 40%.
The default value is 0.4.
Where?
This attribute should be applied to the "component" element.
Option
each
I want to set the amount of time between each animation's start time.
Add this attribute
Name
each

Value
0.2

Description
Use this attribute to specify the amount of time (in seconds) between each animation’s start time. So, if each is 0.2, there would be 0.2 seconds between each animation's start time. If you prefer to specify a total amount of time to split up among the staggers, use the amount property instead.
The default value is 0.2.
Where?
This attribute should be applied to the "component" element.
Option
amount
I want to set the total amount of time that gets split among all the staggers.
Add this attribute
Name
amount

Value
0.5

Description
Use this attribute to specify the total amount of time (in seconds) that gets split among all the staggers. So, if amount is 0.5, and there are 5 elements that stagger linearly, there would be 0.1 seconds between each animation's start time. If you prefer to specify a certain amount of time between each tween, use the each property instead.
The default value is 0.5.
Where?
This attribute should be applied to the "component" element.
Option
duration
I want to set the duration of the animation of a single item.
Add this attribute
Name
duration

Value
0.5

Description
Use this attribute to specify the duration (in seconds) of the animation of a single item.
The default value is 0.5.
Where?
This attribute should be applied to the "component" element.
Option
offset y
I want to set the initial position of each item along the y axis.
Add this attribute
Name
offset-y

Value
3rem

Description
Use this attribute to specify the initial position of each item along the y axis.
The default value is 3rem.
Where?
This attribute should be applied to the "component" element.
Option
from
I want to set the initial position of each item along the y axis.
Add this attribute
Name
from

Value
start

Description
Use this attribute to specify the position within the row of items from which the stagger animation will begin. Possible values are "start", "center", "edges", "random", or "end" or a zero-based index representing the position of the element within the row.
The default value is start.
Where?
This attribute should be applied to the "component" element.
Option
ease
I want to set the initial position of each item along the y axis.
Add this attribute
Name
ease

Value
power3.out

Description
Use this attribute to specify the easing function applied to the animation of a single item. Possible values are listed in GSAP Easing documentation.
The default value is power3.out.
Where?
This attribute should be applied to the "component" element.
Option
staggered ease
I want to set the initial position of each item along the y axis.
Add this attribute
Name
staggered-ease

Value
power1.out

Description
Use this attribute to specify the easing function that distributes the start times of the animations. So, for example, "power3.out" would start out with bigger gaps and then get more tightly clustered toward the end. Possible values are listed in GSAP Easing documentation.
The default value is power1.out
Where?
This attribute should be applied to the "component" element.

GSAP Staggered Animation

How it works

Copy the code in Page Settings and paste it into your project

Apply the attributes to the elements inside the page