vue-tweezing

    0.1.6 • Public • Published

    vue-tweezing Build Status npm package coverage donate

    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 { 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:

    <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

    Install

    npm i vue-tweezing

    DownloadsWeekly Downloads

    15

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    28.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • posva