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