Cavalry
  • Welcome
  • Getting Started
    • Requirements
    • Installation
    • Sign In
      • Proxy Server
    • Quick Start
    • Example Files
    • Key Concepts
      • Nodes
      • Connections
      • Context
  • User Interface
    • Menus
      • File menu
      • Edit menu
      • View menu
      • Composition menu
      • Create menu
      • Animation menu
      • Shape menu
      • Tool menu
        • Select tool
        • Edit Shape tool
        • Pen tool
        • Pencil tool
        • Line tool
        • Text tool
        • Rectangle tool
        • Ellipse tool
        • Polygon tool
        • Star tool
        • Arc tool
        • Super Ellipse tool
        • Cog tool
        • Arrow tool
        • Capsule tool
      • Window menu
        • Align Window
        • Animation Utilities
        • Assets Window
          • Google Sheets Asset
          • Image Sequences
          • Project Settings
        • Attribute Editor
          • Control Rows
            • Controls Rows - Types
            • Control Rows - Interaction
        • Color window
          • Palettes
        • Control Center
        • Quick Add window
        • Flow Graph
        • Glyph Browser
        • Playback Controls
        • Preferences
        • Render Manager
          • Lottie Export
          • Dynamic Rendering
          • Render Tokens
        • Scene Window
          • Scene Tree
            • Composition Settings
          • Time Editor
          • Graph Editor
          • Keyframe Layers
        • Shelf
        • Tags
        • Toolbar
        • Viewport
          • Rulers
      • Help menu
    • Widgets
      • Gradient
      • Graph Attribute
    • General
      • Aliasing
      • Blend Modes
      • Distribution Types
        • Array Distribution
        • Circle Distribution
        • Fibonacci Distribution
        • Grid Distribution
        • Linear Distribution
        • Mask Distribution
        • Math Distribution
        • Path Distribution
        • Point Distribution
        • Random Distribution
        • Rose Distribution
        • Shape Edges Distribution
        • Shape Points Distribution
        • Shuffle Distribution
        • Sub-Mesh Distribution
        • Voxelize Distribution
      • Color Management
      • Motion Blur
      • Vector artwork support
  • Nodes
    • Shapes
      • Common Attributes (Shapes)
      • Background Shape
      • Basic Line
        • Bézier
        • Line
        • Spiral
      • Basic Shape
        • Arc
        • Arrow
        • Capsule
        • Cogwheel
        • Ellipse
        • Polygon
        • Rectangle
        • Ring
        • Star
        • Super Ellipse
      • Cel Animation Shape
      • Composition
      • Connect Shape
      • Convex Hull
      • Custom Shape
      • Duplicator
      • Editable Shape
      • Footage Shape
      • Group
      • Image to Shapes
      • Layout Shape
        • Grid Layout
        • Horizontal Layout
        • Vertical Layout
      • Outline
      • Points to Curve
      • Quad Tree Shape
      • Rectangle Pattern
      • SVG
      • Spacer
      • Sub-Mesh Bounding Box
      • Text Shape
      • Trails
    • Behaviours
      • Common Attributes (Behaviours)
      • 3D Matrix
      • Add Divisions
      • Align
      • Alpha Material Override
      • Apply Distribution
      • Apply Layout
      • Behaviour Mixer
      • Bevel
      • Blend Shape
      • Blend Sub-Mesh Positions
      • Boolean
      • Clean Up
      • Color Blend
      • Color Material Override
      • Curve to Lines
      • Distance
      • Fill Rule
      • Flare
      • Flatten Shape Layers
      • Frame
      • Get Vector
      • HSV Material Overide
      • Is Within
      • Look At
      • Manipulator
      • Material Sampler
      • Modulate
      • Morph
      • Noise
      • Number Range
      • Number Range to Color
      • Oscillator
      • Path Offset
      • Pathfinder
      • Pinch
      • Position Blend
      • Push Along Vector
      • Random
      • Resample Path
      • Round
      • Rubber Hose Limb
      • Simple Value Solver
      • Simple Value2 Solver
      • Skew
      • Sound
      • Split Path
      • Spring
      • Squetch
      • Stagger
      • Sub-Mesh
      • Subdivide
      • Swap Color Override
      • Value
      • Value 2
      • Value Blend
      • Value2 Blend
      • Visibility Sequence
      • Voxelize
    • Utilities
      • Animation Control
      • Apply Font Size
      • Array Manipulator
      • Asset Array
      • Bounding Box
      • Bounding Box Constraint
      • Color Array
      • Color Info
      • Composition Constraint
      • Component Constraint
      • Context Index
      • Falloff
      • Get Name
      • HSV Color
      • If Else
      • Index to Color
      • JS Math
      • Length Context
      • Local Time
      • Math
      • Math2
      • Math 3
      • Measure
      • Mesh Array
      • Null
      • Path Length
      • Regex
      • Rig Control
      • Sequence
      • Shader Array
      • Spreadsheet
      • Spreadsheet Lookup
      • String
      • String Array
      • String Generator
        • Formatted String Generator
        • Hash Generator
        • Hexadecimal Generator
        • Random Date Generator
        • Random Number Generator
        • Timecode Generator
        • Value Generator
      • String Length
      • String Manipulator
        • Change String Case Manipulator
        • Join String Manipulator
        • Replace String Manipulator
        • Regex String Manipulator
        • Resize String Manipulator
        • Shuffle String Manipulator
        • Sub-String Manipulator
        • Transition String Maniplulator
      • Transform Constraint
      • Typeface
      • Typeface Array
      • Value Array
      • Value 2 Array
      • Value 2 Array
      • Velocity Context
      • Velocity Magnitude Context
    • Effects
      • Blur
      • Color Shader
      • Drop Shadow
      • Fill
      • Gradient Shader
      • Image Shader
      • Invert
      • Levels
      • Linear Wipe
      • Mask Blur
      • Noise Shader
      • Radial Wipe
      • SkSL Shader
      • Shape to Shader
      • Tri Tone
      • Venetian Blinds
  • Tips
    • Shortcuts
  • Applications
    • Cavalry Player
    • Cavalry CLI
  • Technical Information
    • Licencing
    • Logs
    • Mathematical Expressions
    • Release Notes
      • 1.1.1 Release Notes
      • 1.1 Release Notes
      • 1.0.3 Release Notes
      • 1.0.2 Release Notes
      • 1.0.1 Release Notes
    • User Preferences
