How to animate icons & illustrations in Weblow using After Effects & Lottie

If you know how to use After Effects, you can use GitHub and Lottie to display vector animations on your Webflow website.

How it Works

How it Works

Animate in After Effects

According to the Lottie website, you can use solids, shape layers, masks, alpha mattes, trim paths, and dash patterns.

Export using BodyMovin

The pay-what-you-want plugin exports a json file and an html demo file that lets you preview the animation in the browser.

Dowload BodyMovin

Upload to GitHub

The pay-what-you-want plugin exports a json file and an html demo file that lets you preview the animation in the browser.

Upload to GitHub

Link to Your File Using Lottie

Step 1

Add an empty <div> block to your site and give it a class of “bodymovin”</div>

Step 2

Add a link to the Lottie library in the custom code section of your page Settings. Make sure it’s inside the <head> tag.</head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.js"></script>

Step 3

In the before <body> tag section, add the following:</body>

<script>var loader = document.getElementsByClassName("bodymovin");</script>
function loadBMAnimation(loader) {  var animation = bodymovin.loadAnimation({    container: loader,    renderer: "svg",    loop: false,    autoplay: false,    path: "your-file.json"  });  loader.addEventListener("mouseenter", function() {    animation.play();  });  loader.addEventListener("mouseleave", function() {    animation.stop();  });}
for (var i = 0; i < loader.length; i++) {  loadBMAnimation(loader[i]);}

Step 4

Replace the URL (the blue link) with the url for your file. To get our url, go to your GitHub file, click “Raw”, and cope the url in the address bar.

Step 5

You can change the code above to suit your needs. For example, if you set autoplay to “true”, your animation will start playing as soon as the pahe loads. If you set loop to “true”, the animation will loop whenever it’s triggered.