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