Powered by GitBook
On this page
  • Intro
  • UI
  • Previewing
  • Troubleshooting

Was this helpful?

  1. User Interface
  2. Menus
  3. Window menu
  4. Render Manager

Lottie Export

Export lightweight, scalable .json files.

PreviousRender ManagerNextDynamic Rendering

Last updated 3 years ago

Was this helpful?

This feature is only available to users with a licence.

Intro

Lottie is an open source animation file format originally created by the team at . 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 community.

Cavalry offers native support for Lottie export via the or the . Further options can also be found on the in the .

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 so can be used alongside other native features like .

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

Previewing

We highly recommend using to preview animations. Simply navigate to 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.

Optimisation tips.

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

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.

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

on paths.

Animating any Primitive attribute (except for )

. e.g. Tooth Depth on .

and (when used with Path Animation).

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 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 UI.

The parent renders in front – you may find a or a better option.

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

Professional
Airbnb
LottieFiles
File menu
Render Manager
Advanced tab
Attribute Editor
Render Manager
Dynamic Rendering
Advanced tab
Attribute Editor
Preferences
LottieFiles
https://lottiefiles.com/preview
Star
Cogwheel
Rig Control
Animation Control
Attribute Editor
Attribute Editor
Discord
Group
Null
Noise Shader
SkSL Shader
Color Shader
Shape to Shader
Magic Easing