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.
How to work with tailwindcss? Try tailwindcss-magic.
A demo is available on the Github Pages webpage for react-magic Check out demo!
React-magic is distributed via npm:
npm install --save react-magic
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;.
├── 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
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent