Lottie-Web-Vue

Lottie-web-vue is an Airbnb Lottie-web component for Vue.js projects

Airbnb's Lottie-web is a library for rendering animations exported from Adobe After Effects using the BodyMovin plugin. This package allows you to easily import animation files (available in .json format) into your Vue.js project.

Animations

You can browse and download animations from LottieFiles. First, find an animation you like > signup > click export JSON and save to your project. In vue you can save these under assets and then use require('@/assets/animation.json') to load them into the LottieAnimator as part of the lottie-web-vue component.

Example: https://lottiefiles.com/38726-stagger-rainbow

Installation

Add lottie-web-vue to your project package using:

npm install --save lottie-web-vue

yarn add lottie-web-vue

Add to global scope

import Vue from 'vue'
import LottieAnimation from 'lottie-web-vue'
 
Vue.use(LottieAnimation); // add lottie-animation to your global scope
 
new Vue({
  render: h => h(App)
}).$mount('#app')

Add to view file

<template>
  <div>
    <lottie-animation
      ref="anim"
      :animationData="require('@/assets/animation.json')"
    />
  </div>
</template>
<script>
import LottieAnimation from 'lottie-web-vue' // import lottie-web-vue
 
export default {
  components: {
      LottieAnimation
  },
  data: () => ({
    ...
  })
};
</script>

Usage

Basic:

<lottie-animation
  ref="anim"
  :animationData="require('@/assets/animation.json')"
/>

Full available props and events:

<lottie-animation
  ref="anim"
  :animationData="require('@/assets/animation.json')"
  :loop="false"
  :autoPlay="false"
  :speed="1"
  @loopComplete="loopComplete"
  @complete="complete"
  @enterFrame="enterFrame"
/>

Props

The component has a number of props you can use to control the animation playback.

You must pass animationData to load the animation prior to the component being played.

animationData

Type: Object
Required: true

Include animation data from a require statement that imports the .json file from your assets folder. e.g. require('@/assets/animation.json') (save you animation as a.json file and put under src/assets in your project)

loop

Type: [Boolean, Number]
Required: false
Default: false

True: Animation continously loops False: Animation plays only once [number e.g. 3]: Animation plays N number of times before stopping (pass an integer)

autoPlay

Type: Boolean
Required: false
Default: true

True: Animation will play as soon as it has finished loading False: Animation will play only when you call this.$refs.lottieAnimation.play() (see below for playback controls)

speed

Type: Number
Required: false
Default: 1

The speed that the animation will play back.

Events

You can listen for events emitted by the component by using the @ syntax, passing in the parent method you wish to trigger. For more documentation about the Lottie-web events see here.

@loopComplete

Fired once a complete loop of the animation has occurred

@complete

Fired once the animation has completed (only fired when loop = false)

@enterFrame

As each frame is played this event is fired. Warning - this fires very frequently.

Playback Methods

You can call animation playback methods directly on the component if you wish to trigger playback on an event (i.e. when a user clicks the button, play the animation). You need to use the this.$refs syntax and give your LottieAnimation a ref id to use in the this.$refs.[your-name-here].

<lottie-animation
      ref="anim"
      :animationData="require('@/assets/animation.json')"
/>

Once your component (in the parent view) has a ref id you can then use this in a method of your choosing:

... // in your parent .vue file
methods: {
  buttonClicked() {
    this.$refs.anim.play() // .play, .pause, .stop available
  }
}

Play

Using this.$refs.anim.play() will play the animation.

Pause

Using this.$refs.anim.pause() will pause the animation.

Stop

Using this.$refs.anim.stop() will stop the animation.

Full example

See here for an example:

<template>
  <div id="app">
    <lottie-animation
      ref="anim"
      :animationData="require('@/assets/animation.json')"
      :loop="true"
      :autoPlay="true"
      @loopComplete="loopComplete"
      @complete="complete"
      @enterFrame="enterFrame"
    />
  </div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue'

export default {
  components: {
    LottieAnimation
  },
  mounted() {
    this.$refs.anim.play()
  },
  methods: {
    loopComplete() {
      console.log('loopComplete')
    },
    complete() {
      console.log('complete')
    },
    enterFrame() {
      console.log('enterFrame')
    }
  }
}
</script>

Vue 3 Composition API with Setup

To use this in a Vue 3 project that uses the setup Composition API use the following:

<template>
  <div id="app">
    <lottie-animation
      ref="anim"
      :animationData="require('@/assets/animation.json')"
      :loop="true"
      :autoPlay="true"
      @loopComplete="loopComplete"
      @complete="complete"
      @enterFrame="enterFrame"
    />
  </div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue'
import { onMounted, ref } from 'vue'

export default {
  components: {
      LottieAnimation
  },
  setup() {
    const anim = ref(null)

    const loopComplete = () => {
      console.log('loopComplete')
    }

    const complete = () => {
      console.log('complete')
    }

    const enterFrame = () => {
      console.log('enterFrame')
    }

    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      anim.value.play()
    })

    return {
      anim, 
      loopComplete,
      complete,
      enterFrame
    }
  }
}
</script>

coolicer / lottie-web-vue