lit-forest / React Magic
Licence: mit
A collection of magic animations for react components.
Stars: ✭ 264
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Magic
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 346 (+31.06%)
Mutual labels: css-in-js, css-animations
Jsxstyle
Inline style system for React and Preact
Stars: ✭ 1,990 (+653.79%)
Mutual labels: css-in-js, inline-styles
A Journey Toward Better Style
A Journey toward better style
Stars: ✭ 245 (-7.2%)
Mutual labels: css-in-js, inline-styles
Polished
A lightweight toolset for writing styles in JavaScript ✨
Stars: ✭ 7,074 (+2579.55%)
Mutual labels: css-in-js, inline-styles
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+113.64%)
Mutual labels: css-animations, css-in-js
styled-jsx-plugin-sass
Plugin to add Sass support to styled-jsx.
Stars: ✭ 20 (-92.42%)
Mutual labels: css-in-js
caravel mpw-one
Caravel is a standard SoC hardness with on chip resources to control and read/write operations from a user-dedicated space.
Stars: ✭ 130 (-50.76%)
Mutual labels: magic
react-native-css-in-js-benchmarks
CSS in JS Benchmarks for React Native
Stars: ✭ 46 (-82.58%)
Mutual labels: css-in-js
esp-homekit-rgbw-strip
A homekit firmware for a magic home RGBW controller
Stars: ✭ 14 (-94.7%)
Mutual labels: magic
skelet
Skelet.css a contemporary CSS framework. The basics to get started.
Stars: ✭ 69 (-73.86%)
Mutual labels: css-animations
learn-css-animation
Learn CSS animation with fun. It is simple, easy to use, and fun to learn.
Stars: ✭ 54 (-79.55%)
Mutual labels: css-animations
isotope
UI library that aims to bring simplicity and intuitiveness back to Web Development. 🚀
Stars: ✭ 52 (-80.3%)
Mutual labels: css-in-js
php-traits
A collection of (more or less) useful traits for PHP7.2+
Stars: ✭ 17 (-93.56%)
Mutual labels: magic
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].