Combination of Lottie and 'While Scrolling in View' Interation

A combination of position sticky elements with fixed height of VH. Then by applying 'While scrolling in view' animation at specific timeframe to create this type of interaction. Interaction applied on 'c-header' and 'c-lottie'. Adjust the VH on those classes to change the animation speed on each scroll. The lower the VH the faster the animation. Do take note to keep a minimum of 200VH.

Scroll down to view demo.

While scrolling in view animations

Keep scrolling~~


Story-telling interaction


The End.