Super-Easy Property Tweening in Vue.js

# Yarn
$ yarn vue-mixin-tween
# NPM
$ npm install vue-mixin-tween --save

Go ahead and throw it right into any old component with a numeric property somewhere. The mixin will create a new reactive property based on the property name you passed in. For example: myProp becomes myPropTween and will update whenever myProp updates.

<template>
  <div>
    <button @click="addAlligators">Add Some Alligators</button>
    <h2>Number of Alligators: {{ numberOfAlligators }}</h2>
    <!-- You may want to Math.floor() the value first as it is a float. -->
    <h2>Number of Alligators: (Tweened) {{ numberOfAlligatorsTween }}</h2>
  </div>
</template>

<script>
import VueMixinTween from 'vue-mixin-tween';

export default {
  data() {
    return {
      numberOfAlligators: 0
    }
  },

  mixins: [
    // The only required argument is the name of the property to tween.
    // The default duration is 500 milliseconds.
    // The default timing function is TWEEN.Easing.Quadratic.Out
    // We're using a "custom" linear timing function here.
    VueMixinTween('numberOfAlligators', 5000, (pos) => pos)
  ],

  methods: {
    addAlligators() {
      this.numberOfAlligators = 500;
    }
  }
}
</script>

And there you have it. It’s dead-simple to customize the duration or even the timing function with far less code-per-component than doing it manually. Awesome!