Vue-Transify v1.3.0

2 hours ago 1

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

<Fade :duration="600" :appear="true"> <p v-if="show">✨ Hello World from Fade Animation !</p> </Fade> </div> </template> <script setup> import { ref } from 'vue' // Import the component import { Fade } from "vue-transify"; const show = ref(true) </script> "><template> <div style="padding: 2rem"> <button @click="show = !show">Toggle Fade</button>  <Fade :duration="600" :appear="true"> <p v-if="show">✨ Hello World from Fade Animation !</p> </Fade>  </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).

🧩 Page Transitions V-1.2.0

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

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> '><template>  <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 💚

Read Entire Article

Vue-Transify v1.3.0

🧩 Page Transitions V-1.2.0

Related

Show HN: Golden Ratio App

Ask HN: CRM/ERP – Free Open Source

Ask HN: Anyone here building tools that help founders raise ...