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.

Please note that lottie is not bundled with luge, you have to make sure to load lottie in your code and make the lottie property globally accessible before luge initialization.

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()