on Mar 11, 2020
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.
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.
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.