[GUIDE] Lottie Bodymovin' Animation in Webflow

Thanks my dudes! @AlexManyeki @elwips

Appreciate the kind words, glad you found it useful :ok_hand:

Yeah Thanks Man, I was planning on doing this, already got my animation ready but I couldn’t make it work so far and left it for later stage.

Haven’t took time to read your post yet, seems quite detailed, so wanted to thank you already :smiley:

1 Like

@Thomas_92 you are the man! Thanks a lot for this guide.

1 Like

Absolute pleasure! Let me know if you run into any issues :blush:

2 Likes

Thank you for posting this guide, it is invaluable.

I struggled getting an animation to work - the JSON would work locally but would not show up in a webflow html page. Methodically going through everything I finally narrowed it down to the version of the bodymovin plugin - the animation had been created in the latest version (5.5.0) and so required the latest js version to work (in this case I used https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.js).

Just thought I’d share in case anyone else struggles with the same issue.

2 Likes

Thanks! This fixed my problem as well. The link goes in the src for step 2

1 Like

Thanks for pointing this out @vs_matt, I’m sure that would have caused some people grief.

I’ve updated the SRC both here and on the official guide.

Thanks again mate!

1 Like

Is it possible to make the animation play when scrolled into view every time? Ie: scrolling plays animation, then when out of view animation resets, scrolling back into view would trigger the animation again.

Thank you so much for taking the time to post this!!

1 Like

The Lottiefiles team created their own player. Now it’s easier to add Lottie animations to your Webflow project :smiley:

3 Likes

I’ll be updating the guide and referencing this shortly! Thanks Nelson

No probs Ran! Thanks for all the great design content :heart:

2 Likes

Hi Thomas, thanks for sharing this tutorial. It is very helpful!

Hi, thank you so much for this tutorial! It has been really helpful!

For the scroll into view animation let me share this pen https://codepen.io/anon/pen/qzbZjr (animation shows only once) it is done using Waypoints and it is fairly easy to control. And here is the original one which plays every time you scroll by the element https://codepen.io/tc4d/pen/dmRBVW

Also does anyone has any idea how to delay the Lottie animation? Except giving it a blank space in the After Effects compositions, which is not ideal for looped animations. I found this StackOverflow topic javascript - How Do I Delay a Bodymovin Animation - Stack Overflow , but for some reason I can’t get it to work. Could anyone please assist me?

Hi, does anyone have code to make it animate on click rather than on hover?

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.