Easy, Customizable, and Automatic Tweening Served In Scoped Slots

Easy, customizable and automatic tweening is well rendered in range-bound slots. VueTweezing works with any tweening engine and provides easy integration with some engines like tween.js and Tweezer.

Passing tweening options: Any prop passed to Tweezing different from tween and to will be considered an option and passed.

How to make use of it:

1. 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),

2. Use it as a component:

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

3. Change the value as you normally would:

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

4. You can play with a tweened object by accessing the tween property in the Tweening component:

// given the example above

automatic tweening engine for vue, VueTweezing Plugin/Github

See Demo And Download

Official Website(posva): Click Here

This superior jQuery/javascript plugin is developed by posva. For extra advanced usage, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…