Using Lottie for Web Animations: Installation, API Usage, and Vue Component Integration

In recent projects, the author switched from GIF animations to Lottie to achieve smoother, higher‑quality visual effects across Android, iOS, Web, and Windows platforms.

Lottie is a library that renders Adobe After Effects animations exported as JSON via Bodymovin, allowing designers to deliver complex animations without manual recreation by developers.

Installation

# Since this is for the web, install lottie-web
pnpm add lottie-web

Basic Usage

import lottie from 'lottie-web'
import animationData from 'xx/xx/xx.json'

lottie.loadAnimation({
    animationData,
    loop: true,
    autoplay: true,
    renderer: 'svg',
    container: document.querySelector('container')
})

The lottie.loadAnimation() function accepts a single configuration object; key fields include animationData , path , loop , autoplay , name , renderer , and container . It returns an animation instance that can be controlled via methods such as play() , stop() , pause() , setSpeed() , and others.

Animation Instance Methods

anim.play() : start playback

anim.stop() : stop playback

anim.pause() : pause playback

anim.setLocationHref(locationHref) : useful for Safari mask issues

anim.setSpeed(speed) : set playback speed (1 = normal)

anim.goToAndStop(value, isFrame) : jump to a specific time or frame and stop

anim.goToAndPlay(value, isFrame) : jump to a specific time or frame and play

anim.setDirection(direction) : set playback direction (1 = forward)

anim.playSegments(segments, forceFlag) : play specific frame segments

anim.setSubframe(flag) : control sub‑frame rendering

anim.destroy() : destroy the animation instance

Lottie API Methods

lottie.play(name) : play a named animation

lottie.stop(name) : stop a named animation

lottie.setSpeed(name, speed) : adjust speed of a named animation

lottie.setDirection(name, direction) : set direction of a named animation

lottie.searchAnimations() : find elements with class "lottie"

lottie.loadAnimation(config) : load an animation and obtain its instance

lottie.destroy(name) : destroy and clean up resources

lottie.registerAnimation(options) : register an animation via a data‑animation‑path attribute

lottie.setQuality(quality) : set rendering quality (high, medium, low, or numeric >1)

Events

Directly bindable events include onComplete , onLoopComplete , onEnterFrame , and onSegmentStart . Additional events can be listened to with addEventListener , such as complete , loopComplete , enterFrame , segmentStart , config_ready , data_ready , DOMLoaded , and destroy .

Encapsulating in a Vue Component

<template>
    <component :is="props.tag" ref="container">
        <slot></slot>
    </component>
</template>

<script>
import lottie from "lottie-web";
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';

// default configuration
const defaultConfig = {
    renderer: "svg",
    loop: true,
    autoplay: true,
};

const props = defineProps({
    tag: { type: String, default: "div" },
    options: { type: Object, default: () => ({}) },
});

const container = ref(null);
const instance = shallowRef(null);

// Resolve asset URLs for animationData.assets
const parseAssets = (assets) => {
    const assetsBaseURL = process.env.VUE_APP_ROUTE_BASE_URL + '/lotties';
    return assets.map(item => ({ ...item, u: assetsBaseURL + item.u }));
};

const init = () => {
    const conf = { ...defaultConfig, ...props.options };
    const assets = parseAssets(conf.animationData.assets || []);
    if (conf.animationData) {
        conf.animationData = { ...conf.animationData, assets };
    }
    instance.value = lottie.loadAnimation({
        container: container.value,
        ...conf,
    });
};

onMounted(() => { init(); });

onUnmounted(() => {
    if (instance.value && instance.value.destroy) {
        instance.value.destroy();
    }
});
</script>

This Vue component abstracts the Lottie setup, allowing developers to drop a <LottieAnimation> (or any custom tag) into their templates with configurable options.

Reference

Web (airbnb.io)