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.
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.
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.
SHOW US YOUR AWESOME ANIMATIONS !