Animaciones fluidas con GSAP en Vue

Introducción

Las animaciones no son solo para que algo se vea bonito. Una transición suave puede guiar al usuario, darle una respuesta visual y hacer que una interfaz se sienta viva y profesional. El problema es que, a menudo, las animaciones vistosas son pesadas y vuelven lenta la app.

Ahí entra GSAP (GreenSock Animation Platform). Es una de las librerías de animación más potentes y optimizadas que existen. Su rendimiento no tiene rival y su sintaxis es increíblemente intuitiva. Te voy a enseñar a integrarla en tu proyecto de Vue para crear efectos espectaculares sin frenar tu app.

Configuración inicial: instalación e integración

Lo primero es lo primero:

npm install gsap

Ahora, en tu componente de Vue, puedes importarla y empezar a usarla. El lugar ideal para lanzar una animación es el hook onMounted, porque garantiza que el elemento del DOM que quieres animar ya existe.

Ejemplo 1: una animación sencilla

Vamos a animar una caja para que se mueva 200 píxeles a la derecha.

<template>
  <div ref="miElemento" class="w-12 h-12 bg-blue-500 rounded-lg"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { gsap } from 'gsap';

const miElemento = ref(null);

onMounted(() => {
  gsap.to(miElemento.value, {
    x: 200,
    duration: 1,
    ease: 'power2.out'
  });
});
</script>

Usamos ref para obtener una referencia al elemento del DOM.
Dentro de onMounted llamamos a gsap.to(), que anima el elemento desde su estado actual hasta un estado final.

Animaciones avanzadas: el poder de las timelines

¿Y si quieres que varias animaciones se ejecuten en secuencia? Ahí brillan las timelines de GSAP. Una timeline es como una coreografía de animaciones: puedes encadenar varios movimientos, retrasarlos y controlarlos como un solo objeto.

Ejemplo 2: una animación en secuencia

Imagina que quieres animar un logo, después un título y, por último, un botón.

<template>
  <div class="flex flex-col items-center">
    <img ref="logo" src="/logo.svg" alt="Logo" class="opacity-0">
    <h1 ref="titulo" class="text-3xl font-bold opacity-0 mt-4">Bienvenido</h1>
    <button ref="boton" class="opacity-0 mt-8 bg-blue-500 text-white py-2 px-4 rounded">Empezar</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { gsap } from 'gsap';

const logo = ref(null);
const titulo = ref(null);
const boton = ref(null);

onMounted(() => {
  const tl = gsap.timeline({ defaults: { duration: 0.8, ease: "back.out(1.7)" } });

  tl.to(logo.value, { opacity: 1, y: 0 })
    .to(titulo.value, { opacity: 1, y: 0 }, "-=0.5")
    .to(boton.value, { opacity: 1, scale: 1 }, "-=0.3");
});
</script>

La timeline te permite encadenar animaciones de forma limpia y precisa, algo casi imposible de hacer solo con CSS.

Conclusión

Las animaciones son la guinda de una interfaz, y con GSAP en Vue no tienes que sacrificar rendimiento por estética. Esta librería te da control total para crear experiencias de usuario realmente memorables. Ahora tienes el poder de dar vida a tus interfaces de la forma más fluida y profesional posible.