DEV Community

Pooya Goodarzi
Pooya Goodarzi

Posted on

Page Transition Animations With Vue-Transify 1.2.0

Vue-Transify just got a major upgrade!
With version 1.2.0, we’re introducing Page Transition Animations — a simple, elegant way to animate your route changes in Vue 3 using vue-router.

Version 1.2.0 brings route-based animations through a built in component <PageTranstionHelper/>
It's built on top of vue-router and lets you animate between pages with a single tag and no extra setup or config.

<template>
  <PageTransitionHelper mode="out-in" :duration="1000" />
</template>
Enter fullscreen mode Exit fullscreen mode

You just place this line instead of <router-view/> and you got yourself transitions for every page. Stay and I show you what is under the hood.

⚙️ Route-based Custom Animations
First let's see how you can select the animation you want for each route.
This is your router index.js

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
})

Enter fullscreen mode Exit fullscreen mode

So you can add animations to each route using the meta fields and the transition will automatically be added to your router-view.

🧩 Dependency
Page transitions use vue-router for their logic but if you don't want them in your project it's totally up to you as the vue-router package is an optional dependency in Vue-Transify

🧠 Update in a nutshell
With Vue-Transify 1.2.0, you can now:

Animate route changes cleanly, without boilerplate.

Reuse the same library for component and page transitions.

Keep your code semantic and minimal.

And to see the transitions in action be sure to visit the Demo Website.

🚀 Quick Start
For a quick start please checkout the documentation in github

✨ Final Thoughts
Vue-Transify started as a simple idea — making transitions elegant and effortless for Vue developers.
With this new release, it’s evolving into a complete animation toolkit for Vue 3.

If you like the project, your support could mean a lot
⭐ star it on GitHub and help it grow → repo

Top comments (0)