https://github.com/jcblw/react-vct

React VCT (Visual Continuity Transitions) is a component to help make cool element to element transitions easier
https://github.com/jcblw/react-vct

Last synced: 16 days ago
JSON representation

React VCT (Visual Continuity Transitions) is a component to help make cool element to element transitions easier

• Host: GitHub
• URL: https://github.com/jcblw/react-vct
• Owner: jcblw
• Created: 2016-06-26T09:00:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-12T14:13:54.000Z (over 7 years ago)
• Last Synced: 2024-10-11T14:39:00.674Z (about 1 month ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React VCT

### Visual Continuity Transitions

This set of components attempts to make doing visual continuity transitions easier.

[**what is visual continuity transitions**](https://material.google.com/motion/choreography.html#choreography-continuity)

> This is very alpha plz use with caution

> These animation are hard! This component does a lot to try to ease the pain of making these animation but is not a one size fits all solution.

### Usage

There are two main components that will need to be used to get basic animations setup.

#### Stage

The stage is the wrapper & controller of the animation. It has the initial and target components inside of it as refs. To apply a `` to your components use the decorator pattern. eg.

```javascript

import {Stage} from 'react-vct'

@Stage({timeout: 500}) // timeout eg transition time

class MyComponent extends Component {

  render () {

    return (

      


        
Foo

      

    )

  }

}

// can also use ES5 like this

const StagifiedComponent = Stage()(MyComponent)

```


That sets the stage for animations, but we cannot make animations without the next component `Actors`.

#### Actors

Actors are the components that will be transitioned from/to on the stage. You will need at least two actors to transition between. To apply the `` to your components the same pattern is used as the `Stage` component.

```javascript

import {Actor} from 'react-vct'

@Actor()

class Card extends Component {

  render () {

    return (

      


        
Bar

      

    )

  }

}

```


Now you should be ready to animate!

#### transitionOf

Using the Stage component to decorate your component will give the decorated component access to a method called `transitionOf`. The `transitionOf` takes two component instances, eg refs, and will create a transition between the two.

```javascript

import {Stage} from 'react-vct'

import Card from './Card'

@Stage({timeout: 500}) // timeout eg transition time

class MyComponent extends Component {

  onClick (ref, ref2) {

    return () => {

      this.props.transitionOf(

        this.refs[ref],

        this.refs[ref2]

      )

    }

  }

  render () {

    return (

      


        

        

      

    )

  }

}

```


This is the most basic setup, and should allow you to see how to setup a basic animation with `react-vct`