Renderer Settings

Renderer Settings are some specific settings you can pass the the renderer instance.

preserveAspectRatio

for svg and canvas renderer it simulates the behavior of the preserveAspectRatio property on svgs. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

var animation = lottie.loadAnimation({
  ...
  rendererSettings: {
  	preserveAspectRatio: 'xMidYMid meet'
  }
})

progressiveLoad

if set to true, the svg renderer will add rendering elements to the svg markup progressively instead of all at the beginning.
Useful if you have a very long animation and the initial loading is slow.

context

for the canvas renderer, if you want to pass a shared canvas context.

clearCanvas

if set to false, canvas will not be erased between frames. Useful when the canvas context is shared with the rest of the application

className

will add a class to the root element of the animation.
Useful for styling via CSS or referencing via Javascript.

id

will add an id to the root element of the animation.
Useful for styling via CSS or referencing via Javascript.

hideOnTransparent

if true will set display to hidden when element has opacity set to 0. Default is true.

runExpressions

If false, expressions are completely disabled.

viewBoxOnly (svg renderer)

if true will not add width, height and transform properties to root element

viewBoxSize (svg renderer)

if passed it will override the viewBox set by default on the animation

imagePreserveAspectRatio

supports all presetAspectRatio values from image elements. Defaults to xMidYMid slice

focusable (svg renderer)

sets the focusable attribute to svg elements

filterSize (svg renderer)

In order to render drop shadows, the filter size needs to be set to increase the render surface of the element. You can set the x, y, width and height of filters manually.

var animation = lottie.loadAnimation({
  ...
  rendererSettings: {
    filterSize: {
      width: '200%',
      height: '200%',
      x: '-50%',
      y: '-50%',
    }
  }
})