├── .babelrc ├── .eslintignore ├── .eslintrc.js ├── .flowconfig ├── .gitignore ├── .npmignore ├── Procfile ├── README.md ├── demo ├── .eslintrc.js ├── app.js ├── demo.js ├── index.html ├── server.js └── webpack.config.js ├── package.json ├── src ├── __tests__ │ └── merge.spec.js ├── bounce-in-down.js ├── bounce-in-left.js ├── bounce-in-right.js ├── bounce-in-up.js ├── bounce-in.js ├── bounce-out-down.js ├── bounce-out-left.js ├── bounce-out-right.js ├── bounce-out-up.js ├── bounce-out.js ├── bounce.js ├── fade-in-down-big.js ├── fade-in-down.js ├── fade-in-left-big.js ├── fade-in-left.js ├── fade-in-right-big.js ├── fade-in-right.js ├── fade-in-up-big.js ├── fade-in-up.js ├── fade-in.js ├── fade-out-down-big.js ├── fade-out-down.js ├── fade-out-left-big.js ├── fade-out-left.js ├── fade-out-right-big.js ├── fade-out-right.js ├── fade-out-up-big.js ├── fade-out-up.js ├── fade-out.js ├── flash.js ├── flip-in-x.js ├── flip-in-y.js ├── flip-out-x.js ├── flip-out-y.js ├── flip.js ├── head-shake.js ├── hinge.js ├── index.js ├── jello.js ├── light-speed-in.js ├── light-speed-out.js ├── merge.js ├── pulse.js ├── roll-in.js ├── roll-out.js ├── rotate-in-down-left.js ├── rotate-in-down-right.js ├── rotate-in-up-left.js ├── rotate-in-up-right.js ├── rotate-in.js ├── rotate-out-down-left.js ├── rotate-out-down-right.js ├── rotate-out-up-left.js ├── rotate-out-up-right.js ├── rotate-out.js ├── rubber-band.js ├── shake.js ├── slide-in-down.js ├── slide-in-left.js ├── slide-in-right.js ├── slide-in-up.js ├── slide-out-down.js ├── slide-out-left.js ├── slide-out-right.js ├── slide-out-up.js ├── swing.js ├── tada.js ├── types.js ├── utils.js ├── wobble.js ├── zoom-in-down.js ├── zoom-in-left.js ├── zoom-in-right.js ├── zoom-in-up.js ├── zoom-in.js ├── zoom-out-down.js ├── zoom-out-left.js ├── zoom-out-right.js ├── zoom-out-up.js └── zoom-out.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "plugins": [ 4 | "transform-object-rest-spread", 5 | "transform-export-extensions" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | libs 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "node": true, 7 | "jest": true, 8 | }, 9 | "extends": [ 10 | "formidable/configurations/es6" 11 | ], 12 | "parserOptions": { 13 | "sourceType": "module" 14 | }, 15 | "plugins": [ 16 | "flowtype" 17 | ], 18 | "rules": { 19 | "no-magic-numbers": [ 20 | "off" 21 | ], 22 | "quotes": [ 23 | "error", 24 | "single" 25 | ], 26 | "max-params": [ 27 | "error", 28 | 4 29 | ] 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | /demo/.* 3 | /lib/.* 4 | /dist/.* 5 | /node_modules/.* 6 | 7 | 8 | [include] 9 | 10 | [libs] 11 | 12 | [options] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### SublimeText ### 2 | *.sublime-workspace 3 | 4 | ### OSX ### 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | Icon 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear on external disk 14 | .Spotlight-V100 15 | .Trashes 16 | 17 | ### Windows ### 18 | # Windows image file caches 19 | Thumbs.db 20 | ehthumbs.db 21 | 22 | # Folder config file 23 | Desktop.ini 24 | 25 | # Recycle Bin used on file shares 26 | $RECYCLE.BIN/ 27 | 28 | # App specific 29 | 30 | coverage 31 | node_modules 32 | bower_components 33 | .tmp 34 | lib 35 | dist 36 | npm-debug.log* 37 | *.sublime-project 38 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | test 3 | demo 4 | Procfile 5 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm run demo 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cssinjs-animations 2 | 3 | 4 | A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. CssinJS-Animations implements all animations from [animate.css](https://daneden.github.io/animate.css/). 5 | 6 | [Check out the interactive demo](http://react-animations.herokuapp.com/). 7 | 8 | ### Usage 9 | 10 | You can import each animation directly from the main package 11 | 12 | ```js 13 | import { fadeIn } from 'cssinjs-animations' 14 | ``` 15 | 16 | or you can import a specific animation directly 17 | 18 | ```js 19 | import fadeIn from 'cssinjs-animations/lib/fade-in' 20 | ``` 21 | 22 | 23 | ### Usage with Radium 24 | 25 | ```js 26 | import { bounce } from 'cssinjs-animations'; 27 | import Radium from 'radium'; 28 | 29 | const styles = { 30 | bounce: { 31 | animation: 'x 1s', 32 | animationName: Radium.keyframes(bounce, 'bounce') 33 | } 34 | } 35 | ``` 36 | 37 | ### Usage with Aphrodite 38 | 39 | ```js 40 | import { bounce } from 'cssinjs-animations'; 41 | import { StyleSheet, css } from 'aphrodite'; 42 | 43 | const styles = StyleSheet.create({ 44 | bounce: { 45 | animationName: bounce, 46 | animationDuration: '1s' 47 | } 48 | }) 49 | ``` 50 | 51 | ### Usage with JSS 52 | 53 | ```js 54 | import { bounce } from 'cssinjs-animations'; 55 | import jss from 'jss' 56 | import preset from 'jss-preset-default' 57 | 58 | jss.setup(preset()) 59 | 60 | const {classes} = jss.createStyleSheet({ 61 | '@keyframes bounce': bounce, 62 | bounce: { 63 | animationName: '$bounce', 64 | animationDuration: '1s', 65 | }, 66 | }).attach() 67 | ``` 68 | 69 | ## Animations 70 | 71 | Below is a list of all available animations 72 | 73 | `bouceOut` 74 | 75 | `bounce` 76 | 77 | `bounceIn` 78 | 79 | `bounceInDown` 80 | 81 | `bounceInLeft` 82 | 83 | `bounceInRight` 84 | 85 | `bounceInUp` 86 | 87 | `bounceOutDown` 88 | 89 | `bounceOutLeft` 90 | 91 | `bounceOutRight` 92 | 93 | `bounceOutUp` 94 | 95 | `fadeIn` 96 | 97 | `fadeInDown` 98 | 99 | `fadeInDownBig` 100 | 101 | `fadeInLeft` 102 | 103 | `fadeInLeftBig` 104 | 105 | `fadeInRight` 106 | 107 | `fadeInRightBig` 108 | 109 | `fadeInUp` 110 | 111 | `fadeInUpBig` 112 | 113 | `fadeOut` 114 | 115 | `fadeOutDown` 116 | 117 | `fadeOutDownBig` 118 | 119 | `fadeOutLeft` 120 | 121 | `fadeOutLeftBig` 122 | 123 | `fadeOutRight` 124 | 125 | `fadeOutRightBig` 126 | 127 | `fadeOutUp` 128 | 129 | `fadeOutUpBig` 130 | 131 | `flash` 132 | 133 | `flip` 134 | 135 | `flipInX` 136 | 137 | `flipInY` 138 | 139 | `flipOutX` 140 | 141 | `flipOutY` 142 | 143 | `headShake` 144 | 145 | `hinge` 146 | 147 | `jello` 148 | 149 | `lightSpeedIn` 150 | 151 | `lightSpeedOut` 152 | 153 | `pulse` 154 | 155 | `rollIn` 156 | 157 | `rollOut` 158 | 159 | `rotateIn` 160 | 161 | `rotateInDownLeft` 162 | 163 | `rotateInDownRight` 164 | 165 | `rotateInUpLeft` 166 | 167 | `rotateInUpRight` 168 | 169 | `rotateOut` 170 | 171 | `rotateOutDownLeft` 172 | 173 | `rotateOutDownRight` 174 | 175 | `rotateOutUpLeft` 176 | 177 | `rotateOutUpRight` 178 | 179 | `rubberBand` 180 | 181 | `shake` 182 | 183 | `slideInDown` 184 | 185 | `slideInLeft` 186 | 187 | `slideInRight` 188 | 189 | `slideInUp` 190 | 191 | `slideOutDown` 192 | 193 | `slideOutLeft` 194 | 195 | `slideOutRight` 196 | 197 | `slideOutUp` 198 | 199 | `swing` 200 | 201 | `tada` 202 | 203 | `wobble` 204 | 205 | `zoomIn` 206 | 207 | `zoomInDown` 208 | 209 | `zoomInLeft` 210 | 211 | `zoomInRight` 212 | 213 | `zoomInUp` 214 | 215 | `zoomOut` 216 | 217 | `zoomOutDown` 218 | 219 | `zoomOutLeft` 220 | 221 | `zoomOutRight` 222 | 223 | `zoomOutUp` 224 | 225 | 226 | ## Merge 227 | 228 | cssinjs-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations. 229 | 230 | 231 | ```js 232 | 233 | import { merge, tada, flip } from 'cssinjs-animations'; 234 | const tadaFlip = merge(tada, flip); 235 | ``` 236 | s -------------------------------------------------------------------------------- /demo/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": [ 7 | "formidable/configurations/es6" 8 | ], 9 | "parserOptions": { 10 | "ecmaFeatures": { 11 | "experimentalObjectRestSpread": true, 12 | "jsx": true 13 | }, 14 | "sourceType": "module" 15 | }, 16 | "plugins": [ 17 | "react" 18 | ], 19 | "rules": { 20 | "indent": [ 21 | "error", 22 | 2 23 | ], 24 | "linebreak-style": [ 25 | "error", 26 | "unix" 27 | ], 28 | "quotes": [ 29 | "error", 30 | "single" 31 | ], 32 | "semi": [ 33 | "error", 34 | "always" 35 | ] 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /demo/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Radium, { Style, StyleRoot } from 'radium'; 4 | import * as animations from '../lib'; 5 | 6 | import Demo from './demo'; 7 | 8 | const styles = { 9 | global: { 10 | textAlign: 'center', 11 | paddingTop: 200, 12 | body: { 13 | backgroundColor: '#e7e5e3', 14 | fontFamily: 'Whitney SSm A, Whitney SSm B, Helvetica Neue, Helvetica, Arial, sans-serif', 15 | lineHeight: 1.5, 16 | margin: 0, 17 | transform: 'translate3d(0, 0, 0)', 18 | }, 19 | p: { 20 | margin: 0, 21 | color: '#242121' 22 | }, 23 | select: { 24 | border: 'none', 25 | height: 35, 26 | fontSize: 15, 27 | fontFamily: 'inherit', 28 | width: 155, 29 | fontWeight: 'bold', 30 | }, 31 | input: { 32 | height: 35, 33 | width: 50, 34 | border: 'none', 35 | padding: '0px 5px', 36 | borderRadius: 6, 37 | fontFamily: 'inherit' 38 | }, 39 | button: { 40 | backgroundColor: 'white', 41 | outline: 'none', 42 | height: 35, 43 | border: 'none', 44 | padding: '0px 10px', 45 | borderRadius: 6, 46 | fontFamily: 'inherit' 47 | }, 48 | label: { 49 | color: '#242121', 50 | position: 'absolute', 51 | bottom: 0, 52 | fontSize: 10, 53 | }, 54 | }, 55 | container: { 56 | position: 'relative', 57 | margin: 15, 58 | height: 60, 59 | display: 'inline-block', 60 | }, 61 | swing: { 62 | transformOrigin: 'top center' 63 | }, 64 | flip: { 65 | backfaceVisibilty: 'visible', 66 | }, 67 | }; 68 | 69 | const animationNames = []; 70 | 71 | for (let key in animations) { 72 | if ( 73 | key === 'global' || 74 | key === 'merge' || 75 | key === 'container' 76 | ) { 77 | continue; 78 | } 79 | animationNames.push(key); 80 | const animation = animations[key]; 81 | styles[key] = { 82 | ...styles[key], 83 | animation: 'x', 84 | animationName: Radium.keyframes(animation, key), 85 | }; 86 | } 87 | 88 | class App extends React.Component { 89 | 90 | constructor() { 91 | super(); 92 | this.state = { 93 | animation: 'bounce', 94 | library: 'Radium', 95 | }; 96 | this.duration = 1; 97 | this.selectAnimation = this.selectAnimation.bind(this); 98 | this.onDurationChange = this.onDurationChange.bind(this); 99 | this.triggerAnimation = this.triggerAnimation.bind(this); 100 | } 101 | 102 | selectAnimation({ target }) { 103 | this.setState({ animation: target.value }); 104 | } 105 | 106 | onDurationChange({ target }) { 107 | // Track duration outside of state, as we don't 108 | // want duration changes to trigger a render. 109 | this.duration = parseFloat(target.value); 110 | } 111 | 112 | triggerAnimation() { 113 | const { animation } = this.state; 114 | this.setState({ animation: '' }, () => { 115 | this.setState({ animation }); 116 | }); 117 | } 118 | 119 | render() { 120 | const { animation } = this.state; 121 | return ( 122 | 123 |
124 |