{"id":332224,"date":"2021-01-11T08:09:12","date_gmt":"2021-01-11T16:09:12","guid":{"rendered":"https:\/\/css-tricks.com\/?p=332224"},"modified":"2021-01-11T08:09:16","modified_gmt":"2021-01-11T16:09:16","slug":"animating-with-lottie","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/animating-with-lottie\/","title":{"rendered":"Animating with Lottie"},"content":{"rendered":"\n

I believe animation on the web is not only fun, but engaging in such a way that it has converted site visitors<\/em> into customers<\/em>. Think of the \u201cLike\u201d button on Twitter. When you \u201clike\u201d a tweet, tiny colorful bubbles spread around the heart button while it appears to morph into a circle around the button before settling into the final \u201cliked\u201d state, a red fill. It would be much less exciting if the heart just went from being outlined to filled. That excitement and satisfaction is a perfect example of how animation can be used to enhance user experience.<\/p>\n\n\n\n

This article is going to introduce the concept of rendering Adobe After Effects<\/a> animation on the web with Lottie<\/a>, which can make advanced animations\u2014 like that Twitter button \u2014 achievable.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

Bodymovin<\/a> is a plugin for Adobe After Effects that exports animations as JSON, and Lottie is the library that renders them natively on mobile and on the web. It was created by Hernan Torrisi<\/a>. If you\u2019re thinking Oh, I don\u2019t use After Effects, this article is probably not for me<\/q>, hold on just a moment. I don\u2019t use After Effects either, but I\u2019ve used Lottie in a project.<\/p>\n\n\n\n

You don\u2019t have<\/em> to use Lottie to do animation on the web, of course. An alternative is to design animations from scratch. But that can be time-consuming, especially for the complex types of animations that Lottie is good at. Another alternative is using GIF animations, which are limitless in the types of animation they can display, but are typically double the size of the JSON files that Bodymovin produces.<\/p>\n\n\n\n

So let\u2019s jump into it and see how it works.<\/p>\n\n\n

Get the JSON<\/h3>\n\n\n

To use Lottie, we need a JSON file containing the animation from After Effects. Luckily for us, Icons8<\/a> has a lot of free animated icons here<\/a> in JSON, GIF, and After Effects formats.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

Add the script to HTML<\/h3>\n\n\n

We also need to get the Bodymovin player\u2019s JavaScript library in our HTML, and call its loadAnimation()<\/code> method. The fundamentals are demonstrated here:<\/p>\n\n\n\n

<div id=\"icon-container\"><\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bodymovin\/5.7.4\/lottie.min.js\">\n\n<script>\n  var animation = bodymovin.loadAnimation({\n  \/\/ animationData: { \/* ... *\/ },\n  container: document.getElementById('icon-container'), \/\/ required\n  path: 'data.json', \/\/ required\n  renderer: 'svg', \/\/ required\n  loop: true, \/\/ optional\n  autoplay: true, \/\/ optional\n  name: \"Demo Animation\", \/\/ optional\n});\n<\/script><\/code><\/pre>\n\n\n
Activate the animation<\/h3>\n\n\n
After the animation has loaded in the container, we can configure it to how we want it to be activated and what action should activate it with event listeners. Her are the properties we have to work with:<\/p>\n\n\n\n