Automatic tweening values nicely served in scoped slots
npm install vue-tweezing> 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 (TODO link)
Install it as a plugin:
``js
import { Tweezing, tweezerHelper } from 'vue-tweezing'
// import Tweezer to use it as our Tweening engine
import Tweezer from 'tweezer.js'
// install the plugin with one single engines
// use the tweezerHelper to generate the function
// needed by VueTweezing to handle tweezing
Vue.use(Tweezing, {
tweezer: tweezerHelper(Tweezer)
})
`
Use it as a component:
`html`
target: {{ value }}
val: {{ tweenedValue }}
Change value as you would usually do:
`js`
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:
`js`
// given the example above
vm.$refs.tweezing.$tween.stop()
Any prop passed to Tweezing different from tween and to will be considered an option and passed
WIP
WIP
You can check the examples in src/index.js` to see how to create your own helpers.