Vue Transify is a lightweight animation library built on top of Vue’s native <Transition> component — making it powerful, easy to use, and fully customizable.
With flexible props and Quality Animations for fine-tuning, Vue Transify makes it effortless to bring your Vue components to life.
Try out the animations now ! : Demo Playground
- ✅ Built directly on top of Vue’s core
<Transition>component - ✅ Zero dependencies — just Vue
- ✅ Simple prop-based customization (duration, delay, easing, etc.)
- ✅ Works seamlessly with Vue 3
- ✅ Lightweight — less than 2KB gzipped
- ✅ Open for contributions & custom animation extensions
# npm
npm install vue-transify-First Import the styles into you main.js
import { createApp } from 'vue'
import App from './App.vue'
import "vue-transify/dist/vue-transify.css";
createApp(App).mount('#app')-Then you can import each animation as a component in your files and use it
<template>
<div style="padding: 2rem">
<button @click="show = !show">Toggle Fade</button>
<!-- Use the component -->
<Fade :duration="600" :appear="true">
<p v-if="show">✨ Hello World from Fade Animation !</p>
</Fade>
<!-- Use these props to change the behavior of your animation -->
</div>
</template>
<script setup>
import { ref } from 'vue'
// Import the component
import { Fade } from "vue-transify";
const show = ref(true)
</script>
-Library is fully prop based so you can customize the animations based on your need
| Prop | Type | Default | Description |
|---|---|---|---|
| appear | boolean |
'false' |
If true animation will run on load |
| duration | number |
500 |
Duration of the animation in milliseconds. |
| delay | number |
0 |
Delay before the animation starts in milliseconds. |
| easing | string |
'ease' |
CSS easing function to control the transition curve(CSS acceptable timing functions). |
| iteration | string , number |
5 |
Number of time an animation would run based on CSS iteration-count(Only Attention Animations). |
Vue-Transify new update brgins route-based animations through a built in component called <PageTransitionHelper/>
it's built on top of vue-router
No extra setup no extra configs
<template>
<!--This component replaces the <router-view> in your app -->
<PageTransitionHelper mode="out-in" :duration="1000" />
</template>
<script setup>
//You need to import the animation you want to use in the app
import {SlideInDown} from "vue-transify"
import { PageTransitionHelper } from "vue-transify";
</script>
And Boom ! Now you have animations on each route change
⚙️ Change What Animation Each Route Has
You can add animations to each route using the meta fields and the transition will automatically be added to your router-view.
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'
const routes = [
{
path: '/',
component: HomeView,
meta: { transition: 'fade' }
},
{
path: '/about',
component: AboutView,
meta: { transition: 'slideInUp' }
}
]
export default createRouter({
history: createWebHistory(),
routes
})
Contributions are welcome ! If you’d like to add a new animation, improve docs, or fix a bug:
- Fork the repository.
- Create your feature branch.
git checkout -b feat/animation-name- Commit your changes.
- Push to your brach.
- Open a PR
-💡 Before submitting, make sure your code follows the existing structure and passes any lint or build checks.Be sure to follow the naming convetion.
-All Vue files and animations use PascalCase -All Class prefixes use the camelCase
If you like Vue Transify, please consider supporting the project:
- ⭐ Star the repo on GitHub — it helps others discover the library
- 🐞 Open an issue or suggest new features
- 🧩 Share it with other Vue developers and the community
Your support helps keep the project active and growing 💚