> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Bodymovin / Lottie Animation Layer

> Bodymovin is the extension for After Effects we will use to Export our animation as Lottiefile in .json format.

<img src="https://mintcdn.com/visualradioassist/1LQdAqmw3LInyH_s/images/visual-designer/bodymovin-lottie-animation-layer/1.png?fit=max&auto=format&n=1LQdAqmw3LInyH_s&q=85&s=32ca6399ef5394d5617cdea698a96448" alt="" width="3126" height="2118" data-path="images/visual-designer/bodymovin-lottie-animation-layer/1.png" />

## Installing Bodymovin - the After Effects Extension

Bodymovin is the extension for After Effects we will use to Export our animation as Lottiefile in `.json` format

1. Go to [AEscripts - Bodymovin](https://aescripts.com/bodymovin/) and download Bodymovin Plugin.

<Tip>
  Currently you can not get the latest version of Bodymovin in the Adobe Exchange. Therefor we recommend AEScripts for to use the latest features of Bodymovin
</Tip>

2. Execute the installer.
3. You find the extension in `"Window" -> "Extensions" -> Bodymovin`

### Scripts permissions

Check under `"AfterEffects" -> "Preferences" -> "Scripting and Expressions"` - Application Scripting: Make sure to check the box to "Allow Scripts to Write Files and Access Network"

## Example After Effects Project file

This example project contains two Compositions;

**Lower Third**

* In / out markers for transition steps synced with the Visual Player
* Autoscaling textbox with max width text masking
* Background Image with toggle
* Box color

**Loop example**

* Loop markers for syncing loop section with Visual Player

## Bodymovin export settings for VRA Layers

<img src="https://mintcdn.com/visualradioassist/1LQdAqmw3LInyH_s/images/visual-designer/bodymovin-lottie-animation-layer/2.png?fit=max&auto=format&n=1LQdAqmw3LInyH_s&q=85&s=9911e3a1724e1f1b515a5021df995192" alt="" width="1644" height="1590" data-path="images/visual-designer/bodymovin-lottie-animation-layer/2.png" />

### Fonts bundling

When you leave fonts bundling off; make sure to set the font name mapping to fonts available in the Visuals via [Use your custom font](/getting-started/use-your-custom-font)