back

Lottie player

A lottie animation player with auto play and loop capabilities.

Usage

<div
  data-lg-lottie="/path/to/my-lottie.json" 
  data-lg-lottie-autoplay
  data-lg-lottie-loop
  data-lg-lottie-loop-frame="50"
  data-lg-lottie-reverse>

The lottie player elements get a .lg-lottie CSS classes when initiated. They also get .is-loaded, .is-playing, .is-playing-forward, .is-playing-backward, .is-paused CSS classes when loaded/played/paused.

Attributes

Attribute Type Default Description
data-lg-lottie String null Path to lottie json file.
data-lg-lottie-autoplay Boolean false Autoplay animation after load or when it gets in the viewport.
data-lg-lottie-loop Boolean false Makes animation loop.
data-lg-lottie-loop-frame Number 0 If you want the animation to loop from a given frame. Useful when the lottie animation contains both intro and loop animations.
data-lg-lottie-subframe Boolean true Let lottie uses subframes.

The default value can be changed globally in JS luge.settings({lottie: {subFrame: true}}).

data-lg-lottie-renderer String ‘svg’ Change the lottie renderer.

The default value can be changed globally in JS luge.settings({lottie: {renderer: 'svg'}}).

data-lg-lottie-reverse Boolean false When used with the loop attribute, makes the animation play in reverse from end instead of jumping to start.
data-lg-lottie-scroll Boolean false When set, the animation will be played on scroll based on the element progress inside the viewport.

Methods

play()

Play the animation manually.

const myElement = document.querySelector('.lg-lottie')

myElement.play()

pause()

Pause the animation manually.

const myElement = document.querySelector('.lg-lottie')

myElement.pause()