react-magic

A collection of magic animations for react components. Although React provides a way to implement arbitrary animations, it is not an easy task to do it, even for simple animations. That's where react-magic package comes in. It supports inline styles work with aphrodite. Most animations was implemented base on magic.

Demo online

A demo is available on the Github Pages webpage for react-magic Check out demo!

Installation

React-magic is distributed via npm:

npm install --save react-magic     

Usage

You can import each animation directly from the main package

import { swap } from 'react-magic'

or you can import a specific animation directly

import swap from 'react-magic/lib/magic/swap'

usage with Aphrodite

import React, { Component, PropTypes } from 'react'; import { StyleSheet, css } from 'aphrodite';  import { swap } from 'react-magic';  const styles = StyleSheet.create({     magic: {         animationName: swap,         animationDuration: '1s'     } });  class App extends Component {     render() {         return (             <div>                 <div className={css(styles.magic)}>                     <h2>react-magic</h2>                 </div>             </div>         );     } }  export default App;   

Animations

. ├── magic │   |── magic      │   |── twisterInDown            │   |── twisterInUp          │   └── swap     ├── bling                          │   |── puffIn              │   |── puffOut             │   |── vanishIn                            │   └── vanishOut                      ├── staticEffects                          │   |── openDownLeft              │   |── openDownLeftReturn             │   |── openDownRight        │   |── openDownRightReturn     │   |── openUpLeft     │   |── openUpLeftReturn     │   |── openUpRight                         │   └── openUpRightReturn                 ├── staticEffectsOut                          │   |── openDownLeftOut              │   |── openDownRightOut             │   |── openUpLeftOut                            │   └── openUpRightOut      ├── perspective                          │   |── perspectiveDown              │   |── perspectiveDownReturn             │   |── perspectiveLeft        │   |── perspectiveLeftReturn   │   |── perspectiveRight     │   |── perspectiveRightReturn     │   |── perspectiveUp                         │   └── perspectiveUpReturn               ├── rotate                          │   |── rotateDownIn              │   |── rotateDownOut             │   |── rotateLeftIn        │   |── rotateLeftOut   │   |── rotateRightIn     │   |── rotateRightOut     │   |── rotateUpIn                         │   └── rotateUpOut                ├── slide                          │   |── slideDown              │   |── slideDownReturn             │   |── slideLeft        │   |── slideLeftReturn   │   |── slideRight     │   |── slideRightReturn     │   |── slideUp                         │   └── slideUpReturn             ├── math                                 │   |── foolishIn        │   |── foolishOut   │   |── holeIn     │   |── holeOut     │   |── swashIn                         │   └── swashOut      ├── tin                          │   |── tinDownIn              │   |── tinDownOut             │   |── tinLeftIn        │   |── tinLeftOut   │   |── tinRightIn     │   |── tinRightOut     │   |── tinUpIn                         │   └── tinUpOut      ├── bomb │   |── bombLeftOut            │   └── bombRightOut            ├── boing │   |── boingInUp            │   └── boingOutDown      ├── space                          │   |── spaceInDown              │   |── spaceInLeft             │   |── spaceInRight        │   |── spaceInUp   │   |── spaceOutDown     │   |── spaceOutLeft     │   |── spaceOutRight                         │   └── spaceOutUp          

License

MIT