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. By default you have to make sure lottie is available before luge initialization.

If you want to defer the load of lottie code for optimization purposes, you can call luge.lottie.deferInit() once lottie has been loaded.

luge.lifecycle.add('siteIn', (done) => {
  import(/* webpackChunkName: "lottie" */ 'lottie-web/build/player/lottie_light').then(module => {
    const lottie = module.default
    window.lottie = lottie
    luge.lottie.deferInit()
  })

  done()
})

Lazy loading

To start loading a lottie animation only when it enters the viewport, you can add the data-lg-lottie-lazy attribute on your element.

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-lazy	Boolean	false	Lazy load the lottie json file only when the element 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()