Super easy magic-move transitions for Vue apps
Switch branches/tags
Nothing to show
Clone or download
Permalink
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
ISSUE_TEMPLATE.md Create ISSUE_TEMPLATE.md Apr 4, 2018
README.md 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

README.md

vue-overdrive

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

Examples

Material

1) Morph Shapes (source)

https://vue-overdrive.netlify.com/#/shapes

Shape morph

2) Material-esque transformation (source)

https://vue-overdrive.netlify.com/#/libraries

Material transformation

3) iOS-inspired icon effect (source)

https://vue-overdrive.netlify.com/#/icons

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'
Vue.use(Overdrive)

or

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:

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

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

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

And in Rectangle.vue

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

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>
<overdrive key="b" id="window" :duration="450" v-if="windowOpen">
  <!-- some element -->
</overdrive>

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

Todo

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