Streaming live at 10am (PST)

[GUIDE] Lottie Bodymovin' Animation in Webflow

Update JULY 2019 - Please note that webflow will be supporting lottie in the near future. This guide will soon be out of date, but I'll be sure to provide links around the most updated method.


Hey guys!

Wanted to share a guide on using Lottie’s Bodymovin for animation inside of Webflow.

I’ve been using it for a number of client projects, and it’s SUPER powerful when used right.

You can view the full guide on flowbase.co but it’s of course added below too :smiley:

You can clone the project here
OR you can preview it here.

Lets get started’

Lottie is a fantastic way to add some extra wow to your web designs, or to help communicate complex messages without limiting creativity or your sites speed.

In this guide I will explain how to get started with lottie and how to you can add lottie to your own projects. I’ll also show you some custom code that will get you started with simple JS controls.

We’ll look at how to set a preloader with Lottie, How you can have hover animations, and finally an example of icons that start animating once scrolled into view.

What is Lottie & Bodymovin’


Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
- Lottie Website


This can be super useful for creative loading animations, hero animations, buttons & really anything you can come up with.

What do I need?

  • Webflow
  • After Effects Render OR lottiefiles.com
  • Lotties Bodymovin Script File (We’ve got that below)
  • GitHub Gist (To host our path file)

What will we learn here?

In this guide, I will take you through the basics of using lottie for your own webflow project.
We will be adding (1) a preloader to our page with a lottie animation (2) icons that play on hover and (3) An illustration that plays once, when scrolled into view.

1. Creating / Download an animation file.

The first step is sourcing your animation file.

In this example we will be using a free asset from lottiefiles , a community collection of 1000s of animations. This saves us from rendering out an animation using the After Effects Plugin (Phew!)

If you wish to make your own animations, you will be able to do so in After Effects.
We have attached a detailed guide at the end of this, showing you exactly how to get started with your own animations.

Scroll to the bottom of this guide for complete details on downloading and installing files.

2. Adding Lottie Script to our project

Okay!

So, here’s our main script:

<!-- MAIN Bodymovin JS-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.js'></script>

(12/04/19) This script has been updated as noted by @vs_matt

Let’s start by adding this script to our websites /head code section.

3. Preparing the Lottie div (Structure)

We’re going to be adding lottie to our website through applying it to a div and letting the script target the classname .

To apply the animation we will be using two div blocks with unique class-names.

Please Note: You can use the one bodymovin div, but for increased flexibility we will be using the wrapper to define sizing.

Our wrapper-div will be used to set ‘boundaries’ or control the sizing , while the bodymovin div will hold the animation, and follow its parent, filling the defined size (100% W / 100 H)

So to recap, we have the following classes:

(1) the bodymovin-wrapper (The size and placement of the animation)
(2) the bodymovin div (where the animation goes)

Let’s add the first div and give it the class bodymovin-wrapper-1 - Lets also define the size of this as 100px width & 100px height.

Now lets add a div inside of our wrapper and give it the class bodymovin-1 . Lets also set this to 100% Width & 100% Height (so that it fills that parent element)

4. Adding the base script.

Okay, so we’ve got a div ready (bodymovin) and it’s just sitting there wanting for an animation to come along.

Let’s add the following script into the Before </Body> tag of our custom code section.
This code is going to to target our class and load the animation into that div.
It’s also going to tell the animation some rules, like if it loops, should it auto play etc etc.
We can add to this script to control really anything we want, but lets start with the basics:
Add the Script:

<!-- Loader Animation -->
<script>
var loader = document.getElementsByClassName("lottie-1");
function loadBMAnimation(loader) {
 var animation = bodymovin.loadAnimation({
   container: loader,
   renderer: "svg",
   loop: true,
   autoplay: true,
   path: "YOUR_ANIMATION_PATH_HERE"
 });
}

for (var i = 0; i < loader.length; i++) {
 loadBMAnimation(loader[i]);
}
</script>


Once we’ve got our script added we now need to replace the path file with our animation.

5. Hosting our animation file.

Okay, so if you’ve done your own animation and used the extension you would have an exported JSON file.

If you’re using www.lottiefiles.com, find an animation you like and download the JSON file.

Once we’ve got our JSON file we need to host it, and we obviously we don’t want to pay for anything.

Lets head over to Githubs GIST - https://gist.github.com/


Here we need to add the code inside our JSON file so that we can use GIST to host our code snippet. Let’s drag our JSON file into a new tab so it opens up the text content. (You could also use notepad)

We need to copy this text content into the main section of gist and title it with a .json extension. For example animation.json as the name.

