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.
I can not believe that this hasn’t got more traction. This is absolutely amazing, Timothy! I did have a question about potentially modifying the code and adding to it.
I’m currently using the hover portion of the interaction to activate a top menu, and then the sub-menus stagger in really beautifully. My issue is that I want this interaction to be repeatable. So, I want to be able to hover OFF of that nav, and then have the items instantly disappear (or reverse the animation INSTANTLY), that way the next time I hover over that same nav (i.e. MENS), it repeats the animation. Any thoughts on how to accomplish this?
Great question! I haven’t tried an interaction like that yet, but I just added some hover off code to the code. You’d want to set a first click on your trigger to play an interaction making the items fade in, and then on second click, play a different interaction that makes the items fade out. The custom code will click the trigger once when you hover in and then click the trigger again when you hover out.
I wanted to ask whether this is possible to use on a Dropdown element that has CMS in it?
I have for my menu a Dropdown where on hover the Droplist comes in along with the CMS collection items. I’m trying to cause the Collection items to have a staggered fade-in effect but no luck
Thanks for sharing your knowledge! I’ve got a little problem with the click function. I want to use your code on first and second click on an element to open the menu. The staggered items seem to stuck in a loop if i ad the the animation on second click, which results in a flicker. Without the second click it works perfectly fine and since you wrote instructions for the second click it should theoretically work… right?
Hi Thimothy,
Thank you so much for sharing your knowlegde. I’ve been following your Youtube channel for quite some time now, and must say I’m amazed.
I’ve been trying to figure out, how i would be able to use your staggering interaction techniques, for a webshop. When i try to make these staggering effects, on a “shop all” page, all the animations happen at the same time. I guess it’s because it targets the ID and then play all the animations in a row. However i try to make it target the class, but the same thing happens. Can you help me out?
Thanks for this. Just noticed I’m having an issue when using it with scroll into view - if the window is resized the animation doesn’t seem to get triggered despite the relevant elements being in the viewport.
There is an issue with this solution: as you bind a click-event on a class in order to trigger the staggering effect, it will show the animation everytime a user clicks on that element. How can you avoid this behaviour?
