Hello,
I implemented a Lottie file. When I preview the animation in the settings, it plays fine but when the site is live, nothing. Can someone please help me figure out what is happening?
Here is my public share link: LINK
(how to access public share link)
Hey @kimwild
You need to append interaction to Nav Opens and Closes event. You can do that here. After that you need to create interaction which uses lottie element. Initial state needs to be at 0% played lottie file, and on open it should be like 45% based on your lottie file. On close you can just bring it back to 0 and it will work fine.
Example of that Loom | Free Screen & Video Recording Software | Loom
Let me know if that helped, cheers
Yes, that was it - Thank you so much!
Unfortunately, none of this helped me. There is no way to select “Nav Opens”. It’s always greyed out, apparently it only works with the predefined navbar element.
But 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 end point. At the start point Lottie is at 0% and at the end point 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 2024?
In case anyone is interested in why the Lottie animation didn’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 …