Disable reguler scrolling until lottie animation completed

Design help Animations & Interactions
1

Hi guys.
First of all, sorry if my english is not the best. I hope you guys will understand me anyway.

So i crated an animation with Cinema 4D & Adobe After Effects
you can watch what i did in that link

Now…
what im trying to do it’s when the user is scrolling - The scrolling it’s happening just on the 1st section and move on to the 2nd section just when the lottie animation is over.

this guy did it in this project in the camera hero section.

So again…
right now what’s happening is when the user scrolling the lottie animation is played but it’s keep scrolling reguler… to next section. i want to be “stock” on the black part until the user finish to see the whole animation and than moving to the white section…

I was trying to look into a solution for couple days but couldn’t find an answer so i came here.
If someone knows to explain me step by step how to do it - it will be awesome!
Thanks a lot! (:
Maor.

Here is my public share link: [LINK](https://preview.webflow.com/preview/lockery?utm_medium=preview_link&utm_source=designer&utm_content=lockery&preview=8297235ca6dd8a558e183d0ad49e924a&mode=preview)
(how to access public share link)

2

Hi, I’m struggling with the same problem. Did you get it solved?

3

Same here!

I have a lottie animation in the hero section, I wanted the user to see the animation finished (it’s only 1 sec) before being able to scroll down the webpage.
Have you had any luck?

4

That moment when you think you found the solution to your problem, and then the thread is just people having the same problem :persevere: I’ve been trying to get this to work for weeks. The only kind-of-workaround I found so far is making the lottie sticky and making the parent of the sticky element large enough to scroll long enough until the lottie ends. But that’s really annoying when it comes to different screen sizes.

Any better idea would be greatly appreciated.

5

Replace the 3000 in the script with the animation duration

window.addEventListener(“load”, (event) => {

document.querySelector(“body”).style.overflow = “hidden”;

});

setTimeout(unfreez, 3000);

function unfreez() {

document.querySelector(“body”).style.overflow = “auto”;

}

7

Hello!
Did you find a solution? very much needed too

8

I sort of figured this out.

If you make the container of the lottie/text a sticky position item, then essentially you “cheat” because it is scrolling, it’s just scrolling a background that is blank, and that scrolling advances your lottie. I set my section for that area to be 300VH for example. On his website you can see the scroll bar moving as the lotties play.

Now, I still need to figure out how to set the correct amount of scrolling per that area, because as of now, the lottie takes up the whole page as it’s 0-100% scrolling etc. Current workaround is trial and error, figure out what keyfram lines up with when it is in frame, and make that when the lottie plays/doesn’t scroll. For me it was 95% and 100%

Hope this helps, I am a complete self taught newbie, so sorry if I used incorrect terminology, but this seems to work for me.

https://preview.webflow.com/preview/bradleys-portfolio-58ad44?utm_medium=preview_link&utm_source=designer&utm_content=bradleys-portfolio-58ad44&preview=508fa1dc25f68b5b2bf7f6c2650325ae&pageId=5f8e339b369e62e8cf5f2681&mode=preview