Staggered interaction

We are using this template in this article, download it or simply use your own

Staggered interaction is one on the most interaction designers add to their website. In this post we will make the elements inside the second section to staggered (fade in, scale up and scale down) with some delay we will have a beautiful effects on our website.

Let’s select the Column (the main parent of our element), when the user scroll down we want to fade in this element with some scale up to more than its original size then scale it down to its original size.

Staggered Interaction - Select Element

Click on Animation 1 change the trigger to Scroll, the Init state to transform:scale(0.9);opacity:0;, Step 1 to transform:scale(1.03);opacity:1; and the Step 2 to transform:scale(1);, as you see fade it in with scale it up then scale it down. Under the SCROLL PROPERTIES section change the Scroll direction to Down and Scroll offset to 500px that mean the animation will happened when the user scroll down and the offset of this element from the top is 500px or smaller.

Staggered Interaction - GENERAL

Staggered Interaction - ANIMATION STEPS

Staggered Interaction - SCROLL PROPERTIES

Save it and test it !

For the two elements remain, we will add the same setting with delay for the first one 300 and for the second one 600.


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.