Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SeregPie/VueTween
Allows the components to tween their properties.
https://github.com/SeregPie/VueTween
animation mixin plugin tween vue
Last synced: 3 months ago
JSON representation
Allows the components to tween their properties.
- Host: GitHub
- URL: https://github.com/SeregPie/VueTween
- Owner: SeregPie
- License: mit
- Created: 2018-06-09T11:24:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-18T17:52:55.000Z (over 4 years ago)
- Last Synced: 2024-09-06T03:48:33.775Z (5 months ago)
- Topics: animation, mixin, plugin, tween, vue
- Language: JavaScript
- Homepage: https://seregpie.github.io/VueTween/
- Size: 34.2 KB
- Stars: 23
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueTween
Allows the components to tween their properties.
## demo
[Try it out!](https://seregpie.github.io/VueTween/)
## dependencies
- [Vue](https://github.com/vuejs/vue)
## setup
### npm
```shell
npm install @seregpie/vuetween
```
### ES module
Install the plugin globally.
```javascript
import Vue from 'vue';
import VueTween from '@seregpie/vuetween';
Vue.use(VueTween);
```
*or*
Register the plugin in the scope of a component.
```javascript
import VueTween from '@seregpie/vuetween';
export default {
mixins: [VueTween],
/*...*/
};
```
### browser
```html
```
If Vue is detected, the plugin will be installed automatically.
## usage
```javascript
{
props: {
number: Number,
animationDuration: Number,
},
tweened: {
animatedNumber: {
get() {
return this.number;
},
duration() {
return this.animationDuration;
},
easing(t) {
return t * (2 - t);
},
},
},
}
```
---
Use nested objects and arrays.
```javascript
{
data: {
colors: [
{r: 255, g: 0, b: 0},
{r: 0, g: 255, b: 0},
{r: 0, g: 0, b: 255},
],
},
tweened: {
animatedColors: {
get() {
return this.colors;
},
duration: 1000,
},
},
}
```