Lottie SVG Animations
Tom from Flowbase here with a guide on implementing advanced animation inside of webflow using Lottie - bodymovin’.
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.
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.
With some custom code you can add things like mouse over, play once, loop or even get creative and play the icons once scrolled into a section (We’ll show you this)
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.
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.
So, here's our main script:
Let's start by adding this script to our websites /head code section.
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)
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:
Once we've got our script added we now need to replace the path file with our animation.
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.
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"
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:
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.
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 EventListener directly below our Path file in the main script
(For this example, remove all the code below path: and replace it with this)
So if you've add that correctly it should look something like this:
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.
Skip this if you won't be exporting your own animations.
1 - Close After Effects if its open
2 - Install the ZXP installer
3 - Download the latest bodymovin extension
4 - Open the ZXP installer and drag the bodymovin extension into the window
5 - Open After Effects
Under the menu "Window > Extensions" you should see "Bodymovin"
Now you're good to go!
Hopefully that helps you get started, and that you've found this guideuseful.
Please consider sharing on social media or following us on flowbase.co