Load a Lottie JSON animation, choose autoplay and loop behavior, tune speed and direction, and select the renderer that best fits the animation and delivery target.
Where: Select a Lottie element → right sidebar → Media
Key ideas
- JSON is the animation source: The Lottie element loads a JSON animation; the source must remain available to the published experience.
- Playback controls: Autoplay, loop, speed, and forward/reverse direction define the element’s default playback behavior.
- Renderer choice: SVG, Canvas, and HTML renderers have different visual, DOM, and performance characteristics; verify the chosen renderer with the actual asset.
Steps
- Insert a Lottie element, select it, and set the JSON source in the Media section.
- Choose autoplay and loop, then set playback speed and forward or reverse direction.
- Start with SVG for a typical vector animation, then test Canvas or HTML only when the asset or performance profile calls for it.
- Preview at all target breakpoints and test reduced-motion behavior.
- If an interaction controls playback, verify its trigger, target, replay, and reverse behavior instead of relying only on autoplay.
- Set the element’s size first, choose Fit/Fill/Stretch in the Lottie rail, then add alignment if needed and inspect both editor preview and delivered playback.
Fit the animation inside its own box
The Lottie section now distinguishes the element’s layout from the animation’s internal framing. Fit preserves the whole animation, Fill covers the box with possible cropping, and Stretch fills both axes. Alignment chooses among nine positions and matters for Fit/Fill, not Stretch.
- Default rows: Source, Fit, Autoplay, Loop, and Speed.
- Additional rows include alignment, direction, renderer, and the available playback settings.
- MCP/HTML attributes are data-f0-lottie-fit=contain|cover|fill and data-f0-lottie-align=top-left|top|top-right|left|center|right|bottom-left|bottom|bottom-right.
Tips
- Avoid essential copy inside the animation; keep accessible content as real page elements.
- Use a static fallback and respect reduced-motion preferences for decorative loops.
Limitations and important notes
- A moved, private, or unavailable remote JSON source breaks the animation.
- Complex Lottie files can be expensive on low-power devices regardless of renderer.
Troubleshooting
The Lottie is blank
Verify that the JSON URL is reachable, is valid Lottie data, and is not blocked by cross-origin or authentication requirements.
Playback is too fast or reversed
Check both speed and direction in the Media section, then inspect any media interaction that may also control playback.