Lottie Scroll Animation with a twist - I need Help

Community resources Webflow Tips
1

Hi Guys,

i hope that one of you can help me with an idea that I want to integrate on my (one page) website.

I want to animate a Lottie file while scrolling. So far so good. I am able to do that. But there is a catch because of the effect I want to achieve.

After loading my page I want the lottie file and the scroll function to act as a “trailer” (the first thing the user see) before the actual hero section comes into place. The lottie animation is basically a question the user is asking himself, that is answered on my hero section.
Timeline:
Page Load
Lottie Animation on scroll (fixed - full screen)
Hero section appears
Scroll down the page

Basically animation section needs to be fixed until the animation is scrolled through. Then i need a transition so I can scroll thru the rest of the one pager.

Maybe, there is another way to achieve the same effect?

I hope you guys understood what I wanted to say haha :wink:

Thanks for any help!

2

The easy layout is one tall div inside of which you scroll, then the hero section, then the rest. Inside of the tall 1st section, there will be a sticky section that acts as a fixed object, where the animation takes place. You need something to scroll if you want the scroll trigger to fire. The user will think there’s noting scrolling but it will. It’s going to be easier if the sticky section is full screen, I mean full viewport, you’ll understand why when playing with that structure.

Tell me if that’s of any help.