viewmotion

Vue

viewmotion-vue

The Vue adapter offers a v-motion directive for template-based usage and a useMotion composable for programmatic control.

Installation 

npm install viewmotion-vue

Plugin setup

Register the plugin in your Vue app entry point: 

import { createApp } from "vue";
import { MotionPlugin } from "viewmotion-vue";
import App from "./App.vue";

createApp(App).use(MotionPlugin).mount("#app");

v-motion directive

Use the directive directly in templates: 

<template>
  <h1 v-motion="'fade-up'">Hello</h1>

  <!-- With options -->
  <div v-motion="{ preset: 'slide-left', delay: 200 }">Content</div>
</template>
Value typeExample
stringv-motion="'fade-up'"
objectv-motion="{ preset: 'fade-up', delay: 100 }"

useMotion composable

For programmatic control, use the composable in <script setup>: 

<script setup>
import { useMotion } from "viewmotion-vue";
const el = useMotion({ preset: "fade-up", delay: 300 });
</script>

<template>
  <div ref="el">Animated</div>
</template>

Stagger in Vue

Use v-for with dynamic delay to create stagger effects: 

<template>
  <div
    v-for="(item, i) in items"
    :key="item.id"
    v-motion="{ preset: 'fade-up', delay: i * 80 }"
  >
    {{ item.name }}
  </div>
</template>
React adapter Svelte adapter