1. Bodymovin Adobe Animate
2. Adobe Bodymovin
3. Adobe Bodymovin

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

1. Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.
2. In this tutorial I'll be showing you how to install and use the After Effects Extension Bodymovin. I've heard numerous animators say they don't quite underst.

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

Adobe Media Encoder. Go to Window — Extensions — Bodymovin to open the plugin. Select the current composition so that it shows a green circle. Bodymovin plugin settings.

Option 1 (Recommended):

Download it from from aescripts + aeplugins:http://aescripts.com/bodymovin/

Option 2:

Or get it from the adobe storehttps://creative.adobe.com/addons/products/12557CC 2014 and up.

Other installation options:

Option 3:

• download the ZIP from the repo.
• Extract content and get the .zxp file from '/build/extension'
• Use the ZXP installer from aescripts.com.

Option 4:

• Close After Effects
  

• Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
  WINDOWS:
  C:Program Files (x86)Common FilesAdobeCEPextensions or
C:<username>AppDataRoamingAdobeCEPextensions
  MAC:
  /Library/Application Support/Adobe/CEP/extensions/bodymovin
  (you can open the terminal and type:
  $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application Support/Adobe/CEP/extensions/bodymovin
  then type:
  $ ls /Library/Application Support/Adobe/CEP/extensions/bodymovin
  to make sure it was copied correctly type)
  

• Edit the registry key:
  WINDOWS:
  open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS.6 and add a key named PlayerDebugMode, of type String, and value 1.
  MAC:
  open the file ~/Library/Preferences/com.adobe.CSXS.6.plist and add a row with key PlayerDebugMode, of type String, and value 1.
  

Option 5:

Install the zxp manually following the instructions here:https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.htmlSkip directly to 'Install third-party extensions'

Option 6:

Install with Homebrew-adobe:

After installing

• Windows: Go to Edit > Preferences > Scripting & Expressions... > and check on 'Allow Scripts to Write Files and Access Network'
• Mac: Go to Adobe After Effects > Preferences > Scripting & Expressions... > and check on 'Allow Scripts to Write Files and Access Network'

Old Versions

• Windows: Go to Edit > Preferences > General > and check on 'Allow Scripts to Write Files and Access Network'
• Mac: Go to Adobe After Effects > Preferences > General > and check on 'Allow Scripts to Write Files and Access Network'

Or you can use the script file from here:https://cdnjs.com/libraries/bodymovinOr get it directly from the AE plugin clicking on Get Player

See a basic implementation here.

See examples on codepen.

How it works

Here's a video tutorial explaining how to export a basic animation and load it in an html page

After Effects

• Open your AE project and select the bodymovin extension on Window > Extensions > bodymovin
• A Panel will open with a Compositions tab listing all of your Project Compositions.
• Select the composition you want to export.
• Select a 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)

HTML

• get the lottie.js file from the build/player/ folder for the latest build
• include the .js file on your html (remember to gzip it for production)

You can call lottie.loadAnimation() to start an animation.It takes an object as a unique param with:

• animationData: an Object with the exported animation data.
• path: the relative path to the animation object. (animationData and path are mutually exclusive)
• loop: true / false / number
• autoplay: true / false it will start playing as soon as it is ready
• name: animation name for future reference
• renderer: 'svg' / 'canvas' / 'html' to set the renderer
• container: the dom element on which to render the animation

It returns the animation instance you can control with play, pause, setSpeed, etc.

Composition Settings:

Check this wiki page for an explanation for each setting.https://github.com/airbnb/lottie-web/wiki/Composition-Settings

Usage

Animation instances have these main methods:

play

stop

pause

setSpeed(speed)

• speed: 1 is normal speed.

goToAndStop(value, isFrame)

• value: numeric value.
• isFrame: defines if first argument is a time based value or a frame based (default false).

goToAndPlay(value, isFrame)

• value: numeric value.
• isFrame: defines if first argument is a time based value or a frame based (default false).

setDirection(direction)

• direction: 1 is forward, -1 is reverse.

playSegments(segments, forceFlag)

• segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
• forceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately.

setSubframe(useSubFrames)

• useSubFrames: If false, it will respect the original AE fps. If true, it will update on every requestAnimationFrame with intermediate values. Default is true.

destroy()

getDuration(inFrames)

• inFrames: If true, returns duration in frames, if false, in seconds.

Additional methods:

• updateTextDocumentData -- updates a text layer's dataMore Info

Lottie has several global methods that will affect all animations:

