• Stars
    star
    684
  • Rank 66,068 (Top 2 %)
  • Language Vue
  • Created almost 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Super easy magic-move transitions for Vue apps

Heads up!

The fate of this repo is uncertain. I recommend using my new library, vue-flip-toolkit for all of your magic-move transition needs.

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

Warning!

Currently, vue-overdrive isn't able to morph between shapes with percentage-based border-radius values. You'll need to use a pixel-based value, or you'll get a nasty TypeError. The issue is being tracked here: Rich-Harris/ramjet#57

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

More Repositories

1

vue-flip-toolkit

A Vue.js port of the wonderful react-flip-toolkit by @aholachek
Vue
303
star
2

vue-storybook

Custom <story> blocks for Vue single file components
JavaScript
149
star
3

use-gauge

A headless React hook for building beautiful gauge charts.
TypeScript
63
star
4

tailwind-fancy-tab

Headless UI tabs treated with a futuristic visual design
TypeScript
52
star
5

vue-elucidate

A library for documenting Vue components
Vue
34
star
6

react-comparison-slider

A keyboard accessible "before & after" component for React ⬅️➡️
TypeScript
33
star
7

prototyping-playbook

A winner's guide to prototyping in the browser
CSS
27
star
8

gatsbygram

A Gatsby.js clone of Pentagram's website
JavaScript
20
star
9

vue-grid-styled

Lightweight set of functional grid components
JavaScript
17
star
10

styleguide-boilerplate

A project to help Designers build living styleguides with Sass and Hologram.
CSS
17
star
11

parcel-craft-example

A Craft CMS + ParcelJS Website
JavaScript
16
star
12

react-overflow-list

A headless React component that lets you control how visible and overflown items are rendered 👀
TypeScript
12
star
13

vue-storybook-example

Vue
11
star
14

inboxclone

JavaScript
9
star
15

statamic-mapbox-address

PHP
9
star
16

webmentions

A Webmentions Tag for Statamic V3
Vue
8
star
17

location

A Location Autocomplete Field for Statamic V3
Vue
5
star
18

flat-data-to-ts

TypeScript
4
star
19

remix-github

TypeScript
4
star
20

badger

Badge generator powered by Satori 🪪
TypeScript
4
star
21

duckb-browser-block

A GitHub Next Folder Block for querying flat data in your repository
TypeScript
3
star
22

runway-cli

JavaScript
3
star
23

vscode-toolkit-ui-react

TypeScript
2
star
24

package-json-badge-block

TypeScript
2
star
25

airtable-clone

JavaScript
2
star
26

tusi

TypeScript
1
star
27

sentry-next-example

JavaScript
1
star
28

use-auto-scroll

TypeScript
1
star
29

quill-image-resize-interact

JavaScript
1
star
30

styleguide-block

TypeScript
1
star
31

labs-design-yeoman

Custom Yeoman project for Labs Designers
CSS
1
star
32

observable-plot-tooltip

TypeScript
1
star
33

directory-size-block

Visualizes the sizes of files in a directory
TypeScript
1
star
34

codeowners-block

A GUI for authoring and editing CODEOWNERS files
TypeScript
1
star
35

streeteasy-ads

Build your very own "Find Your Place" Streeteasy Ad
JavaScript
1
star
36

tailwindcss-stack-plugin

A Tailwind plugin for custom "stack" utility classes
JavaScript
1
star