Learning Bodymovin

16th April 16

Back to Blog

Back

New tools and plugins are becoming vital to our day to day work as character animators. As Adobe lags behind the needs of the motion graphic community, plugins such as Rubberhose have started to take some of the slack on the technical side and allow us to put our focus where it counts - animating!

Dialogue around the tools we use every day is helping us to think about how tools might change for animators in the future. Sander Van Dijk has done an amazing job collecting ideas from animators about how After Effects could evolve for motion graphics.

Code First, animation second

Possibilities for animated experience on the web have opened up massively. Some people are doing amazing things with carefully crafted CSS animation and custom SVG animation, and popular frameworks like GSAP and Snap.svg are becoming established de-facto animation tools for the web.

But as animators our creative tools have yet to catch up with the possibilities that we now have in the browser and that can be a real barrier to creativity. The problem with these approaches is that they force us to break out of our usual workflow and can make web application of our work a painful laborious process of rebuilding animations step by step in code. Is it fun? Hell no! The focus should be on making animation on the web inventive, engaging and exciting.

Bodymovin'

One plugin that starts to connect all these dots is the amazing bodymovin by Hernan Torrisi. Bodymovin’ is a fantastic plugin for After Effects that allows animators to export directly from AE to javascript and begin to bring their animation skills to the browser.

Being able to display your animation work as a crisp vector at any size is such a huge advantage compared to wrangling gifs and weighty embedded videos. One experiment that we ended up incorporating into our new site is the headband - a set of animated character headers that sit at the top of our homepage:






Tests like this helped get our heads around the basics of bodymovin. Things get even better when you start to use code to push your animation further and get interactive! Using code you can change colours and line weight, turn layers on and off, changing direction and speed and give the user control to tweak what they are seeing. Separating animations into loops that can be triggered gives us the power to make really interesting interactive experiences much more easily.

Want to see what we mean? Scroll back up to the top and flick the power switch on the mixer to power him up!(Codepen here)

If you’ve not dipped your toe into web animation yet, now is definitely an exciting time to start. Bodymovin is just one of the tools that are opening up a new world of opportunity for animators and it seems like every week there’s new advancements in making animation in the browser easier and more accessible for everyone.

Posted by Martin