# Lottie Export

{% hint style="info" %}
This feature is only available to users with a [**Professional**](https://scenegroup.gitbook.io/cavalry/tech-info/licencing) licence.
{% endhint %}

### Intro

Lottie is an open source animation file format originally created by the team at [Airbnb](https://airbnb.io/lottie/#/). Because Lottie is vector based, files can be very lightweight, scalable and rendered natively on mobile and the web. The format is gaining in popularity and is now the centre of a thriving [LottieFiles](https://lottiefiles.com/) community.

Cavalry offers native support for Lottie export via the [File menu](https://scenegroup.gitbook.io/cavalry/user-interface/menus/file-menu) or the [Render Manager](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/render-manager). Further options can also be found on the [Advanced tab](https://scenegroup.gitbook.io/cavalry/nodes/shapes/common-attributes) in the [Attribute Editor](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/attribute-editor).

### UI

Exporting to Lottie is very straight forward. Simply use the `File > Export Lottie...` menu item. It's also possible to export to Lottie via the [Render Manager](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/render-manager) so can be used alongside other native features like [Dynamic Rendering](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/render-manager/dynamic-rendering).

Further options to refine how Shapes are exported to Lottie can be found in the [Advanced tab](https://scenegroup.gitbook.io/cavalry/nodes/shapes/common-attributes) of a Shape's [Attribute Editor](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/attribute-editor) UI.

When exporting files, Cavalry allows you to add information on the author in the exported file. This can be added via the **Lottie Author** option in the [Preferences](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/preferences) window.

### Previewing

We highly recommend using [LottieFiles](https://lottiefiles.com/) to preview animations. Simply navigate to <https://lottiefiles.com/preview> and drag the exported `.json` Lottie file into the browser window. From here you can also share links your animations.

### Troubleshooting

#### Optimising

While the Lottie format is expanding it is not as full featured as Cavalry so there are some limitations as to what can be exported. However, where feature parity is lacking, Cavalry will attempt to intelligently bake the shape animation so a wide range of possibilities are available.

Generally speaking, Lottie files are very small but the less baking required, the smaller the exported file will be. If file size is very important to you then the list below comprises the features that will not require any baking whatsoever (assuming there are no Deformers connected to the Shape) and therefore result in the smallest files:

* **Position**
* **Rotation**
* **Fill > Alpha**
* **Stroke > Alpha**
* **Stroke > Width**
* **Stroke > Trim Start**
* **Stroke > Trim End**
* **Stroke > Trim Travel**
* **Path Animation**
* **Star > Point Count**
* **Star > Radius**
* **Star > Inner Radius**

The following features are all supported but are known to create relatively large files when exporting to Lottie:

* **Deformers**.
* [Magic Easing](https://scenegroup.gitbook.io/cavalry/user-interface/menus/scene-window/time-editor#magic-easing-beta) on paths.
* Animating any Primitive attribute (except for [Star](https://scenegroup.gitbook.io/cavalry/nodes/shapes/basic-shape/star))

  . e.g. **Tooth Depth** on [Cogwheel](https://scenegroup.gitbook.io/cavalry/nodes/shapes/basic-shape/cogwheel).
* [Rig Control](https://scenegroup.gitbook.io/cavalry/nodes/utilities/rig-control) and [Animation Control](https://scenegroup.gitbook.io/cavalry/nodes/utilities/animation-control) (when used with Path Animation).

{% hint style="info" %}
**Optimisation tips.**

* If your exported file size is large but your scene doesn't have any animation in it you may want to change **Lottie Baking** setting from **Automatic** to **Still** in the **Advanced** tab of the Shape's [Attribute Editor](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/attribute-editor) UI.
* If your Lottie export is missing some animation you were expecting to see, try one of the **Animated** or **Nuclear** Lottie Baking options in the **Advanced** tab of the Shape's [Attribute Editor](https://scenegroup.gitbook.io/cavalry/user-interface/menus/window-menu/attribute-editor) UI.
  {% endhint %}

#### Tips

| Feature   | Attribute | Notes                                                                                                                                                                                                 |
| --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Fill      | Alpha     | This is the **Alpha** attribute and not the **Fill Color**'s alpha.                                                                                                                                   |
| Stroke    | Alpha     | This is the **Alpha** attribute and not the **Stroke Color**'s alpha.                                                                                                                                 |
| Stroke    | Trim End  | The LottieFiles player doesn’t handle the case where **Trim Start** > **Trim End**.                                                                                                                   |
| Parenting |           | The parent renders in front – you may find a [Group](https://scenegroup.gitbook.io/cavalry/nodes/shapes/group) or [Null](https://scenegroup.gitbook.io/cavalry/nodes/utilities/null) a better option. |
| Masks     |           | When using masks with animation use **Path Animation** to animate the shape or the mask (or both).                                                                                                    |

#### Unsupported Features

The following Cavalry features are **not supported** via Lottie export:

| Feature                                                                                | Notes                                     |
| -------------------------------------------------------------------------------------- | ----------------------------------------- |
| All **Filters**                                                                        | Blurs, Levels, TriTone etc.               |
| [Noise Shader](https://scenegroup.gitbook.io/cavalry/nodes/effects/noise-shader)       |                                           |
| [SkSL Shader](https://scenegroup.gitbook.io/cavalry/nodes/effects/sksl-shader)         |                                           |
| [Color Shader](https://scenegroup.gitbook.io/cavalry/nodes/effects/color-shader)       |                                           |
| [Shape to Shader](https://scenegroup.gitbook.io/cavalry/nodes/effects/shape-to-shader) |                                           |
| **Sweep** or **Conical** Gradients                                                     | The Lottie format does not support these. |
| Fill/Stroke > Color > **Alpha**                                                        | Use **Fill/Stroke Alpha** instead.        |
| Stroke > **Dash Pattern**                                                              |                                           |
| Transform > **Skew**                                                                   |                                           |
| Shape Opacity                                                                          | Use **Fill/Stroke Alpha** instead.        |
| Linear Gradient > **Gradient Scales with Rotation**                                    |                                           |

{% hint style="info" %}
If you have a Lottie file that's not working as you'd expect having followed the guidelines then get in touch on [Discord](https://discord.gg/avzgNKk).
{% endhint %}
