Super easy magic-move transitions for Vue apps
Switch branches/tags
Nothing to show
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Fix typo in name of browser build 😢 Feb 14, 2018
dist remove unused code Apr 4, 2018
examples Update example code Apr 4, 2018
src remove unused code Apr 4, 2018
.babelrc initial commit Feb 9, 2018
.gitignore Revert "(docs) move examples into repo" Feb 11, 2018
.npmignore Add npmignore Feb 14, 2018 Create Apr 4, 2018 Update logo in README Apr 15, 2018
package.json v0.0.12 Apr 4, 2018
yarn-error.log bump rollup version Apr 4, 2018
yarn.lock bump rollup version Apr 4, 2018


Super easy magic-move transitions for Vue apps, powered by Ramjet

npm version

Project Install

# npm
npm install vue-overdrive
# yarn
yarn add vue-overdrive



1) Morph Shapes (source)

Shape morph

2) Material-esque transformation (source)

Material transformation

3) iOS-inspired icon effect (source)

iOS icon effect

What is it?

A Vue.js port of the amazing React Overdrive, using Ramjet under the hood.

How does it work?

Just like with React Overdrive, wrap any two elements in a component. Add the same id to create a transition between the elements.

Import and install

import Overdrive from 'vue-overdrive'


import { VOverdrive } from 'vue-overdrive'

// Register the component locally
components: {
  'overdrive': VOverdrive

Set up (at least) two different routes with Vue Router

Inside your routes file –

  path: '/circle',
  name: 'Circle',
  component: Circle
  path: '/rectangle',
  name: 'Rectangle',
  component: Rectangle 

Scaffold your components

In Circle.vue:

  <overdrive id="element" :easing="easing" :duration="350">
    <div class="circle"></div>

import * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!
export default {
  name: 'el-circle',
  data () {
    return {

<style scoped>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    float: left;

And in Rectangle.vue

  <overdrive id="element">
    <div class="rectangle"></div>

Usage with v-if

If you're not using Vue Router (and instead using Vue's built-in v-if directive), be sure to specify a unique key prop on each instance of <overdrive>

<overdrive key="a" id="window" :duration="450" v-if="!windowOpen">
  <!-- some element -->
<overdrive key="b" id="window" :duration="450" v-if="windowOpen">
  <!-- some element -->

Customize it (API)

Prop Description Default Value
id Required. A unique string or number to identify the component.
tag Wrapping element type div
duration Animation duration (in milliseconds) 250
easing Easing Function (must pass a function) ramjet.linear
Event Description
@animation-end Fires once the ramjet animation has completed


  • Minimize the jank (especially with v-if)
  • Find a non-Vuex solution for state management