ratatat

Demo	Installation	Usage	API	Examples

Vue component to easily turn any Lottie animation into a dynamic progress/loading bar:

Check out the demo site

Installation

npm i ratatat

Usage

Ratatat uses a Slider Expression Control's value to dictate the progress bar status. You'll need a Lottie file with a single Slider Control (on any layer) which controls the elements you want to animate, then at least supply the name of the layer and Slider, the Lottie file itself, and the current value to the component:

<!-- Inside a .vue file -->
<template>
  <Ratatat
    layer="MasterNull"
    slider="Slider Control 1"
    :animation-data="myAnimationFile"
    :percent="40"
  />
</template>

<script>
export default {
  components: {
    Ratatat: require("ratatat").default,
  },
  data: () => ({
    myAnimationFile: require("@/assets/someLottieFile.json"),
  })
}

Why would I use this?

Lottie is great and using the lottie_api is also great, but there's no easy way to tween from one numeric value to another. In the event you want a nice, custom progress indicator which has a smooth transition from step to step, all you need to do is use this component and change the :percent prop, which will trigger an eased animation from the previous to new value.

API

Props

Property	Type	Default	Required	Description
animation-data	Object	null	Yes	The parsed Lottie JSON file to use
percent	Number	0	Yes	The current value between 0 - 100
layer	String		Yes	Name of the AE layer to target
slider	String		Yes	Name of the slider within AE layer to target
duration	String	400		Any valid CSS timing (ms, s)
timing	String	in-quart		Functional Easing preset
speed	Number	1		Speed of Lottie playback
direction	Number	1		1 is forward, -1 is reverse
height	String	100%		Any valid CSS
width	String	100%		Any valid CSS

Events

Event	Value	Description
@update	Number	The reactive value of the slider within (includes easing)
@start		Fires on first frame of easing between values
@end		Fires on last frame of easing between values
@finish		Fires when percent reaches 100
@reset		Fires when loader is reset to 0 after 100 is reached
@mounted		Fires when component finished mounted lifecycle
@complete		Fires on Lottie's onComplete event
@DOMLoaded		Fires on Lottie's DOMLoaded event
@destroyed		Fires on Lottie's destroy and Vue destroyed lifecycle

Examples

A Lottie file where the master slider is within a layer named controller, and slider named test:

<template>
  <Ratatat
    layer="controller"
    slider="test"
    :animation-data="myAnimationFile"
    :percent="progressValue"
  />
</template>

<script>
export default {
  components: {
    Ratatat: require("ratatat").default,
  },
  data: () => ({
    progressValue: 0,
    myAnimationFile: require("@/assets/someLottieFile.json"),
  })
}

Easing occurs upon reassigning prop percent value:

// eases from 0 - 20
this.progressValue = 20;

// eases from 20 - 70
this.progressValue = 70;

---

The same Lottie file as above with custom easing, duration, and realtime annotation of eased percentage:

<template>
  <div class="display-wrapper">
  <Ratatat
    layer="controller"
    slider="test"
    :animation-data="myAnimationFile"
    :percent="progressValue"
    @update="(val) => (score = val)"
    :duration="600"
    timing="in-quint"
  />
  <!-- The below score variable is reassigned as ratatat changes it's slider value via @update -->
  <span>{{`Loading at ${score}%`}}</span>
  </div>
</template>

<script>
export default {
  components: {
    Ratatat: require("ratatat").default,
  },
  data: () => ({
    progressValue: 0,
    score: 0,
    myAnimationFile: require("@/assets/someLottieFile.json"),
  })
}