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.
Want to know more about animation?
The Importance of Motion Graphics in Web Design
Through the course of this article, we’ll take you through why motion graphics have become a staple in web design, and why it is integral to crafting an engaging user experience!Since animated movies came to the fore in the dawn of the 20th century, the technology that drives animation, visual effects and motion graphics has […]
Speed Lines with Shape Layers in After Effects Tutorial
In this short After Effects tutorial I’ll show you how to easily create tapered speed lines using shape layers without any plugins. This is a pretty popular effect that you can use to convey feeling of superluminal speed, imitating portals and space things or just to add more dynamics to your scene transitions.How to make […]
Auto-orient in After Effects
In this quick tip, we will show you how to deal with an auto-orient option in the transform settings in After Effects.Guide to Auto-orient in After EffectsAuto-orient is a powerful feature in Adobe After Effects that allows you to automate the orientation of layers based on various parameters. Whether you’re creating motion graphics, visual effects, […]
