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.