@pixodesk/svg-animator-vue

animator-vue

📖 Full user guide: docs/library/vue.md · all docs

Vue component for rendering and controlling Pixodesk SVG animations.

🚧 Status - This project is currently under development.

Usage

<script setup lang="ts">
import { PixodeskSvgAnimator } from '@pixodesk/svg-animator-vue';
import animationDoc from './animation.json';
</script>

Autoplay

Uses triggers defined in the animation document (load, click, hover, scroll):

<template>
  <PixodeskSvgAnimator :doc="animationDoc" autoplay />
</template>

Declarative play/pause

Control playback with boolean props:

<script setup lang="ts">
import { ref } from 'vue';
const paused = ref(false);
</script>

<template>
  <PixodeskSvgAnimator :doc="animationDoc" play :pause="paused" />
  <button @click="paused = !paused">Toggle</button>
</template>

Imperative API

Use a template ref for full programmatic control:

<script setup lang="ts">
import { ref } from 'vue';
import type { VueAnimatorApi } from '@pixodesk/svg-animator-vue';

const animator = ref<VueAnimatorApi | null>(null);
</script>

<template>
  <PixodeskSvgAnimator :doc="animationDoc" ref="animator" />
  <button @click="animator?.play()">Play</button>
  <button @click="animator?.pause()">Pause</button>
</template>

VueAnimatorApi methods: play(), pause(), cancel(), finish(), isPlaying(), setPlaybackRate(rate), getCurrentTime(), setCurrentTime(ms), getCurrentProgress(), setCurrentProgress(p).

Controlled time

Render a single frame — by time in milliseconds, or by fraction of the whole timeline:

<template>
  <PixodeskSvgAnimator :doc="animationDoc" :time="500" />      <!-- 500 ms in -->
  <PixodeskSvgAnimator :doc="animationDoc" :progress="0.5" />  <!-- halfway through -->
</template>

Props

With none of autoplay / play / pause / progress / time set, the component renders the animation statically (initial state, no playback); use the template ref for imperative control.

Note: passing a different doc (or unmounting) throws the old animator away and builds a new one; the old instance emits cancel, remove, and stop on its way out. Changing progress / time does not recreate the animator — it just jumps the existing one to the new time.

Events