Once we have added the code from our JSON file we need to CREATE SECRET GIST

Now create a secret gist and click RAW once it has loaded (See Below).

The URL for the raw text will be our file path.

6. Add our the RAW path to the animation.

Okay, now we need to copy the files URL after we’ve clicked RAW and copy that URL into our code for the Path line.

Replace the URL here: path: “RAW_PATH_HERE”

7. Double check our animation.

Alright, when we publish the site we should now see the animation looping in the place we applied it.

The final code should look something like this:

<!-- Loader Animation -->
<script>
var loader = document.getElementsByClassName("lottie-1");
function loadBMAnimation(loader) {
 var animation = bodymovin.loadAnimation({
   container: loader,
   renderer: "svg",
   loop: true,
   autoplay: true,
   path: "https://gist.githubusercontent.com/Bekkers92/82fe560723b2a062f455ceca8f589e9f/raw/6567ccb81a52a99b9e82506711cb00cd3ff2e7c7/loader.json"
 });
}

for (var i = 0; i < loader.length; i++) {
 loadBMAnimation(loader[i]);
}
</script>

Please Note: You can replace ‘bodymovin’ with any class name, aslong as the div matches it. You can also duplicate this and change the class name to have multiple animations.

8. Animate on Mouse Hover

Okay, so that’s the basic looping animation and how to implement bodymovin into your webflow project. Now lets look at some hover icons.

To start the hover animation on mouseover we need to add some JS controls letting it know to do that.

Let’s add the following Event Listener directly below our Path file in the main script

 });
  loader.addEventListener("mouseenter", function() {
    animation.play();
  });
  loader.addEventListener("mouseleave", function() {
    animation.stop();
  });

9. Icon Hover Animation Full Code

So if you’ve add that correctly it should look something like this:

<!-- Hover Icon 1 -->
<script>
var loader = document.getElementsByClassName("lottie-icon1");
function loadBMAnimation(loader) {
 var animation = bodymovin.loadAnimation({
   container: loader,
   renderer: "svg",
   loop: false,
   autoplay: false,
   path: "https://gist.githubusercontent.com/Bekkers92/285ddd71de96d88d94bb759fb1c538ce/raw/ee9e57737eea79800ecace081464adf83d0e95ba/icon1.json"
 });
  loader.addEventListener("mouseenter", function() {
    animation.play();
  });
  loader.addEventListener("mouseleave", function() {
    animation.stop();
  });
}
for (var i = 0; i < loader.length; i++) {
 loadBMAnimation(loader[i]);
}
</script>

10. Scroll into view animation

Okay, so this ones a little bit more complex. But it’s really the same idea, and we wont go deep into specifics.

This code will basically set the animation div to none (invisible). It will do this by using an ID tag that we will apply to the wrapper element of our animation.

Since the div effectively isnt there, when we make it visible the animation will play. In this example we will set an ID to ‘scrollingArea’

We will then apply an event listener to change the visability of this element when scrolled into a certain area (You can change this)

So here’s the code.

    <script>
    // sets default vlaue of surrounding div to none so it doesnt appear
    let animationDiv = document.getElementById('scrollingArea')
    animationDiv.style.display = "none"

    // need to pass in the div where you want the item to load and the file location
    function loader(div, pathLocation) {
        let animation = bodymovin.loadAnimation({
            container: div,
            renderer: "svg",
            loop: 1,
            autoplay: true,
            path: pathLocation
        });
        animation.play();
    }

    window.addEventListener('scroll', () => {
        // can set scroll height by changing the number
        let scrollHeightPercent = document.documentElement.scrollHeight * 0.08
        let currentPOS = document.documentElement.scrollTop || document.body.scrollTop

            // once the scroll height has gone past the % stated abvoe it will make the style appear
        if (currentPOS >= scrollHeightPercent) {
            let animationDiv = document.getElementById('scrollingArea');
            if (animationDiv.style.display == 'none') {
                // stuff here
                animationDiv.style.display= ""
                
                let bodyMotion1 = document.getElementById('lottie-scroll-1');
                loader(bodyMotion1, "YOUR_ANIMATION_PATH")
            };
        };
    });
    </script>

Hope this is helpful guys!

Please consider sharing this guide on flowbase, or joining our newsletter for more guides :slight_smile:

Thanks,

Tom

21 Likes

Thanks for sharing @Thomas_92

2 Likes

Sir, you are the goat!

Literally just been wondering if this was possible, thank you Tom!

1 Like

You sir, are a legend! Thanks @Thomas_92

2 Likes

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:

2 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 https://stackoverflow.com/questions/52462355/how-do-i-delay-a-bodymovin-animation , 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?