BodyMovin for After Effects

BodyMovin is not just a grooving song by the Beastie Boys, it is also an extension for After Effects that will allow you to easily export your AE animations to HTML5 Canvas. Its creator, Hernan Torrisi, has recently updated BodyMovin, which is something that he has been working on for quite some time.

After Effects plugin for exporting animations to svg/canvas/html + js

Already up to version 4.1.8, BodyMovin is an After Effects plugin that lets you export animations to HTML + JS, SVG, Canvas. What’s more is that the extension can be installed as just that. Using the new(ish) Adobe Add-ons site, you can install the HTML5 animation exporter, at the click of a button. From there, the extensions can be found by navigating to the Windows menu in After Effects, then Extensions, Bodymovin.

  • Open your AE project and select the bodymovin extension on Window > Extensions > bodymovin
  • A Panel will open with a Compositions tab.
  • On the Compositions tab, click Refresh to get a list of all you project Comps.
  • Select the composition you want to export
  • Select Destination Folder
  • Click Render
  • look for the exported json file (if you had images or AI layers on your animation, there will be an images folder with the exported files)

There are a few tips to exporting animations with BodyMovin. If you have images or AI layers, they should be converted to shapes, so they get exported as vectors. You can easily make use of the “Create shapes from Vector Layers” command from within Ae.

Theres also the concern of performance, as we should be thinking about playback of realtime rendering. Hernan Torrisi notes that although the output is optimized, it will always help if you keep your Ae project to the necessary components.

Check out some of the examples on CodePen, they might just blow your mind.

[VIA and thanks to Robert Paige]