lukechinworth / vue-mixin-tween

Vue mixin factory to tween component numerical data

Vue Mixin Tween

Vue mixin factory to tween component numerical data (using Tween.js).

Installation

npm install vue-mixin-tween

Usage

To tween a component prop, e.g. width:

import VueMixinTween from 'vue-mixin-tween';

export default {
    props: {
        width: Number,
    },
    mixins: [
        VueMixinTween('width'),
    ],
    // this.widthTween now available in your component
    // update width to new value, and widthTween will tween from the old to the new
};

API

VueMixinTween(propName[, duration[, ease]])

propName: String (required)

Component property to watch for changes. Tweened property available on component context at ${propName}Tween.

duration: Number = 500 (optional)

Duration of tween.

ease: Function = TWEEN.Easing.Quadratic.Out (optional)

Easing function to tween value with.

Contributing

Please send a pull request if you'd like to improve the project.

Attribution

This project borrows heavily from Animating State with Watchers from the vue docs. It basically just moves that example into a reusable mixin.