Watch the tutorial here or follow along below.
This tutorial allows you to create an interaction on one item and easily apply it to all other items with the same class - using a timed offset of your choosing for each.
In this tutorial, I’ll show you how to:
- Stagger interactions on page load
- Stagger interactions on click or hover of any element
- Stagger interactions on scroll into view
- Stagger interactions on collection items (regardless of number of items)
We’re going to use a little bit of code to trigger our native Webflow interactions. Let’s get started!
Setting up the elements
Wrap each of the items you’d like to stagger inside a div with a class of item-name-trigger.
Ensure the trigger div doesn’t have any styling or padding and that your item completely covers it.
Applying the interactions
With the trigger div selected, apply an element trigger of “Mouse click (tap)” and ensure the interaction affects the class, not the element.
Create your interaction under “On 1st click” to animate your item and/or elements inside your item. Ensure your actions are applied to “Only children with this class”.
If you plan to stagger the items on hover or click of an element, use the “On 2nd click” interaction to define how the items will animate when you hover out or click again.
Adding the custom code
Add this code to your page or project settings custom code field under the “Before tag” section.
- Change the class name following the period to your trigger’s class name and change 200 to however many milliseconds you want the delay to be following each item.
Triggering the animation on click, hover, or scroll into view
By default, your staggered interaction will play on page load, but if you want to trigger it on click, hover, or scroll into view of another element, follow these steps.
Cut the staggered animation code and paste it inside one of the trigger types where it says “Put the staggered animation below this line”.
Change the target element class or ID to that of the element you want to use to cue up the animation.
Reusing the stagger code
If you would also like to stagger another group of items with different classes on the same page, copy the animation code along with any triggers you’d like to use and paste it before the tag. Then you can replace the class names with your new elements’ classes.
Watch more tutorials for Webflow Pros on my YouTube Channel