A spring-physics based animation library, in addition to more components, to cover most of the UI related animations, when CSS is not enough for you. It shipped with Composition-API-friendly animation functions to support model-based API, in additional to animation components for the ones who prefer the template-based way This library represents the Vue3 alternative for react-spring and react-motion.
Composition-API-friendly functions to support model-based API
The primary animation component, which is a spring-physics based. Its main role is to move property from one value to another, with more natural animation and easing.
spring
function task SpringValue
as its first argument, and SpringProps
optional as the second argument.
import { spring } from 'vue3-spring';
export default {
name: 'App',
setup() {
// If you passed to the spring a number as it's value
// it return a Vue ref object.
const mySpring = spring(100 /* [, config] */);
// To update the spring desired value
mySpring.value = 200;
return { mySpring };
},
};
import { spring } from 'vue3-spring';
export default {
name: 'App',
setup() {
// If you passed to the spring an object of values
// it return a Vue reactive object, for those values
const mySpring = spring({ x: 100, y: 20 }, { dumping: 5 });
// To update the spring desired values
mySpring.x = 200;
mySpring.y = -10;
return { mySpring };
},
};
spring
also accepts Vue reactive data type (reactive
, ref
) as its value. It will automatically update the current spring value, when the reactive values changed.
import { ref, reactive } from 'vue';
import { spring } from 'vue3-spring';
export default {
setup() {
const mouse = reactive({ x: 0, y: 0 });
const mouseSpring = spring(mouse);
// this will update mouseSpring as well
mouse.x = 5;
const singleValue = ref(0);
const singleValueSpring = spring(singleValue);
// this will update singleValueSpring as well
singleValue.value = 5;
return {
mouseSpring,
};
},
};
To config the spring physical properties, and initial values
prop | type | default | description |
---|---|---|---|
from | number |
object |
0 |
stiffness | number |
170 | spring stiffness, in kg / s^2 |
damping | number |
26 | damping constant, in kg / s |
mass | number |
1 | spring mass |
velocity | number |
0 | initial velocity |
precision | number |
2 | number of digits to round the values, increase the number to increase precision |
framesPerSecond | number |
60 | display refresh rate |
isPendulum | boolean |
false | is the animation will start agin after is dumped |
Spring value could be number
, object
, Vue reactive
object, or Vue ref
object.
type | return type | auto update | multiple values |
---|---|---|---|
number |
ref |
false | false |
object |
reactive |
false | true |
ref |
ref |
true | false |
reactive |
reactive |
true | true |
Used move property from one value to another, based on the scrolled distance.
Used to apply CSS animation class to an element, when it enters the view-port.
Components for the ones who prefer the template-based way
SpringProvider
accepts props same the spring
function
<template>
<spring-provider v-slot="{ value }" :to="positionX" :damping="10">
<div class="circle" :style="{ transform: `translateX(${value}px)` }"></div>
</spring-provider>
</template>
<script>
import { SpringProvider } from 'vue3-spring';
export default {
name: 'App',
components: { SpringProvider },
data: () => ({
positionX: 100,
}),
};
</script>
<template>
<spring-provider v-slot="{ x, y }" :to="mouse" :damping="10">
<div class="circle" :style="{ transform: `translate(${x}px, ${y}px)` }"></div>
</spring-provider>
</template>
<script>
import { SpringProvider } from 'vue3-spring';
export default {
name: 'App',
components: { SpringProvider },
data: () => ({
mouse: { x: 0, y: 0 },
}),
};
</script>
Author: ismail9k
Source Code: https://github.com/ismail9k/vue3-spring
#vuejs #vue #javascript