Lottie Export

Pro Feature

Pro features are only available with a Professional licence. To upgrade, visit cavalry.scenegroup.co.

Evaluate Lottie

When a Starter licence is in use, the File > Export Lottie menu item will appear as Export Lottie... (Demo Mode). This allows for the first selected Layer to be exported to Lottie.

Intro

Lottie is an open source animation file format originally created by the team at Airbnb. Because Lottie is vector based files can be very lightweight, scalable and rendered natively on mobile and the web.

Cavalry offers native support for Lottie export via the File menu or the Render Manager. Further options can also be found on the Advanced tab in the 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 so can be used alongside other native features like Dynamic Rendering.

Further options to refine how Shapes are exported to Lottie can be found in the Advanced tab of a Shape's 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 window.

Previewing

Various platforms including LottieFiles can be used 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 will 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 on paths.
• Animating any Primitive attribute (except for Star) . e.g. Tooth Depth on Cogwheel.
• Rig Control and Animation Control (when used with Path Animation).
• Duplicator.

Optimisation Tips

• If the exported file size is large but the 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 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 UI.

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 or Null a better option.
Masks		When using masks with animation use Path Animation to animate the shape or the mask (or both). Masking a Group (or Parent) is not supported.
Pre-Comps	Background	Ensure a Pre-Comp's Background Alpha is set to 0.

Working with Images

It's possible to export image assets to Lottie. LottieFiles support previewing a zipped file containing the .json and an images folder containing any image assets.

1. Import an image.
2. Drag the image into the Viewport to create a Footage Shape and an Image Shader and connect the image.
3. Export to Lottie. This will output a .json file and an images folder containing the image.
4. Zip both the .json file and images folder.
5. Uploaded the .zip to LottieFiles.

warning

Support does not yet extend to Image Sequences and it's not possible to directly embed an image into the .json file — only to reference the image asset in the images directory.

Unsupported Features

The following Cavalry features are not supported via Lottie export:

Feature	Notes
All Filters	Blurs, Levels, TriTone etc.
Noise Shader
SkSL Shader
Color Shader
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
Text	Text will export as Shapes and not editable Text
Animation curves set to loop
Track Mattes	Use a Clipping Mask instead

tip

If you have a Lottie file that's not working as you'd expect having followed the guidelines then get in touch on Discord.