Vue animation example
Vue Page Transition: Slide and Fade Between Routes
Vue's <Transition> makes route animations possible; choosing the motion is the hard part. This example uses direction-aware slides: going to a later tab, the page exits left and the new one enters from the right, and going back reverses it. The bottom tab indicator slides along with the pages.
- 4.5 KB file
- 4 live inputs
- Vue runtime
How this slide and fade route transition works
- Direction comes from comparing the new tab index with the old one.
- The outgoing page moves 30% of the width and fades; the incoming page moves the full distance, which reads as depth.
- Tab changes fire "navigate" so you can keep vue-router in sync.
Add it to your Vue app
Install exodeui-vue, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
<script setup>
import { ExodeUICanvas } from 'exodeui-vue';
const onTrigger = (name) => {
// fires: 'navigate'
};
</script>
<template>
<ExodeUICanvas
src="/vue-page-transition.exode"
fit="Layout"
@trigger="onTrigger"
style="width: 100%; height: 720px"
/>
</template>Inputs
| Input | Type | Default | Range |
|---|---|---|---|
tabs | Text | Feed,Search,Library,Profile | — |
accent | Text | #42b883 | hex colour |
ink | Text | #1f2937 | hex colour |
bg | Text | #ffffff | hex colour |
Events: navigate
More Vue animations
Bouncing Dots SpinnerThree dots bouncing with real gravity, squashing on landing, with shadows that shrink as they rise.Starfield Parallax HeroA space hero with three star layers, a planet and a rocket moving at different depths.Odometer CounterAn odometer counter whose digits roll independently on springs to each new value.
The same idea in other frameworks: React shared element transition · Flutter hero product transition · JavaScript curtain wipe transition