Lottie Animations in Webflow

Community resources Webflow Tips
1

Hi! I know some people on the livestream were curious about Lottie. I’m new to using it, but experimented with it on my portfolio a while ago and thought I would share what I did! Hope to do a more extensive tutorial and example page soon, but hope this helps in the meantime:

There is a plugin for After Effects called Bodymovin that allows most object animations to be exported as JSON/javascript, as well as a script by Airbnb called Lottie for incorporating these animations into apps/web. Everything I have done below is based off of the code that Bodymovin generates when exporting from After Effects with the “Demo” setting – I’ve just pulled apart the code from the HTML and JSON files that Bodymovin exports for simplification.

Bodymovin:
https://aescripts.com/bodymovin/

Lottie:
https://airbnb.design/lottie/

My website on Webflow with Lottie functioning:
https://webflow.com/website/Jonathan-Haring-or-Portfolio

If you open the website above in Webflow with the “Open in Webflow” link, look under the custom code area for the homepage, and then look at the two javascript sources in the header section. One links to the Lottie core script, which you can download from the address. Then, once you’ve exported your Bodymovin animation from After Effects you should have a JSON file. You can rename this to .js, making sure to format the code inside it like the other source file on my site (the animation .js file). Make sure it starts with “var animationData = {” and then a bunch of code for the animation. This “animationData” variable is important later with the code below, so make sure the variable name matches between the two. Then include both your animation file and the Lottie source code in your page header (both will be much too long to paste the full code into Webflow!).

You should host both of these scripts somewhere reliable – they are currently in my Dropbox but will likely move! Next, make a new div in Webflow. Set it for the size etc. you want your animation to be, then set the ID to “lottie”. Finally, include this code in the “before </body>” custom code area, making any modifications you would like for looping, autoplay etc:

<script>
var params = {
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
};

var anim;

anim = lottie.loadAnimation(params);
</script>

Note that the animations will only be visible on published pages due to the custom code.

5 Likes