Motion for Vue

Motion for Vue is a hybrid animation engine that combines JavaScript animations with native browser API performance. It supports a wide range of animation capabilities including:

• Springs and Keyframes
• Layout animations and Shared layout animations
• Gestures (drag, tap, hover)
• Scroll animations
• SVG paths
• Exit animations
• Server-side rendering (SSR)
• Independent transforms
• Orchestrating animations across components
• CSS variables

To use Motion for Vue in your project, install the motion-v package using your preferred package manager.

npm install motion-v

To set up the Nuxt 3 Minimal Starter project, install the required dependencies using your preferred package manager.

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Run the development server to view your application at http://localhost:3000.

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

After installing motion-v, import the motion component in your Vue component. You can then use it as a dynamic component (e.g., motion.div) and use the :animate prop to define animation states.

<script setup>
import { motion } from 'motion-v'
</script>

<template>
  <motion.div :animate="{ x: 100 }" />
</template>

To prepare the application for production, build the project and then use the preview command to test the production build locally.

# Build for production
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

# Locally preview production build
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

An AnimationType represents a specific trigger or state that drives animations. The system uses a fixed priority order to ensure that if multiple animation triggers are active simultaneously, the one with the highest priority controls the properties.

Available AnimationTypes:

• animate
• whileInView
• whileFocus
• whileHover
• whilePress
• whileDrag
• exit

When dragDirectionLock is enabled, the drag gesture will attempt to determine if the user is moving primarily along the x or y axis.

1. The system monitors the pointer offset from the origin.
2. Once the absolute offset on either axis exceeds a threshold (default is 10 pixels), the direction is locked.
3. Once locked, movement on the other axis is ignored.
4. The onDirectionLock callback is triggered with the determined direction ('x' or 'y').

You can define custom motion presets in your Nuxt configuration. These presets are automatically registered as Vue directives. If you provide a presets object, the module will generate a plugin to register them.

When a preset is registered, the module also generates TypeScript types for them. The directive names are converted to camelCase for the GlobalDirectives interface (e.g., a preset named fade-in becomes vFadeIn).

The MotionPlugin allows you to register the global v-motion directive and optionally define custom preset directives.

To use the default v-motion directive, simply install the plugin. To add custom directives (like v-fade-in), provide a presets object in the plugin options.

import { MotionPlugin } from 'motion-v'

// Basic installation (provides v-motion)
app.use(MotionPlugin)

// Installation with custom presets (provides v-motion AND v-fade-in)
app.use(MotionPlugin, {
  presets: {
    'fade-in': { initial: { opacity: 0 }, animate: { opacity: 1 } },
  },
})

Playwright projects allow you to run tests against different browser engines. This configuration defines two projects: chromium (using Desktop Chrome) and webkit (using Desktop Safari).

projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],

The webServer configuration automatically starts the local development server before running tests. It uses npm run dev and targets the URL http://localhost:5173 within the ./playground/vite directory. In non-CI environments, reuseExistingServer is enabled to speed up local test runs.

webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
    cwd: './playground/vite',
  },