Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Sylvenas/react-magic
A collection of magic animations for react components.
https://github.com/Sylvenas/react-magic
animation css-animations css-in-js inline-styles magic react
Last synced: 3 months ago
JSON representation
A collection of magic animations for react components.
- Host: GitHub
- URL: https://github.com/Sylvenas/react-magic
- Owner: Sylvenas
- License: mit
- Created: 2017-02-19T11:04:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-21T03:43:15.000Z (over 2 years ago)
- Last Synced: 2024-04-14T05:10:53.404Z (7 months ago)
- Topics: animation, css-animations, css-in-js, inline-styles, magic, react
- Language: JavaScript
- Homepage: https://sylvenas.github.io/react-magic
- Size: 1.02 MB
- Stars: 268
- Watchers: 8
- Forks: 27
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-magic
[](https://www.npmjs.com/package/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](https://github.com/Khan/aphrodite).
Most animations was implemented base on [magic](https://github.com/miniMAC/magic).
> How to work with [tailwindcss](https://tailwindcss.com/)? Try [tailwindcss-magic](https://github.com/Sylvenas/tailwindcss-magic).
## Demo online
A demo is available on the Github Pages webpage for react-magic [Check out demo](https://lit-forest.github.io/react-magic/react-magic.html)!
## Installation
React-magic is distributed via [npm](https://www.npmjs.com/package/react-magic):
```
npm install --save react-magic
```
## Usage
You can import each animation directly from the main package
```js
import { swap } from "react-magic";
```
or you can import a specific animation directly
```js
import swap from "react-magic/lib/magic/swap";
```
usage with [Aphrodite](https://github.com/Khan/aphrodite)
```js
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 (
react-magic
);
}
}
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