Skip to content

loadAnimation options

hernan edited this page Mar 11, 2023 · 5 revisions

container (mandatory)

The HTMLelement that will contain the animation. Make sure the element exists on the page when calling loadAnimation.

renderer (default is svg)

Select which renderer to use for the animation. svg has the most features, but html can be more performant and supports 3d layers.
values:

loop (default is true)

  • set it to true for infinite amount of loops, or pass a number for a specific amount of loops.

autoplay (default is true)

  • if set to true, animation will play as soon as it's loaded

path or animationData(mandatory at least one)

  • you can pass a path to an external json file or pass a json object via animationData

assetsPath

  • you can specify a different root path for external assets path instead of the images folder

rendererSettings

refer here

name

  • you can pass a name to the animation instance to refer to it later through lottie commands.
    This feature is not useful if you already have stored a direct reference to the animation instance returned by loadAnimation.

initialSegment

  • expects an array of length 2. First value is the initial frame, second value is the final frame. If this is set, the animation will start at this position in time instead of the exported value from AE.

progressiveLoad

  • if set to true, elements will get added instantiated and added to the DOM only when the play cursor reaches that frame. It might not work correctly if track matte masks are not layer aligned with the masked elements.

title (only for the svg renderer)

  • a string that will be used by the renderer to create a "title" element and label it for assistive technologies.

description (only for the svg renderer)

  • a string that will be used by the renderer to create a "description" element and label it for assistive technologies.