Stagger Your Webflow Interactions Easily

Watch the tutorial here or follow along below.

stagger

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

  1. Wrap each of the items you’d like to stagger inside a div with a class of item-name-trigger.

  2. Ensure the trigger div doesn’t have any styling or padding and that your item completely covers it.

wrap-in-div

Applying the interactions

  1. With the trigger div selected, apply an element trigger of “Mouse click (tap)” and ensure the interaction affects the class, not the element.

  2. 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.

create-interaction

Adding the custom code

Add this code to your page or project settings custom code field under the “Before tag” section.

  1. 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.

custom-code

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.

  1. Cut the staggered animation code and paste it inside one of the trigger types where it says “Put the staggered animation below this line”.

  2. Change the target element class or ID to that of the element you want to use to cue up the animation.

change trigger

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

8 Likes

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.

Hey Timothy,

I just discovered your content and it’s brilliant :clap:

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 :confused:

Any help would be greatly appreciated mate!

Hi Timothy,

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? :smiley:

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?

this is super useful, thanks for sharing.
I think this should be easier tho, meaning webflow should do this natively.

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.

2 Likes

I’ve the same problem here … ! What can we do about it @timothy1643?

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?