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 }}
  </pre>
</Tweezing>

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
vm.$refs.tweezing.$tween.stop()

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

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…

vanilla-js-carousel

Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow. Getting started Clone or download the repo. Open…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…