1---
2title: State-driven Animations with CSS Transitions and Style Bindings
3impact: LOW
4impactDescription: Combining Vue's reactive style bindings with CSS transitions creates smooth, interactive animations
5type: best-practice
6tags: [vue3, animation, css, transition, style-binding, state, interactive]
7---
8 
9# State-driven Animations with CSS Transitions and Style Bindings
10 
11**Impact: LOW** - For responsive, interactive animations that react to user input or state changes, combine Vue's dynamic style bindings with CSS transitions. This creates smooth animations that interpolate values in real-time based on state.
12 
13## Task List
14 
15- Use `:style` binding for dynamic properties that change frequently
16- Add CSS `transition` property to smoothly animate between values
17- Consider using `transform` and `opacity` for GPU-accelerated animations
18- For complex value interpolation, use watchers with animation libraries
19 
20## Basic Pattern
21 
22```vue
23<template>
24  <div
25    @mousemove="onMousemove"
26    :style="{ backgroundColor: `hsl(${hue}, 80%, 50%)` }"
27    class="interactive-area"
28  >
29    <p>Move your mouse across this div...</p>
30    <p>Hue: {{ hue }}</p>
31  </div>
32</template>
33 
34<script setup>
35import { ref } from 'vue'
36 
37const hue = ref(0)
38 
39function onMousemove(e) {
40  // Map mouse X position to hue (0-360)
41  const rect = e.currentTarget.getBoundingClientRect()
42  hue.value = Math.round((e.clientX - rect.left) / rect.width * 360)
43}
44</script>
45 
46<style>
47.interactive-area {
48  transition: background-color 0.3s ease;
49  height: 200px;
50  display: flex;
51  flex-direction: column;
52  align-items: center;
53  justify-content: center;
54}
55</style>
56```
57 
58## Common Use Cases
59 
60### Following Mouse Position
61 
62```vue
63<template>
64  <div
65    class="container"
66    @mousemove="onMousemove"
67  >
68    <div
69      class="follower"
70      :style="{
71        transform: `translate(${x}px, ${y}px)`
72      }"
73    />
74  </div>
75</template>
76 
77<script setup>
78import { ref } from 'vue'
79 
80const x = ref(0)
81const y = ref(0)
82 
83function onMousemove(e) {
84  const rect = e.currentTarget.getBoundingClientRect()
85  x.value = e.clientX - rect.left
86  y.value = e.clientY - rect.top
87}
88</script>
89 
90<style>
91.container {
92  position: relative;
93  height: 300px;
94}
95 
96.follower {
97  position: absolute;
98  width: 20px;
99  height: 20px;
100  background: blue;
101  border-radius: 50%;
102  /* Smooth following with transition */
103  transition: transform 0.1s ease-out;
104  /* Prevent the follower from triggering mousemove */
105  pointer-events: none;
106}
107</style>
108```
109 
110### Progress Animation
111 
112```vue
113<template>
114  <div class="progress-container">
115    <div
116      class="progress-bar"
117      :style="{ width: `${progress}%` }"
118    />
119  </div>
120  <input
121    type="range"
122    v-model.number="progress"
123    min="0"
124    max="100"
125  />
126</template>
127 
128<script setup>
129import { ref } from 'vue'
130 
131const progress = ref(0)
132</script>
133 
134<style>
135.progress-container {
136  height: 20px;
137  background: #e0e0e0;
138  border-radius: 10px;
139  overflow: hidden;
140}
141 
142.progress-bar {
143  height: 100%;
144  background: linear-gradient(90deg, #4CAF50, #8BC34A);
145  transition: width 0.3s ease;
146}
147</style>
148```
149 
150### Scroll-based Animation
151 
152```vue
153<template>
154  <div
155    class="hero"
156    :style="{
157      opacity: heroOpacity,
158      transform: `translateY(${scrollOffset}px)`
159    }"
160  >
161    <h1>Scroll Down</h1>
162  </div>
163</template>
164 
165<script setup>
166import { ref, computed, onMounted, onUnmounted } from 'vue'
167 
168const scrollY = ref(0)
169 
170const heroOpacity = computed(() => {
171  return Math.max(0, 1 - scrollY.value / 300)
172})
173 
174const scrollOffset = computed(() => {
175  return scrollY.value * 0.5  // Parallax effect
176})
177 
178function handleScroll() {
179  scrollY.value = window.scrollY
180}
181 
182onMounted(() => {
183  window.addEventListener('scroll', handleScroll, { passive: true })
184})
185 
186onUnmounted(() => {
187  window.removeEventListener('scroll', handleScroll)
188})
189</script>
190 
191<style>
192.hero {
193  height: 100vh;
194  display: flex;
195  align-items: center;
196  justify-content: center;
197  /* Note: No transition for scroll-based animations - they should be instant */
198}
199</style>
200```
201 
202### Color Theme Transition
203 
204```vue
205<template>
206  <div
207    class="app"
208    :style="themeStyles"
209  >
210    <button @click="toggleTheme">Toggle Theme</button>
211    <p>Current theme: {{ isDark ? 'Dark' : 'Light' }}</p>
212  </div>
213</template>
214 
215<script setup>
216import { ref, computed } from 'vue'
217 
218const isDark = ref(false)
219 
220const themeStyles = computed(() => ({
221  '--bg-color': isDark.value ? '#1a1a1a' : '#ffffff',
222  '--text-color': isDark.value ? '#ffffff' : '#1a1a1a',
223  backgroundColor: 'var(--bg-color)',
224  color: 'var(--text-color)'
225}))
226 
227function toggleTheme() {
228  isDark.value = !isDark.value
229}
230</script>
231 
232<style>
233.app {
234  min-height: 100vh;
235  transition: background-color 0.5s ease, color 0.5s ease;
236}
237</style>
238```
239 
240## Advanced: Numerical Tweening with Watchers
241 
242For smooth number animations (counters, stats), use watchers with animation libraries:
243 
244```vue
245<template>
246  <div>
247    <input v-model.number="targetNumber" type="number" />
248    <p class="counter">{{ displayNumber.toFixed(0) }}</p>
249  </div>
250</template>
251 
252<script setup>
253import { computed, ref, reactive, watch } from 'vue'
254import gsap from 'gsap'
255 
256const targetNumber = ref(0)
257const tweened = reactive({ value: 0 })
258 
259// Computed for display
260const displayNumber = computed(() => tweened.value)
261 
262watch(targetNumber, (newValue) => {
263  gsap.to(tweened, {
264    duration: 0.5,
265    value: Number(newValue) || 0,
266    ease: 'power2.out'
267  })
268})
269</script>
270```
271 
272## Performance Considerations
273 
274```vue
275<style>
276/* GOOD: GPU-accelerated properties */
277.element {
278  transition: transform 0.3s ease, opacity 0.3s ease;
279}
280 
281/* AVOID: Properties that trigger layout recalculation */
282.element {
283  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease;
284}
285 
286/* For high-frequency updates, consider will-change */
287.frequently-animated {
288  will-change: transform;
289}
290</style>
291```
292