So I am trying to animate a Lottie in place. Once the animation is complete, the rest of the web page below comes in.
I’ve already deduced that the lottie needs to be fixed in order to stay in place, but that pulls all of the other web content to the top of the page and underneath the lottie animation itself. When I use scroll effects, I can set the lottie animation to begin at 0 and end at the end of the web page—but—I only want the lottie to end after a certain number of seconds (or at least after a certain number of pixels). The problem with setting it to end at the end of the web page with the “while page is scrolling event” is that I might add more content to the web page and I don’t want to have to keep adjusting the timing of the lottie animation in scroll effects.
I thought of using ‘while scrolling in view’ but this ends quickly because the lottie file itself does not take up more than the height of the screen viewport height. If I increase the lottie height just to keep it in frame, while using the ‘while scrolling in view’ effect, the visual portion of the lottie becomes centered vertically with the height—thus, taking it out of the viewport.
You’ll want to look into using position: sticky for the Lottie file within a track of sorts—a tall div that gives the image space to scroll within—and then giving that outer track a “While Scrolling in View” interaction.
This means that while the track is scrolling across a set height, the Lottie file will “stick” and only play throughout the height of the containing div. Once it reaches the end, it will scroll with the site and the animation will stop.
Obviously you may need to modify some offsets with the interaction, but it sounds like the above will be what you’re looking for. If you run into issues or have questions, just reply with your read-only link and I’ll take a closer peek
So the problem with the position sticky is that even if I get the animation to stay in place in correspondence with the height of its parent container, the scroll affect is looking at the entire height of the web page (which in this case is caused by the height of the parent container housing the animation). I actually need the scroll effect to look at the parent container alone, not the web page height. This will allow me to add as many additional sections to the web page and it will not affect the animation duration, making it slower or faster, based on how many items are causing the web page to grow taller.
So in a nut shell, when the web page loads, I want this animation to play automatically to its mid-point. Then as the user scrolls it plays the rest of the animation in step => then the rest of the web page content comes in as I scroll down the page. If I scroll back up, everything just reverses. Its hard to setup a read only link, since I can’t get any of this to work.
I think getting a project going will help here—even if it’s not working—as it’s hard to give suggestions without some sort of reference.
It’s sounds like what you want to do should be possible, but without seeing the set up I’m not sure where the issues are coming from. Maybe a reference of some sort?
Basically, there is a part that I can’t get to work in the demo, because when I implement, it somehow disables the other thing I’m trying to do. Here is what I’m trying to accomplish:
Have the box automatically animate to a certain point in the Lottie animation (right before the box opens) and then stop.
Once it has stopped, as the “user” is scrolling down the page, the animation will finish playing out in its entirety, but in its fixed (or sticky) position.
When the animation is completed in its entirety, the rest of the content below scroll up into the viewport (which naturally occurs when you scroll down a page).
If a user goes back up the page, everything reverses until it gets back to the mid-point of the animation.
The duration of the animation should remain the same, whether I add more content to the page or less. Presently, when I add content, the animation changes, because the “while scrolling in view” scroll effect is based on the page height by default in Webflow.
Note: It seemed like @PixelGeek tried something similar.
Only, the animation he created initially was cut off, so he added more top and bottom content to the page—this was because the animation is based on the height of the page overall. I would imagine that adding additional top or bottom content would affect playback even more. Not what I’m looking for, need something that remains consistent, the duration of the animation based on the height of its parent container (which might just be a section on the page) or maybe some other static method that’s easily adjustable. Something static, but not the height of the web page itself.
Here is a video I put together that might help as well, demonstrating the issue:
Perfect, that is all great information that gives me a better picture of what you’re looking for—thanks for putting that together. Since I don’t have the read-only link, I’ll just do my best to explain the issue but feel free to generate that and send it over as well if you’d like a walkthrough instead.
To get this working more like you’re expecting (in terms of the scroll animation) you’ll want to make sure the target for the interaction itself is the “track” that the fixed element scrolls within—not the Lottie element. This will base the animation timeline off of the height you set on that track element.
The reason you’re seeing it “jump” to 50% is because the element fully in view (where it sits at the top filling 100% of the screen height) is actually halfway through the “While scrolling in view” interaction. You can imagine 0% is right before it enters, 50% is in the middle of the screen, and 100% is right when it exits. You started exploring offsets at the end of your recording, but along with dragging the nodes in the interaction itself (where it starts and ends) the offset can be used to ensure the animation always starts and finishes where it needs to.
To get the animation to play up to 32% on page load (the point right before the box opens up), you’ll want to make a separate interaction that fires “When the page finishes loading” that plays the animation up until that point. Now you can edit your “While scrolling into view” interaction so the start point of the Lottie animation in the timeline is 32% of the total animation duration with an ending of 100%.
Keep in mind that if a user scrolls before the animation finishes initially or they refresh below the fold there may be some unexpected behavior (like the animation abruptly jumping ahead) but I think it will get you much closer to the effect you’re looking for.
Let me know if you end up generating that read-only link and I’d be happy to record an explanation in the project itself
Oh sorry pasted wrong link. I’ve added right link in my last message.
So I changed the target to the “track” or parent container. But when I apply the “while scrolling in view” action, the lottie file is no longer in the list. So I can’t tell it to play the lottie animation.
I learn a few things from the video, I really appreciate it. I’ll dig into this and share finished product here once I’m done.