Vue animation state with GSAP

Little of theory:
We need to understand first “tweening” and why we use state based animation.

Tween (which is something that it use GSAP behind the scene in it's version 3 ) is short for between, so if we want to transition smoothly from 1 to 10, we’ll need to consider all the values between them along with all of their decimals.

By using Gsap we can have this happen automatically.
So we’ll use this concepts to create a state based animation.

This examples comes directly from Vue-mastery, so i don't own anything and this is just for educational purposes.

<template> <div> <div :style="{ width: tweenedNumber.toFixed(0) + 'px' }" class="bar"> <span>{{ tweenedNumber.toFixed(0) }}</span>  </div>  </div> </template>  <script> import { gsap } from 'gsap' export default { data() { return { number: 0, tweenedNumber: 0 } }, watch: { number(newValue) { gsap.to(this.$data, { duration: 1, ease: 'circ.out', tweenedNumber: newValue }) } }, methods: { randomNumber() { this.number = Math.random() * (800 - 0) } }, created() { setInterval(this.randomNumber, 1500) } } </script>  <style scoped> .bar { padding: 5px; background-color: #2c3e50; border: 1px #16c0b0 solid; min-width: 20px; } .bar span { color: white; } </style> 

You can look at the example here:
https://repl.it/@eulier1/Gsap

Key features:

• Watcher, it allows us to watch a reactive value and do things when that value changes.

• Gsap, on the first parameter we’re passing the data’s option object, to give access to our data and on the second parameter we’re indicating how to animate it.

• Tween a short for between and allow us to smoothly transition from 1 to 10 along with all their decimals.