Living in a modern digital world means our online lives are becoming more than just viewing static images and words. We crave immersive, well-executed designs and considered user journeys. Being able to interact with elements on a page and watch a website come to life adds to the overall experience.
Keeping up-to-date with the latest technologies is something we naturally account for in our business and I’m going to cover a fun one that’s been growing for the past couple years in the form of Bodymovin, the After Effects plugin for exporting super-slick animations for the web.
Back to the 90s.
Implementing movement within website designs has been around for a while and brings back memories from the 90s when animated gifs and flash websites were the norm. Some of these are still live today for our enjoyment such as the Space Jam website www.spacejam.com/archive/spacejam/movie/jam.htm. While nowadays there are some instances where gifs are still useful, and as fun as they are – primarily as a witty reply for Whatsapp and Slack messages, they have limitations and, depending on usage, can look less desirable than intended.
Plug in and move out.
Enter the modern age and Bodymovin – a clever plugin that renders exported After Effects files into .json files ready to be used on the web. These files are animated svgs, giving you smooth crisp animations that don’t lose any quality when re-scaled, are responsive, and also have a small file size. This is great if you want to create impact on a page without creating slow load times, which can negatively impact your Google ranking. They can be rendered in all modern browsers and play natively on iOS and Android, giving you the full Bodymovin experience on all devices. The ability to export straight out of After Effects opens the door to elaborate and mesmerising animations.
How we moved Eat Natural.
We have put Bodymovin creations to use on a number of our clients’ websites – the most recent being Eat Natural. Our Art Director Patrick created bespoke illustrations for the main website and their Pollination initiative. This included the delicious bars themselves, buzzing bees, a bee hive, ingredients and a world map.
Once finalised, the illustrations were set up into layers within Illustrator ready to be exported and opened in After Effects. Doing the groundwork before heading into animation helps streamline the process and makes sure your files are in order, the correct size and in need of minimal tweaks. The base illustrations can always be changed in Illustrator, even when the animation is complete as the files are linked – changing a colour or shape is then easily done without having to start over.
Exporting the animations using the Bodymovin plugin is a simple as hitting the render button (after you have selected where you want the file(s) to be saved!). You can also customise the output, choosing to also see a demo .html file which can be dragged into a browser to check everything is working. There are a few limitations as to what effects can be exported, but as long as you want crisp animated vector graphics without things such as motion blur, then you are on to a winner.
We hope you’ve enjoyed this article. If you’d like to discuss how After Effects and Bodymovin could work for your website, email email@example.com or give us a call on 01603 622766 – we’d love to hear from you!