[GUIDE] Lottie Bodymovin' Animation in Webflow

Hi there, I have an animation that is playing on scroll, and it looks great on desktop. However, when I go to tweak it for tablet and mobile views, changing the timing on a duplicated instance changes the original. This happens even though I duplicated and changed the names of the interaction and lottie instance.

I tried to upload a separate JSON file with a different name but since the data is identical, I’m assuming, it just overwrites the JSON that is already up. Any thoughts on this one? Thanks, Webflow community!

Hi there,

I followed this method since I use a complex code to pilot the .json
see example here (hover central zone, hold clic, release, and hover out):
: preview link

But it get’s broken somehow. Each segments should stop on last frame but instead it seems they stutter…

It should work like this:

Anybody knows what the issue could be?

Thanks in advance.

Sorry for disturbing, I almost fixed it, I was missing the “.wrapper” in my restart function.

Somehow I lost some of the smoothness of my animation, anybody knows why? when you compare with codepen you see clearly the easings are gone (specially the backward synergie during spraying).

Edit: Note that I had to set the renderer to “canvas” cause SVG wasn’t showing anything of the animation…

And @Thomas_92 do you know if it’s possible to call the “lottie element” and pilot it via custom code? if yes how?
Thanks, That would save me few steps in the process.

UP… I need help please!
Why is my lottie animation won’t render as “SVG” and only as “Canvas”?
Canvas doesn’t work properly.