Streaming live at 10am (PST)

Disable reguler scrolling until lottie animation completed

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

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! (:

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

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

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?

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.

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”;