Articles on: The editor

Lottie animations

A Lottie animation element places a Lottie animation on your page from a .lottie or .json file. You can create Lottie files by exporting animations from After Effects or other animation tools.


Adding a Lottie animation


To add a Lottie animation to your page:


  1. In the editor, click Add in the left panel to open the Add elements panel.
  2. Select the Specials category.
  3. Drag Lottie animation onto the canvas.
  4. With the element selected, click the Settings button in the right panel.
  5. Click the field under Source to open your files, then upload or select your .lottie or .json file.
  6. Turn on Auto Start, Loop animation or Show controls as needed.


You can also drag a .lottie or .json file from your computer, or from My library in the Add elements panel, straight onto the canvas. This creates a Lottie animation element with that file already set as its source. To change how it plays, select the element and click the Settings button in the right panel.


Lottie animation settings


A Lottie animation element has four settings. To open them, select the element and click the Settings button in the right panel.


  • Source: the .lottie or .json file the element plays.
  • Auto Start: on the published page, the animation starts playing when it scrolls into view and pauses when it scrolls out of view.
  • Loop animation: the animation repeats instead of stopping after it has played once.
  • Show controls: visitors see playback controls on the animation, so they can play and pause it themselves.


With Auto Start off, a Lottie animation does not play by itself on the published page. Visitors can only start it with the playback controls (when Show controls is on) or with a link that uses the Control element action.



A link on another element, such as a button, can play, pause or restart a Lottie animation. The Lottie animation must be in the same scene as that element. To set this up:


  1. Select the element that visitors will click.
  2. In the right panel, open the Links tab.
  3. Under On click, choose Control element.
  4. Under Element, select the Lottie animation.
  5. Under Action, choose Play, Pause or (Re)Start.


Playing a Lottie animation on scroll


A Lottie animation can follow the visitor's scrolling with scrub on scroll: scrolling moves the animation forward and back through its frames. While scrub on scroll is on, the Auto Start, Loop animation and Show controls settings are greyed out, because scrolling controls playback. For how to set it up, see Scrub on scroll.


Choosing between .json and .lottie files


Use a .json file for Lottie animations when you can export one. A .lottie file is a package that contains the animation's JSON plus a manifest, which can hold its own playback settings, such as looping. A .json file contains only the animation, so the Auto Start and Loop animation settings in Maglr fully control how it plays.


More information about Lottie

Updated on: 20/10/2026