lottie.play() -- with 1 optional parameter name to target a specific animation
lottie.stop() -- with 1 optional parameter name to target a specific animation
lottie.goToAndStop(value, isFrame, name) -- Moves an animation with the specified name playback to the defined time. If name is omitted, moves all animation instances.
lottie.setSpeed() -- first argument speed (1 is normal speed) -- with 1 optional parameter name to target a specific animation
lottie.setDirection() -- first argument direction (1 is normal direction.) -- with 1 optional parameter name to target a specific animation
lottie.searchAnimations() -- looks for elements with class 'lottie' or 'bodymovin'
lottie.loadAnimation() -- Explained above. returns an animation instance to control individually.
lottie.destroy(name) -- Destroys an animation with the specified name. If name is omitted, destroys all animation instances. The DOM element will be emptied.
lottie.registerAnimation() -- you can register an element directly with registerAnimation. It must have the 'data-animation-path' attribute pointing at the data.json url
lottie.getRegisteredAnimations() -- returns all animations instances
lottie.setQuality() -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.
lottie.setLocationHref() -- Sets the relative location from where svg elements with ids are referenced. It's useful when you experience mask issues in Safari.
lottie.freeze() -- Freezes all playing animations or animations that will be loaded
lottie.unfreeze() -- Unfreezes all animations
lottie.inBrowser() -- true if the library is being run in a browser
lottie.resize() -- Resizes all animation instances

Events

• onComplete
• onLoopComplete
• onEnterFrame
• onSegmentStart

you can also use addEventListener with the following events:

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready (when initial config is done)
• data_ready (when all parts of the animation have been loaded)
• data_failed (when part of the animation can not be loaded)
• loaded_images (when all image loads have either succeeded or errored)
• DOMLoaded (when elements have been added to the DOM)
• destroy

Other loading options

• if you want to use an existing canvas to draw, you can pass an extra object: 'rendererSettings' with the following configuration:

Doing this you will have to handle the canvas clearing after each frame
Another way to load animations is adding specific attributes to a dom element.You have to include a div and set it's class to 'lottie'.If you do it before page load, it will automatically search for all tags with the class 'lottie'.Or you can call lottie.searchAnimations() after page load and it will search all elements with the class 'lottie'.

• Add the data.json to a folder relative to the html
• Create a div that will contain the animation.
• Required
  • A class called 'lottie'
  • A 'data-animation-path' attribute with relative path to the data.json
• Optional
  • A 'data-anim-loop' attribute
  • A 'data-name' attribute to specify a name to target play controls specifically

Example

Preview

You can preview or take an svg snapshot of the animation to use as poster. After you render your animation, you can take a snapshot of any frame in the animation and save it to your disk. I recommend to pass the svg through an svg optimizer like https://jakearchibald.github.io/svgomg/ and play around with their settings.

Recommendations

Files

If you have any images or AI layers that you haven't converted to shapes (I recommend that you convert them, so they get exported as vectors, right click each layer and do: 'Create shapes from Vector Layers'), they will be saved to an images folder relative to the destination json folder.Beware not to overwrite an existing folder on that same location.

Performance

This is real time rendering. Although it is pretty optimized, it always helps if you keep your AE project to what is necessary
More optimizations are on their way, but try not to use huge shapes in AE only to mask a small part of it.
Too many nodes will also affect performance.

Help

If you have any animations that don't work or want me to export them, don't hesitate to write.
I'm really interested in seeing what kind of problems the plugin has.
my email is hernantorrisi@gmail.com

Bodymovin Adobe Animate

AE Feature Support

• The script supports precomps, shapes, solids, images, null objects, texts
• It supports masks and inverted masks. Maybe other modes will come but it has a huge performance hit.
• It supports time remapping
• The script supports shapes, rectangles, ellipses and stars.
• Expressions. Check the wiki page for more info.
• Not supported: image sequences, videos and audio are not supported
• No negative layer stretching! No idea why, but stretching a layer messes with all the data.

Development

npm install or bower install firstnpm start

Notes

• If you want to modify the parser or the player, there are some gulp commands that can simplify the task
• look at the great animations exported on codepen See examples on codepen.
• gzipping the animation jsons and the player have a huge reduction on the filesize. I recommend doing it if you use it for a project.

Issues

• For missing mask in Safari browser, please call lottie.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. (see above for description of setLocationHref)

last updated June 13, 2017

I love animation. What I love most is how animation can perform the classic writing maxim of “show, don’t tell.” With its exaggerated physics, animation doesn’t just show you what’s happening, it shows you how what’s happening feels. I’d prepared a whole paragraph on haptic feedback, and how it shapes product design for 3-dimensional objects, and how animation’s ability to convey feeling could visually approximate that haptic feedback… but I got a little carried away. There are plenty more straightforward user experience reasons to include animation, and in the end, this is blog post is primarily about one means for incorporating a specific type of animation into your project.

