Exporting After Effects Animation to HTML

Denys Bondartsov

Motion Designer & Tutor

A website or an app without animation is perceived as plain, it lacks this interactive feel that changes user experience completely. If you want to make sure your ideas are communicated to your audience simply and effectively you just can’t do without animation.

So, how to export your animation to HTML?

That should be something for developers to think about, right? Actually, not. As a designer or an animator you are responsible for your ideas to be incorporated into the final product the way you’ve created them. Maybe “responsible” is a bit strong a word, but you would want the result to look great anyway. But is there a quick and easy way to export your animation masterpieces for web and mobile apps without having to manually re-make them?

There are libraries that render After Effects animations natively on the respective platforms. The most commonly used ones are Keyframes, Squall and Lottie. There are certain differences in the way they work, so we decided to focus on Lottie. The best solution for working with this library is the Bodymovin plugin. It’s the most universal solution that works in most cases you probably are going to face.

Why Bodymovin?

Keyframes don’t work with all the features you might to need, as it is mostly focused on reactions. Squall, in its turn, only supports iOS, so it won’t be suitable in the cases that require cross-platform solutions. What is attractive about Bodymovin is that it is versatile and flexible, supporting a pretty wide range of After Effects features and working with multiple platforms. Animations are exported by default as .json files that use the lottie.js player that comes along with the plugin. You can render animations in the browser on svg, canvas and html. It supports a subset of After Effects features.

Is Bodymovin a perfect solution?

To ensure your animation works properly in Bodymovin you need to take into account a few things. The usual workflow you have for After Effects won’t do, so consider the following specifics:

• Bodymovin doesn’t support using compositions. To be more exact, it does, but the process is a bit too complicated. Isn’t worth the effort from our experience. If you don’t feel like changing the whole project afterwards sort it out straight away.
• Work with expressions is also different from what you are used to. In 2019 Bodymovin started supporting expressions, however, not all of them will work correctly.
• Not all platforms are equal when it comes to Lottie. Make sure to check the list of features supported by different platforms, you can find it here: https://airbnb.io/lottie/#/supported-features
• When choosing effects for your animation, choose smart. It means check beforehand if the effect you want to add will actually work in Lottie.

If there are so many things to bear in mind why use it at all?

Space, friends, the amount of space it saves is totally incredible, JSON files are tiny compared to PNG, so you app or website will be totally flying.

Though it does have some limitations, if you are not considering building your animations by hand or cluttering your apps and sites with enormously huge PNG sequences, just take it as it is and enjoy the benefits it brings. The best thing is: it does get updated regularly, so, hopefully, one day all the issues we have described will be the things of the past.