Probably everybody has seen popular vector animations on different websites with help of which interesting hero images and animated buttons are created. They add unobtrusive interactions that do not affect the loading speed and do not lose quality on different devices, even if it’s iMac 27 with Retina 5K. I really like that stuff and wanted to learn how to make cool vector animations. I thought that I needed to edit SVG code, but the process of converting animation into platform-dependent code is very tedious and, at the same time, there are high chances that errors may occur. Fortunately, guys from Airbnb with Lottie are here to save us!

You want to ask what Lottie is? It is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin plugin and renders them natively on mobile! Since the library is based on JSON format, animations are very small in size but can be very complex. Animations can be launched, resized, looped, slowed down and even cleaned in real-time.

How to create Lottie animation?

To create a vector animation you need to install: Adobe Illustrator, Adobe After Effects (Install the Bodymovin plugin to it). Then sign in on lottiefiles.com where you can watch, save and see the preview of your animation in JSON format, or you can also use the loupthibault.github.io/bodymovin-player/ service.

So, let’s go step by step. First of all, you need to draw an image in Illustrator. But there are a few important moments, each element of the picture which you want to animate, needs to be drawn in a new layer. Also, you should not use gradients, shadows, raster images, have to forget about effects, strokes need to be in separate layers and text converted into curves. Another way to do it is to draw shapes in After Effects without Illustrator, but it will work only for simple pictures. The second step is to download and install the plugin Bodymovin. You can download it from aescripts: http://aescripts.com/bodymovin/ . Next, import your image to After Effects, save it in ai format, open, drag and drop it to the timeline, right click your mouse and choose CREATE SHAPES FROM VECTOR LAYER (check the screenshot below).

Now when the image has been imported in After Effects you can start creating vector animation. Try to use fewer keyframes because they significantly increase the file size. Remember, if you do a loop animation, every first keyframe in every layer must be the same as the last one.

The third step - use a Bodymovin plugin for creating JSON file for each animation in After Effects. Each JSON file contains encoded instructions for the whole composition. Bodymovin is very easy to use (see screenshot).

Here we go!

Appealing design, fun animation, great pictures and video is not enough to create a good impression and make sure that a user has best experience. Another vital component is website performance - page loading speed. High-performance websites result in high return visits, low bounce rates, higher conversions, engagement, higher ranks in organic search, and better user experience. Slow websites will cost you money and a bad reputation. I am sure everyone wants to make website more interactive, interesting and unique but at the same time not increase page loading speed. As I have mentioned above Lottie animations or vector animations are really small in size (that's obvious because these are vector, not svg and not gifs), usually several Kb. Not only these animations are really lightweight, but can be reproduced on various OS and even on slow-performing devices and on all screens.

Conclusion

You will get SVG animation, which is lightweight and supports JSON. Check your animation by the URL that I provided at the beginning of the article. Does it look nice? If everything is ok, give JSON files to the developer, who will use Javascript Lottie library to create SVG for each animation. SVG is another form of coded instructions for animation and can be embedded in HTML code. This means that no network requests are required to render each animation - no huge GIFs or video files.

Hope you will use my instructions for beautiful animation in your projects =) Share your animations with me, I will be very happy to see them.