BodyMovin is an incredible extension for After Effects that will make your animations exportable in HTML5. It’s created by Hernan Torrisi, and he has been working on it since before the original Body Movin song was released!
BodyMovin is a plugin for After Effects that lets you export animations in HTML5, SVG or Canvas. The extension can be installed as just an exporter so it’s easy to find from within Adobe Add-ons and then found under Windows > Extensions on the main menu if needed!
After Effects plugin for exporting animations to svg/canvas/html + js
- 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)
Here’s a few tips for exporting animations with BodyMovin. If you have images or AI layers, they should be converted to shapes so that the exported files get saved as vectors in Ae. You can easily use this “Create Shapes From Vector Layers” command from within your desired program (such as Adobe After Effects).
One concern with realtime rendering is performance; for example, Hernan Torrisi says you should be thinking about playback. It can be hard when your Ae project has too many components that need to process immediately in order not have any impact on overall workflow.
Check out some of the examples on CodePen, they might just blow your mind! The code is so beautiful and creative. [VIA and thanks to Robert Paige]