Lottie Animation Player for Vue | demo

Why Lottie?

Flexible After Effects features

We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.

Manipulate your animation any way you like

You can go forward, backward, and most importantly you can program your animation to respond to any interaction.

Small file sizes

Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.

Learn more › http://airbnb.design/lottie/

Looking for lottie files › https://www.lottiefiles.com/

Installation

Install vue-lottie-player

npm install --save vue-lottie-player

Or

yarn add vue-lottie-player

Initialization

Include in it either globally (in main.js) or a Vue component.\

Global:

// main.js
import Vue from "vue";

import VueLottiePlayer from "vue-lottie-player";
Vue.use(VueLottiePlayer);

Component:

import VueLottiePlayer from "vue-lottie-player";
export default {
  components: {
    vLottiePlayer: VueLottiePlayer
  }
//...

Usage

<script>
import VueLottiePlayer from "vue-lottie-player";
export default {
  name: "MyComponent",
  components: {
    vLottiePlayer: VueLottiePlayer,
  },
};
</script>

<template>
  <div>
    <div>
      <h3>From url</h3>
      <v-lottie-player
        name="scooterAnim"
        loop
        path="https://assets2.lottiefiles.com/packages/lf20_hu2LUv.json"
      />
    </div>
    OR
    <div>
      <h3>From local</h3>
      <vLottiePlayer
        name="workoutMonkeyAnim"
        loop
        :animationData="require('./assets/workout-monkey.json')"
      />
    </div>
  </div>
</template>

Configuration

Props:

• name: animation name for future reference
• animationData: animation JSON.

  <v-lottie-player :animationData="require('./assets/workout-monkey.json')" />
  

• path: the relative path to the animation JSON. (animationData and path are mutually exclusive)

  <v-lottie-player path="https://assets2.lottiefiles.com/packages/lf20_hu2LUv.json" />
  

• loop: true / false / number (default: false)
• autoplay: true / false it will start playing as soon as it is ready (default: true)
• renderer: 'svg' / 'canvas' / 'html' to set the renderer (default: 'svg')
• width: player width (default: 200px)
• height: player height (default: 200px)
• background: player background (default: transparent)
• @lottie: Returns the lottie-web animation controller for custom event hookup & direct access to the lottie instance.