Skip to content

Latest commit

 

History

History
136 lines (102 loc) · 8.75 KB

README.md

File metadata and controls

136 lines (102 loc) · 8.75 KB
Raw

@lottiefiles/dotlottie-vue

npm npm bundle size npm NPM

Contents

Introduction

A Vue library for rendering lottie and dotLottie animations in the browser.

What is dotLottie?

dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".

Learn more about dotLottie.

Installation

npm install @lottiefiles/dotlottie-vue

Usage

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script>

<template>
  <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />
</template>

Live Examples

APIs

DotLottieVue Props

Property name Type Required Default Description
autoplay boolean false Auto-starts the animation on load.
loop boolean false Determines if the animation should loop.
src string undefined URL to the animation data (.json or .lottie).
speed number 1 Animation playback speed. 1 is regular speed.
data string | ArrayBuffer undefined Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
mode string "forward" Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce".
backgroundColor string undefined Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"),
segment [number, number] [0, totalFrames - 1] Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
renderConfig RenderConfig {} Configuration for rendering the animation.
useFrameInterpolation boolean false Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true.
marker string undefined Sets a specific marker to be played
autoResizeCanvas boolean true Enable or disable auto resize of canvas
playOnHover boolean false When enabled it plays animation only on hover
animationId string undefined Plays specific animation within .lottie
themeId string undefined Loads a specific theme within .lottie
themeData string undefined Load theme data.

RenderConfig

The renderConfig object accepts the following properties:

Property name Type Required Default Description
devicePixelRatio number window.devicePixelRatio | 1 The device pixel ratio.

Listening to Events

<script setup>
import { onMounted, ref, watch } from 'vue';
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
const playerRef = ref(null);

onMounted(() => {
  if (playerRef.value) {
    const dotLottie = playerRef.value.getDotLottieInstance();
    dotLottie.addEventListener('pause', () => {
      console.log('paused')
    });
    dotLottie.addEventListener('frame', ({ currentFrame }) => {
      console.log('Frame:', currentFrame)
    });
  }
})
</script>

<template>
  <DotLottieVue autoplay loop ref="playerRef" src="path-to-lottie.lottie" />
</template>

Refer to dotlottie-web Events sections to know more about all available events.

Development

Setup

pnpm install

Dev

pnpm dev

Build

pnpm build