VueTween
Allows the components to tween their properties.
demo
dependencies
setup
npm
npm install @seregpie/vuetweenES module
Install the plugin globally.
import Vue from 'vue'; import VueTween from '@seregpie/vuetween'; Vue.use(VueTween);or
Register the plugin in the scope of a component.
import VueTween from '@seregpie/vuetween'; export default { mixins: [VueTween], /*...*/ };browser
<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/@seregpie/vuetween"></script>If Vue is detected, the plugin will be installed automatically.
usage
{ props: { number: Number, animationDuration: Number, }, tweened: { animatedNumber: { get() { return this.number; }, duration() { return this.animationDuration; }, easing(t) { return t * (2 - t); }, }, }, }Use nested objects and arrays.
{ data: { colors: [ {r: 255, g: 0, b: 0}, {r: 0, g: 255, b: 0}, {r: 0, g: 0, b: 255}, ], }, tweened: { animatedColors: { get() { return this.colors; }, duration: 1000, }, }, }
