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

stop()

Stop the animation manually.

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

myElement.stop()