πŸ’ƒ Easy, customizable and automatic tweening nicely served in scoped slots
JavaScript Vue
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci πŸ’š Fix config indent Jan 27, 2018
.github
docs
example ✨ Pass vm to tween engine Feb 12, 2018
src
test βœ… Test 4th argument is the vm Feb 12, 2018
.babelrc βœ… Add jest for testing Jan 27, 2018
.eslintrc
.gitignore πŸ”§ Ignore DS_Store Feb 11, 2018
.release-it.json
LICENSE πŸ“„ Add license Jan 27, 2018
README.md
package.json
yarn.lock

README.md

vue-tweezing Build Status npm package coverage thanks

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