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 |
data-lg-lottie-renderer |
String | ‘svg’ | Change the lottie renderer.
The default value can be changed globally in JS |
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()