I was wondering how I can make a lottie animation play when it is in view? (not on scroll).
My issue is that the animation is playing when the pre-loader screen is showing and by the time it disappears, the animation has already played a portion of the animation already.
I also have the lottie animation play on scroll and rewind on out of scroll so I can’t just trigger the lottie to play at the end of the pre-loader animation as it get overwritten by the other animation.
Chose any element in your page, or create an invisible dummy one, as a trigger for a “Scroll into view” Interaction. Use this trigger to trig your Lottie anim playback.
None of the answers on the Internet have yet provided a satisfactory answer. I myself found the following solution to the problem: a Lottie animation that should start automatically without being scrolled and when in sight:
The DIV, which contains the Lottie animation, gets the following element trigger action (affecting the Lottie): “Scroll into view”: the action here has no timeline (apparently this only works for scroll actions) but I could set a start and an end point. At the start Lottie is at 0% and at the end at 100%. That wouldn’t get you anywhere without a timeline, but I’ve entered the number of seconds that the animation is long in the “Easing Duration” field at the end point (without being interested in easing itself). For me it was 14 seconds. Voila, that’s how it worked for me.
I hope I can help others with this before they go mad.
Now I just have to find out how I can prevent the page from scrolling before the animation is finished … That seems to be another big problem that I haven’t been able to find anything that really helps.
And look at this: after fiddling around with the navbar and “navbar open” trigger and Lottie, the Lottie animation suddenly starts by itself. No matter when and where in which div and even without the trouble of trigger action …
Hmmm. Why didn’t it work before? Is the automatic start of a Lottie animation still a problem in Webflow?
In case anyone is interested in why the Lottie animation wouldn’t start automatically for me: its DIV was connected to another DIV in terms of certain trigger actions. Since I had made that one invisible, the animation in the other DIV wouldn’t start. It only started again when I removed the action connection or the other DIV was no longer invisible … hmmmm …