So… what I’m trying to do is have a lottie animation triggered by scroll play through it’s entirety before the user scrolls onto the next part of the page.
At first, the lottie animation was way way way too fast. I tried multiple things to change that and the only thing that worked was putting it in a grid and creating a sort of “dummy div” in 0px wide grid section that acted as a sort of track for the scroll.
This slowed it down. However, the page doesn’t stay in place long enough to scroll through the animation fully. The animation moves at a comfortable speed but the browser just keeps moving the page down as you scroll. Also, the page length is now crazy long.
So does anybody here actually know how to get this to work properly? I posted this a week ago and still haven’t gotten an answer. 
I’ve been banging my head for over a week on this and getting nowhere with any of the forums or tutorials or videos i’ve found online.
read-only share: Webflow - Our Climate Journey
I’m looking here: The World Agrees — We Need to Decarbonize
I don’t see a scroll animation, a lottie element or a grid on this page. Sure you shared the right page? More details about the location of the animation will be helpful. Maybe some screenshots to help the community see where the trouble issue is.
ah sorry it should all be there now.
(i just restored the backup after deleting the lottie and grid in order to attempt another method which also failed.)
I see. You’re close with the concept.
What you need to do is remove the Page Trigger interaction. Instead, you’ll want to apply the interaction to the parent container “.lottie-block-containment” using an ‘Element Trigger > While Scrolling in View’. The height that you apply to this element will dictate how quickly the Lottie file plays when scrolling. The taller the element, the slower the playback scrubbing will be. Think of this parent element being the track. The animation is long so you’ll probably need something like 800vh.
All you really need is the Parent track and the lottie inside. Get rid of the other stuff. See screenshot.
The lottie file needs the sticky property but you’ve forgotten to apply the top distance. See screenshot.
Thank you for your reply and tips. Unfortunately, it didn’t work.
Where did you get stuck? It was pretty easy to achieve on my end.
I’ve screenshot what to adjust. You’ll probably need to refine the settings but should give the general idea.
hmm… but now the footer is stuck in that position and also things get messed up when the rest of the page is displayed. also, the animation plays much too fast, which was the original problem i was trying to solve.
You can adjust the footer however you’d like.
If you’d like to change the speed of the animation while scrolling, change the height of the “.track” element from 800vh to something like 1200vh (or whatever height works best for the speed you’re hoping to achieve)
I see that you’ve placed the ‘track’ element inside of another div titled “holder” which has its own height of 74vh. I’m not sure what you’re attempting to do. This ‘holder’ element shouldn’t be needed and will change the results of my original direction.
You’ll need to provide more info regarding “things get messed up”. Description of elements, screenshots, screencast
thank you for your continued responses.
at this time, increasing the height of the element isn’t changing the speed of the animation and is creating a very large empty space in the page. it appears that the overflow settings aren’t cutting out the extra space created by the large height setting.
also, the page doesn’t “stay still” until the lottie animation is finished either. (and sometimes on page load, it won’t start the lottie at the beginning?)
Absolutely
There are a number of factors at play which becomes more complex when trying to control all of the things you’re hoping to achieve.
I got a little confused with the existing interaction, so I’ve made a vid starting it from scratch. See below. In the vid, I do the following:
- I remove the hidden overflow on the Track div
- We need to include a setting that makes your Lottie animation scale with the browser. I do this by assigning a height value of 46vw. This maintains the proportions of the animation based on the browser’s width.
- On the smaller viewport, I’ve assigned a width of ‘auto’ on the Track element. This keeps your animation centered in the browser.
- I delete your current scroll interaction and start a fresh one. I position the start at 4% to give a little pause before the scrub begins. You could probably use 2 or 3% too.
- I give a 20px top gap on the Lottie’s stick property. You can apply a larger gap if you want the animation to be more centered in the browser.
You mention not liking that extra white space under the Lottie, but there really isn’t another solution since the tall track element is needed to play the lottie. There might be a hacked way to place that conenten in the track div and assign a deep sticky property, but keep in mind that the user will not be able to scroll down to see this content. They’d only be able to see the top of it until the track begins to exist the browser. Not ideal.
I believe you were attempting to use the ‘holder’ element to create a mask of sorts but this is going to cause additional issues if/when a user is scrolling outside of the track element. It’s better to not have internal scrolling divs since you can’t predict where a user will try to scroll your page. Could be inside of the track, could be outside of it.
I’m not fully understanding your comment about the page staying still or the page load problem. I’m assuming this is related to some of the other settings to fill the white space.
ah yes! thank you. this works.
