VueTweezing

Easy, customizable and automatic tweening nicely served in scoped slots

VueTweezing works with any tweening engine and provide easy integration with some engines like tween.js and Tweezer

Demo, source

Usage

Install it as a plugin:

import { Tweezing, tweezerHelper } from 'vue-tweezing'
// import Tweezer to use it as our Tweening engine
import Tweezer from 'tweezer.js'

// install the plugin with as many engines as you want
// use the tweezerHelper to generate the function
// needed by VueTweezing to handle tweezing
Vue.use(Tweezing, {
  tweezer: tweezerHelper(Tweezer),
})

Use it as a component:

<Tweezing ref="tweezing" :to="value" duration="500" @end="doSomething">
  <pre slot-scope="tweenedValue">
    target: {{ value }}
    val: {{ tweenedValue }}
  </pre>
</Tweezing>

Change value as you would usually do:

const vm = new Vue({
  el: '#app',
  data: {
    value: 0,
  },
})
// somewhere else
vm.value = 200

You can play with the tween object by accessing the property $tween in the Tweening component:

// given the example above
vm.$refs.tweezing.$tween.stop()

Passing tweening options

Any prop passed to Tweezing different from tween and to will be considered an option and passed

Supported Tweening engines

WIP

Tweezer

Tween.js

Adding your own

WIP

You can check the examples in src/index.js to see how to create your own helpers.

License

MIT