v-hero
is a Vue.js library that provides a directive to create in-between route animation for any element in your web application. Right now specific in enter animation.
v-hero
use FLIP technique to animate element to get performant animation and only take about ~2kb. in size.
npm install v-hero
import { createApp } from "vue";
import Hero from "v-hero";
app.use(Hero);
set v-hero id to be the same in every route, if v-hero detect the same id, it'll try to animate element when enter route.
<!-- page1.vue -->
<div v-hero="{id: 'mango'}">
<img src="mango.jpg" alt="mango" />
</div>
<!-- page2.vue -->
<div v-hero="{id: 'mango'}">
<!-- your content doesn't have to be the same as page1 -->
<img src="mango.jpg" alt="mango" />
</div>
<!-- page3.vue add more option -->
<div
v-hero="{
id: 'mango',
easing: 'spring'
}"
>
<img src="mango.jpg" alt="mango" />
</div>
easing can be easing function and special 'spring' easing.
Stiffness, damping and mass is only effect when easing is 'spring'.
v-hero="{
id: 'id',
easing: 'cubic-bezier(0.4,0,0.2,1)',
duration: 300,
stiffness: 250,
damping: 20,
mass: 1,
delay: 0,
}"
If you want to add enter animation use enter option. Set any of this options (x, y, scale, rotate, opacity) under enter option. Set the value of start animation relative to position of element.
v-hero="{
enter: {
x: 10,
y: -20,
scale: 0.12,
rotate: 180,
opacity: 0.2,
easing: 'cubic-bezier(0.4,0,0.2,1)',
duration: 300,
stiffness: 250,
damping: 20,
mass: 1,
delay: 0,
}
}"
You can use both animation by id and enter animation. When both have affect, the id animation will only take effect.
v-hero="{
id: 'id',
easing: 'cubic-bezier(0.4,0,0.2,1)',
duration: 300,
stiffness: 250,
damping: 20,
mass: 1,
delay: 0,
enter: {
x: 10,
y: -20,
scale: 0.12,
rotate: 180,
opacity: 0.2,
easing: 'spring',
duration: 300,
stiffness: 250,
damping: 20,
mass: 1,
delay: 0,
}
}"