Bodymovin Extension for AE Updated to v4.12.0

Bodymovin updated

If you’re exporting Adobe After Effects animations to the web and you’re creating GIFs in Photoshop with a frame animation, you’ll know what a total pain it is. There’s a better way! Bodymovin is a must have tool, plus, it’s FREE! Bodymovin v4.12.0 was created by Hernan Torrisi and is an extension for After Effects that lets you export your animations to the web as HTML5, SVG, or JSON (JavaScript Object Notation), or natively on Android and iOS through Lottie. It’s now available with new shape expressions.

Lottie is a new open-source animation tool by Airbnb of all companies! “Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.”

It supports Ourboros. Ourboros is an After Effects script developed by Sander van Dijk and Remco Janssen and allows users to create multiple strokes on one path in After Effects.

Download

There are a couple of ways that you can get Bodymovin.

  1. Adobe Add-ons – the fastest and easiest method of procuring Bodymovin
  2. GitHub

After you install it, you will find it in After Effects at Windows > Extensions > Bodymovin.

Tutorial

These tutorial is a year old so it doesn’t include the new features, but Matt Wilson will give you a nice introduction on what it does and how it works.

How to use BodyMovin to export animations for web To SVG, JSON, HTML

More tutorials

Since most of you are animators and not necessarily web programmers, here are some pages that may help you to learn the plug-ins.

Using After Effects plug-in ‘Bodymovin’ for Airbnb ‘Lottie’

A Guide to SVG Animations

HTML 5 Introduction from W3 Schools

JSON Introduction from W3 Schools

Some Inspiration

See some examples at Lottie Files

30 Awesome SVG Animations

Other ways to put Animation on the Web

Remember Flash? It has been rebranded as Adobe Animate CC and it allows you to create cartoons or other types of animation for the web and export as “HTML5 Canvas, Flash Player & Air, WebGL, or custom platforms such as Snap SVG”. Adobe Animate CC is part of Adobe Creative Cloud.

Animating a Logo: Adobe Animate & Adobe After Effects

The ULTIMATE Guide to ADOBE ANIMATE CC Tutorial