This approach uses Adobe’s After Effects program to create the animation. For the purposes of this post, I’m going to assume that you have an After Effects composition that you’d like to use, but if not, there’s a world of tutorials out there to help you. Once you’ve got a nice composition going in After Effects, we’ll use Bodymovin (like the Beastie Boys song), to get it out of After Effects and into our site. Bodymovin has two components:

• an extension that you can integrate into After Effects, which exports your AE composition into a .json file containing all of the animation’s data, and
• a JavaScript library that you can integrate into your project, which loads the animation from the data and can be used to control when and how the animation is played.

Working with the Bodymovin Extension

To get the Bodymovin’ extension, download the zip file from the GitHub repository. There is a script for installing the .zxp file here. Just close After Effects, open the installer, and drag the Bodymovin file on to its view so it can handle the installation.

To confirm that the extension was installed, open After Effects and go to the Window menu, there will be an item called Extensions which should now include Bodymovin.

Clicking on this will open a new window with the Bodymovin’ interface, which will show a list of your open compositions. If you don’t have any compositions open, go ahead and open one, then refresh.

Select the settings gear icon next to the composition you’d like to export. As you can see below, there are a number of configuration options that will shape the type of output you’ll get. As most of my animations have been small and relatively simple – I haven’t yet had cause to select most of these these options, but let’s take a look:

The first six settings relate to how the different parts of your composition are compiled for export, namely:

• reducing large animations into smaller pieces, so that they can be loaded in parts,
• handling text-based animations as outlines,
• managing particular types of layers (Hidden, Guides), and
• managing objects external to the current composition (like links to other external compositions, or imported assets like sound or images).

The last two settings relate to the type of output you get:

• Standalone will export a JavaScript file, which bundles the animation’s .json and the player together.
• Demo will export the animation’s data.json and a demo.html file. This is a really nice option if you just want to see what the output will look like.
• Selecting nothing will just generate a .json file of the animation data which is what we’ll be using for the following steps.

Finally, we’re going to set our destination path.

If you’re using the Demo mode to preview your animation, you can set the path to whatever convenient workspace folder you prefer. If you’re placing your animation within the context of an application, you could start by setting the path to the root of your project, though it’s probably nicer to eventually direct it to the directory where you keep images and other assets for your project. You can also change the file name at this point to something more descriptive, for this example, I’ll change the default data.json to hero.json.

Working with the Library

This example project uses a barebones Create React App template, but you certainly don’t need to use React to use this library. Once your project is set up, just run npm install --save bodymovin or yarn add bodymovin to add the library to your project. Within the view or component in which you want to load your animation, import the Bodymovin library and the hero.json file. For simplicity’s sake, this example adds an animation to the main App file, but these animations can be added to individual views or UI elements in a more granular way. So far, our App.js looks like this:

https://gist.github.com/prettyhandsome/1742bc61ff53c7e8afff03ff163a5848

One thing to point out for people using this in React, this view has a animationDiv element to which a ref has been added, we’ll need that ref in a moment, when we load our animation.
With the pieces in place, we can load our animation. We’re going to call the bodymovin.loadAnimation() function, which takes an object with the following properties:

Adobe Bodymovin

https://gist.github.com/prettyhandsome/24874f617b0756af36e0f4510eb79eb6

Adobe Bodymovin

You can call loadAnimation() pretty much anywhere in a regular .js file, but since the example app uses React, it makes sense to load the animation during the componentDidMount() lifecycle hook. There are a couple of snags with doing so, however: our animationDiv might not be available to us yet, and the component mounts every time the page refreshes (which can be quite a lot). So, I like to pull the loading logic out into its own method, where it can check to see if the animationDiv is present, and won’t reload the animation if its already there. At this point things are looking like this:

https://gist.github.com/prettyhandsome/caa7386dcda76fde28cf5d2a07a12082

There should now be an infinitely-looped, autoplaying animation on the page. Now that we know that the animation is loading, you can really have some fun. There are so many aspects of the animation’s behavior that you can control: the visible frame of the animation, the frame at which the animation stops or starts, the speed at which it plays, and whether it plays forward or backwards. You can also tie the animation’s behavior to events, and use the animation’s own event callbacks. The Bodymovin repo has a full list of the methods and event callbacks for the library and the animations here. This can be pretty powerful in combination – think of an element like a button: rather than setting autoplay to true, you can call the goToAndStop() function to point the animation at a frame that looks like a disabled state, you could then select a different range of frames to play when the button is clicked, and use a bodymovin callback to redirect or refresh once the click animation is complete. I’d also recommend visiting the codepen animations referenced on the repo, it’s a really good opportunity to play with the possibilities (and to get some inspiration about the types of compositions you can make with After Effects).

Tandem is innovation firm in Chicago and San Francisco with practice areas in custom software development, mobile and web application development.