Vue Motion es una biblioteca diseñada para integrar transiciones y animaciones de estado de forma fluida y natural en aplicaciones Vue.js. Inspirdaa en la filosofía de Framer Motion, esta herramienta permite a los desarrolladores definir comportamientos visuales complejos mediante una sintaxis declarativa y ligera.

Instalación del paquete

Para comenzar a utilizar Vue Motion en tu proyecto, es necesario instalar la dependencia oficial de @vueuse/motion a través de tu gestor de paquetes preferido:

# Usando npm
npm install @vueuse/motion

# Usando pnpm
pnpm add @vueuse/motion

# Usando yarn
yarn add @vueuse/motion

Configuración inicial

Una vez instalado, debes registrar el plugin en la instancia principal de tu aplicación para habilitar las directivas globales.

import { createApp } from 'vue';
import { MotionPlugin } from '@vueuse/motion';
import RootComponent from './App.vue';

const app = createApp(RootComponent);

// Inyectar el plugin de animaciones
app.use(MotionPlugin);

app.mount('#app');

Uso básico con la directiva v-motion

La forma más sencilla de animar un elemento es utilizando la directiva v-motion. Esta permite definir estados como initial (estado de partida) y enter (estado al montarse el componente).

<template>
  <section 
    v-motion 
    :initial="{ opacity: 0, scale: 0.5, y: -50 }" 
    :enter="{ opacity: 1, scale: 1, y: 0, transition: { type: 'spring', stiffness: 250 } }"
  >
    <h1>Bienvenido a la interfaz dinámica</h1>
    <p>Este panel aparece con un efecto de rebote suave.</p>
  </section>
</template>

Casos de uso comunes

1. Transiciones en carga de componentes

Ideal para elementos que deben aparecer progresivamente cuando el usuario accede a una vista específica.

<template>
  <div 
    v-motion 
    :initial="{ opacity: 0, x: -100 }" 
    :enter="{ opacity: 1, x: 0 }"
  >
    <p>Cargando información del perfil...</p>
  </div>
</template>

2. Interacciones de usuario (Hover y Tap)

Vue Motion facilita la creación de feedback visual inmediato ante acciones del ratón o toques en pantallas táctiles.

<template>
  <button
    v-motion
    :initial="{ backgroundColor: '#3498db' }"
    :hovered="{ scale: 1.1, backgroundColor: '#2980b9' }"
    :tapped="{ scale: 0.95 }"
  >
    Enviar Formulario
  </button>
</template>

Integración con el ecosistema

Nuxt.js

Vue Motion es totalmente compatible con Nuxt. Existe un módulo específico que facilita su implementación en proyectos de renderizado del lado del servidor (SSR), permitiendo animaciones consitsentes entre el servidor y el cliente.

Composables de VueUse

Al formar parte de la familia VueUse, se puede combinar con funciones como useElementVisibility. Esto permite disparar animaciones solo cuando el elemento entra en el viewport del usuario, optimizando el rendimiento y la experiencia visual.

<script setup>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'

const contenedorRef = ref(null)
const esVisible = useElementVisibility(contenedorRef)
</script>

<template>
  <div ref="contenedorRef">
    <div 
      v-if="esVisible"
      v-motion
      :initial="{ opacity: 0 }"
      :enter="{ opacity: 1 }"
    >
      Aparezco cuando me ves en pantalla.
    </div>
  </div>
</template>