Skip to content
A collection of magic animations for react components.
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
dist
examples
lib
src
.babelrc
.gitignore
.npmignore
LICENSE
README.md
package-lock.json
package.json
webpack-production.config.js

README.md

react-magic

npm version react react react

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

You can’t perform that action at this time.