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