Smooth animations with GSAP in Vue

Introduction

Animations are not just for looking good. A smooth transition can guide the user, provide visual feedback, and make an interface feel alive and professional. The problem is that often, good-looking animations are heavy and make the app sluggish.

That’s where GSAP (GreenSock Animation Platform) comes in. It’s one of the most powerful and optimized animation libraries out there. Its performance is unmatched, and its syntax is incredibly intuitive. I’m going to show you how to integrate it into your Vue project to create stunning effects without slowing your app down.

Initial setup: Installation and integration

First things first:

npm install gsap

Now, in your Vue component, you can import it and start using it. The ideal place to trigger an animation is the onMounted hook, since it ensures the DOM element you want to animate already exists.

Example 1: A simple animation

Let’s animate a simple box to move 200 pixels to the right.

<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>

We use ref to get a reference to the DOM element.
Inside onMounted, we call gsap.to(), which animates from the element’s current state to a final state.

Advanced animations: The power of Timelines

What if you want several animations to run in sequence? That’s where GSAP Timelines shine. A timeline is like a choreography of animations: you can chain multiple movements, delay them, and control them as a single object.

Example 2: A sequence animation

Imagine you want to animate a logo, then a title, and finally a button.

<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">Welcome</h1>
    <button ref="boton" class="opacity-0 mt-8 bg-blue-500 text-white py-2 px-4 rounded">Start</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>

The timeline allows you to chain animations in a clean and precise way—something that would be nearly impossible to do with pure CSS.

Conclusion

Animations are the cherry on top of an interface, and with GSAP in Vue, you don’t have to sacrifice performance for aesthetics. This library gives you full control to create truly memorable user experiences. Now you have the power to bring your interfaces to life in the smoothest and most professional way possible.