Lottie animations in same viewport

Design help Animations & Interactions
1

Hello,

I am very new to Webflow and Lottie animations, but I am certain there is a way to accomplish what I am trying to achieve.

I have a lottie animation for my logo that is working fine. I also have another one that I want to play when the user scrolls down on the page, after the logo animation.

They are both working like they should right now, but I would like for the hero section that contains the logo animation to disappear when the user scrolls, and have the second section (creative text) appear as the user scrolls through it, all in the same viewport without any scrolling actually seen on the page.

I am not sure how to position my sections or which interactions I need to trigger in order to make this happen.

See link below - incredibly grateful to any help with this…thank you!

Here is my public share link: LINK
(how to access public share link)

2

I’m no expert but could you not make the first section sticky (to the top of the page), then set second section to relative with a higher z-index so it goes over the top? just a guess but it may work! :slight_smile: let me know if this works & something you like!

edit: i think you already have done this while playing around with your website, i set the background colour of the second section to black and it covers the first section quite well, i hope you get it fixed!