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.
Top comments (0)