State-Driven Animations in Vue: Create Smooth UI Transitions with Reactive State

Animations can make an application feel faster, smoother, and more polished. However, many developers think animations are only useful for things like:

• page transitions
• modals
• enter/leave effects

But Vue provides another powerful pattern - State-driven animations. Instead of animating when elements are added or removed from the DOM, you animate changes in reactive state. This allows you to create rich interactive experiences while keeping your code declarative and easy to maintain.

In this article, we'll explore:

• What state-driven animations are
• How they differ from regular Vue transitions
• What problems they solve
• How to implement them in Vue
• Best practices for creating smooth UI interactions

Let's dive in.

🤔 What Are State-Driven Animations?

Most Vue developers are familiar with the <Transition> component.

Example:

<Transition>
  <Modal v-if="isOpen" />
</Transition>

This animates an element when it enters or leaves the DOM.

But what if the element already exists and only its state changes? For example:

• a progress bar grows
• a card expands
• a chart updates
• a panel changes size
• a value changes position

This is where state-driven animations shine.

Instead of animating DOM insertion or removal, you animate changes caused by reactive state.

🟢 What Problem Do State-Driven Animations Solve?

Without animations, state changes can feel abrupt.

Example:

<div :style="{ width: progress + '%' }"></div>

When progress changes:

progress.value = 80

The width instantly jumps.

This works technically... but it doesn't feel great.

🟢 A Simple Example

Let's create an animated progress bar.

<script setup lang="ts">
const progress = ref(20)

function increase() {
  progress.value += 20
}
</script>

<template>
  <button @click="increase">
    Increase Progress
  </button>

  <div class="progress-container">
    <div
      class="progress-bar"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

CSS:

.progress-container {
  width: 100%;
  height: 12px;
  background: #eee;
}

.progress-bar {
  height: 100%;
  background: #42b883;
  transition: width 0.3s ease;
}

Now whenever progress changes, the bar animates smoothly.

The animation is entirely driven by reactive state.

🟢 Animating Multiple Properties

State-driven animations are not limited to width.

Example:

<div
  class="card"
  :style="{
    transform: expanded
      ? 'scale(1.1)'
      : 'scale(1)',
    opacity: expanded
      ? 1
      : 0.7
  }"
/>

CSS:

.card {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

Now changing:

expanded.value = true

animates scale and opacity at the same time.

🟢 Using Vue Reactivity with Animations

One of the biggest advantages is that animations stay connected to Vue's reactivity system.

Example:

<script setup lang="ts">
const isActive = ref(false)
</script>

<template>
  <button @click="isActive = !isActive">
    Toggle
  </button>

  <div
    class="box"
    :class="{ active: isActive }"
  />
</template>

CSS:

.box {
  width: 100px;
  height: 100px;
  transition: all 0.4s ease;
}

.box.active {
  transform: rotate(180deg);
}

Vue handles state.

CSS handles animation.

The result is clean and maintainable.

🧪 Best Practices

• Keep animations subtle and purposeful
• Prefer CSS transitions for simple effects
• Avoid animating expensive properties when possible
• Use transforms instead of layout-changing properties when appropriate
• Don't animate everything
• Keep durations short (typically 200–400ms)
• Use animations to communicate state changes, not distract users

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

🧪 Advance skills

A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.

Check out Certificates.dev by clicking this link or by clicking the image below:

Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!

✅ Summary

State-driven animations are a powerful way to create smooth and engaging user experiences in Vue.

While <Transition> is perfect for entering and leaving elements, state-driven animations excel when existing elements need to react smoothly to changing data.

Used thoughtfully, they can make your applications feel significantly more responsive and professional.

Take care!
And happy coding as always 🖥️