Vector animations using Adobe After Effects

A short guide on how to create an animation in After Effects, render it with Bodymovin and display it in H5mag using the After Effects area.
 

Bodymoving is a rendering plugin which converts the animations you create in After Effects to web compatible animations that can be displayed in H5mag.

• First download the Bodymovin plugin at aescripts.com. You may need to create an account first.
• To install the Bodymovin plugin, you also need to install ZXP Installer from the same website.
• Install and open the ZXP installer.  Drag the bodymovin.zxp file into the ZXP Installer and let it work its magic. 

After installing the plugin, Bodymovin can be found in After Effects in the menu: Window › Extensions › Bodymovin:

1. Create your vector illustrations, for example in Adobe Illustrator. These files can be converted to shapes in After Effects. You can do this by right clicking on the layer, and choosing Create › Create Shapes from Vector Layer:
   
2. Create your animation. Do not add any effects, masks, or expressions as these might not work in Bodymovin.
3. Check your work using a demo version via Bodymovin, and fix any issues that may occur:
   
4. If you're satisifed, upload the json file to the H5mag Editor by selecting Add Area → Advanced → After Effects:
   
   
   

Helpful hints

Remember not to use Photoshop files, scripts, or effects, and to ensure that all text is outlined.