How to use animated icons on a website or a mobile app

Learn how to implement After Effects CC animations on the Web, using Bodymovin and Lottie

Welcome to the second post in the #WeekOfIcons series. Week Of Icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. This year, we focus on a fusion of icon design and animation. Throughout the week, you will get to read three animation-related tutorials and will have a chance to download five freebie icon sets, including some animated icons.

In our first post, Luke Roberts showed How to animate an SVG icon with After Effects CC. Today we will put our animated icons to good use, by adding them to a website. Sure, we can export an animated GIF and simply use that, but we will lose the sharpness and scalability of the vector file, both of which are quite important in today’s high-resolution-display world.

You can jump directly into one of these steps:

• Installing the Bodymovin plugin
• Exporting JSON files
• Inserting the animation into a website
• Using Lottie library to play the animation

Install the Bodymovin plugin

Since we are using After Effects CC to create our animations, we can use an extension called Bodymovin to export them in a format that can be used on a web page or in a mobile application. So before we continue, you can go to https://aescripts.com/bodymovin/ and download the plugin.

Please note that the extension is priced with “Name Your Own Price”, so you can download it for free or decide on how much to pay. You have to register on the AEscripts website and confirm your account, then add Bodymovin to your cart and check out.

Export JSON files

After you download and install the extension, open your animations in After Effects CC and go to Window > Extensions > Bodymovin. This will open the Bodymovin panel. Select the checkmarks in front of our animations and click on the destination to select where to export the file.

Finally, click “Render”. When the process is done, you should find a newly created JSON file at the specified location.

A step by step guide of the export process

Insert the playback animation

For this tutorial, let’s create a really simple web page and add some static SVG icons. To make things easier, let’s import Bootstrap and jQuery, but none of them are required for the actual icon animation.

Click the “HTML” tab to see the code

Use Lottie to play the animation

To play Bodymovin animations, we can use the fine Lottie library, developed by Airbnb. The documentation for Lottie offers detailed implementation guides for each supported platform (Web, iOS, Android). In our case, we need the JavaScript player on our HTML web page. Here are the steps:

• Copy the generated Bodymovin JSON files in the website directory.
• Add the Bodymovin JavaScript player in the head of our document: https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.1/lottie.js
• Add a script tag with the following content:

<script type="text/javascript">
    $(function() {
        $('.bodymovin').each(function() {
            var element = $(this);
            var animation = bodymovin.loadAnimation({
                container: element[0],
                renderer: 'svg',
                loop: true,
                autoplay: true,
                path: element.data('icon')
            });
        });
    });
</script>

What this code does is to find all HTML elements with the class bodymovin, read their data-icon attribute and use it as a path to the animation file and apply the Lottie magic on it.

And that is it! Your page should now have some fancy animated vector icons playing and looping nicely.

Click the “HTML” tab to see the code

All the code, SVG files and JSON animations used in this tutorial are available for download.

Make this winter move

If you have a website in need of some fancy holiday decoration, like we all do, head to Week Of Icons animated freebies and give the Bodymovin implementation a try. We are eager to see what you can do with them, so make sure to share!

In our next article (which will go live on December 14), Luke Roberts will dig into “How to make animations look realistic”. Stay tuned!

Week Of Icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. Introduced in 2017, the campaign focuses on inspiring designers and design-enthusiasts to learn more about iconography.

The icons used in this article are designed by Mangsaabguru and animated by Yup Nguyen. They are available for download as today’s Week Of Icons freebie.