Part One: HOW BODYMOVIN CHANGED OUR APPROACH
With Bodymovin’, our design team felt empowered. Suddenly, their designs weren’t being recreated. The animations were being exported exactly as they were designed. The artist was using their usual tools, in a similar process that they’re used to. Revisions could take place much more quickly, which allowed for more extensive iteration while involving fewer people.
With the export taking place directly out of After Effects, our animators and art directors could achieve their vision with less compromise due to technical limitations. Animation tools like the speed and value graph, some blending modes, and full position, scale, rotation and opacity controls are fully supported by Bodymovin’. While it sounds like a limiting list, the possibilities are extensive. Don’t just take my word for it; check out Bodymovin’ developer Hernan Torrisi’s Codepen page for some great inspiration.
Over a few years, we’ve refined our process. It starts with a designer creating static renditions of the ads. This may act as a simple reference or be treated as styleframes/storyboards. With that content locked in, the art is then prepped for import into after effects, either as shape layers or through compressed image files (this process took much trial and error and is covered extensively in part two). At this point, animation begins. Review the supported feature documentation for an idea of what is possible. Of course, extension is in active development, and this list changes relatively frequently.
With animation complete, the export begins. Open the Bodymovin extension in After Effects, select your comp, alter your settings, and export. In the setting department, for display ads we always export with a Demo file, which kicks out a self-contained HTML file with the player and the JSON animation wrapped together. There is a little work we then do to the HTML file, but that’s covered in part three.
In summary:
- Maintain creative control and keep things very art-directable
- Spend fewer cycles building, spend more time on iterating creative ideas
- Create smoother animation, utilizing full AE speed/value graphs and keyframes
- Use a familiar, artist-friendly tool