Skip to main content
A Bodymovin layer plays an After Effects animation inside a visual. You export the animation from After Effects as a Lottie .json file with the Bodymovin extension, upload it to the Media Hub and pick it in the layer. Texts, images and colors in the file become fields you can fill with live data.

​
Install Bodymovin in After Effects

  1. Download the Bodymovin plugin from AEscripts - Bodymovin.
  2. Run the installer.
  3. Open the extension in After Effects at Window → Extensions → Bodymovin.
Go to After Effects → Preferences → Scripting and Expressions and turn on Allow Scripts to Write Files and Access Network. Bodymovin needs it to save the export.
Adobe Exchange does not have the latest version of Bodymovin. Use AEscripts for the latest features.

​
Export settings for a Bodymovin layer

Open Settings for the composition in Bodymovin before you render. These settings make one .json file that the Bodymovin layer plays with editable text: Leave the other settings off. With font bundling off, each font in the file needs a station font with exactly the same family name, see Use your custom font. The Bodymovin layer warns about parts of a file it can’t play:
  • Video layers in the file can’t be rendered. Convert the export with bodymovin_to_vra first.
  • The Add blend mode is not supported by browsers.
  • Unsupported effects are ignored.

​
Set the In and Out of a Bodymovin animation

Markers in the After Effects composition tell VRA which part plays when the visual goes on air and which part plays when it comes off air:
  • start - Where the In begins. Give the marker a duration to set where the In ends. Without a duration the In plays to stop, or to the end. Without the marker the In plays from the beginning.
  • stop - Where the Out starts. The Out needs this marker.
The markers intro or in work as start, and outro or out as stop. On the animations timeline, the Bodymovin layer shows one bar per trigger. Drag the bar to start the In or the Out later. The markers set its length, so the bar can’t be resized. Turn on Loop animation in the layer to repeat the animation while the visual is on air.

​
Fill a Bodymovin animation with live data

Select the layer to see the fields of the file: its texts, images, colors and switches. Type a text, or insert live data like the track on air. Colors can link to a brand color. For a live image, turn on Computed for an image asset and enter the image expression. Use Select Fallback image to choose an image from your media. The fallback shows when the expression has no image, like a song without an album cover.