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

SHARE ON: