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  you need to download the Bodymovin plugin
Create an account at aerscript to download the plugin. 

To install the Bodymovin plugin, you need another program called: ZXP Installer
You can find the ZXP Installer here: https://aescripts.com/learn/zxp-installer

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. First, create your vector illustrations. For example with Adobe Illustrator. These files can be put in AE and made to a shape. 

You can do this by right clicking on the layer, and go to “ create —> create shapes from vector layer “

It should be like this: 

2. After the files are created, can you make a Demo version of your animation.

3. If the demo is ready, can it be expanded to a longer time. 

This is helpful for more variation in the animation later on.

4. After the file is expanded, can you make the base of the animation.

5. If the base is ready, and made so it can loop perfectly, can the rest of the files be insert.

- Don’t put effects / masks or some expressions over the files. This will cause bugs.

- You can still make this effects, but it has to be done manually. Trough the position and rotation tab.

6. If everything is done you can check it with a demo versionvia Bodymovin.

This can be selected in the settings.

Like this:

7. Problems that can occur, are almost every time easy to fix.

- Image is cropped; make the image, to 1 image. If this isn’t already the case.

- Image is glitching; there is an effect, or expression on the file. Remove this, if you really need the effect, make it manually with “ position and rotation “ 

- Image is not transparant; try to make it manually, just under the rest with “ opacity “ 

8. After all these steps you can go to H5mag editor.

9. There, select the plus --> advanced --> after effects.

like in this picture:

10. Add the json file there.

11. Done!

Helpful hints

  • Don’t put Photoshop files in After effects
  • Masks don't seem to work (vectors that you copy from Illustrator)
  • Make sure that you outline all text
  • Don't use scripts or effects

 

 

Last modified: