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)
Usage
Install it as a plugin:
// import Tweezer to use it as our Tweening engine // install the plugin with one single engines// use the tweezerHelper to generate the function// needed by VueTweezing to handle tweezingVue
Use it as a component:
target: {{ value }} val: {{ tweenedValue }}
Change value
as you would usually do:
const vm = el: '#app' data: value: 0 // somewhere elsevmvalue = 200
You can play with the tween object by accessing the property $tween
in the Tweening
component:
// given the example abovevm$refstweezing$tween
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.