Help with linking AE animation to scroll?

Hey forum,

I’ve built the attached animation, and according to the html file the Bodymovin file generated, it should have exported correctly with background colors and expressions… but when I upload it to Webflow it has this blurry transparency-looking background and some of the layers seem to have disappeared. Anyone have this problem/know a fix??

I’m also hoping yall can give me some pointers on how to set it up so that it’s sticky for 3 folds, and the scroll affects the animation while scrolling. Right now the animation seems to start in the middle and doesn’t reach the end while in view? Even after setting the parameters in the lottie “while scrolling” animation. The tutorials made it look so easy but it doesn’t seem to translate for me!

Here is my public share link: Webflow - 2020 MC Impact Report

[file:///Volumes/Ansley%20Luce%20Design%20SSD/Media%20Cause/Media%20Cause%20Marketing/2020%20Impact%20Report/Hero%20animation/hero%20animation/demo/hero%2520v2.html](file:///Volumes/Ansley%20Luce%20Design%20SSD/Media%20Cause/Media%20Cause%20Marketing/2020%20Impact%20Report/Hero%20animation/hero%20animation/demo/hero%2520v2.html)

Hi Ansleyluce,

Lottie Animations usually do work pretty well in Webflow, however, there are some settings that need to match. In this tutorial, they explain how to map a Lottie Animation to the scroll position. A more elaborate explanation is here.

In your specific case, I can’t find any Lottie Animation inside of your project, so it’s hard to help you. For testing purposes, you might want to download the Lottie from the webflow tutorial, so you can rule out a corrupted file.

Cheers
Leon

@LeWolf hi! Thanks for your help. I wasn’t receiving any responses so I removed the Lottie animation altogether since I couldn’t figure out the glitches. I just threw the lottie animation back into the page though - could you take one more look and see if you have any perspective on this weird transparency issue?

Hi @ansleyluce,

for the Lottie animation to work, you need to create an Element Trigger.
So you choose your Lottie animation, head over to the interactions panel, and add an “Element Trigger” to start a new While scrolling in view animation. In this animation, you add the two keyframes Lottie with 0% progress at the beginning and 100% at the end, as shown in this video.

In my test, the animation played as intended and lasted until the next element (RE:2020) appeared.

Let me know if this solved your issue.

I see what you’re saying - it seems close now, after entering 0%/100% on the element trigger, but it appears to start at about 60% through the animation rather than 0, even though the settings show a different intention.

Curious where this glitch is coming from.