Notice: Webflow has added native support to After Effects and Lottie animations in September 2019. Please check out their blog post for the most updated details, along with video tutorials.
Learn about that here
For cloneable lottie components, make sure to follow us on webflow
Advanced Animations with Lottie
Hey!
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.
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.
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)
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?
- What is Lottie
- Creating / Downloading a JSON file
- Hosting the lottie JSON file
- Implementing lottie into webflow projects
- Controlling animation with JS controls
- Use case examples (Hero Animation, Loader Animation, Hover Animation, Icon Animation)
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:
https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.js'>
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 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:
<script></script>
var loader = document.getElementsByClassName("bodymovin");
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]);
}
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></script>
var loader = document.getElementsByClassName("bodymovin");
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]);
}
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.
Animate on Hover
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 EventListener directly below our Path file in the main script
(For this example, remove all the code below path: and replace it with this)
});
loader.addEventListener("mouseenter", function() {
animation.play();
});
loader.addEventListener("mouseleave", function() {
animation.stop();
});
}
for (var i = 0; i < loader.length; i++) {
loadBMAnimation(loader[i]);
}
9. Icon Hover Animation Full Code
So if you've add that correctly it should look something like this:
<!-- Hover Icon 1 -->
<script></script>
var loader = document.getElementsByClassName("lottie-icon1");
function loadBMAnimation(loader) {
var animation = bodymovin.loadAnimation({
container: loader,
renderer: "svg",
loop: false,
autoplay: false,
path: "YOUR_ANIMATION_PATH_HERE"
});
loader.addEventListener("mouseenter", function() {
animation.play();
});
loader.addEventListener("mouseleave", function() {
animation.stop();
});
}
for (var i = 0; i < loader.length; i++) {
loadBMAnimation(loader[i]);
}
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.
<!-- Scroll into view illustration 1 -->
<script></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_HERE")
};
};
});
11. Installing Bodymovin (After Effects Animation)
Skip this if you won't be exporting your own animations.
1 - Close After Effects if its open
2 - Install the ZXP installer
http://aescripts.com/learn/zxp-installer/
3 - Download the latest bodymovin extension
https://github.com/airbnb/lottie-web/tree/master/build/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!
12. Make something sweet.
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
