ratatat v1.0.5

ratatat

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

Events

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"),
  })
}