Vue State Animations

by Plínio Naves

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">

  <h2>Animações de estado</h2>
  
  <input v-model.number="number">
  
  <p>{{ animatedNumber }}</p>
  
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	number: 0,
    tweenedNumber: 0
  },
  computed: {
  	animatedNumber() {
    	return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
  	number(newValue, oldValue) {
    	TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
    }
  }
});