reshake
CSShake as a React Functional Component.
Playground :: Blog Post (ES)
npm i --save reshake styled-components
Full customizable way
import React from 'react'
import { Shake } from 'reshake'
const MyShake = () => (
<Shake h={10} v={0} r={3}>
Brrr...
</Shake>
)Available props:
| Prop | Desc | Type | Default | Result unit |
|---|---|---|---|---|
h |
max horizontal | Number |
5 | px |
v |
max vertical | Number |
5 | px |
r |
max rotation | Number |
5 | deg |
dur |
complete animation cycle duration | Number |
300 | ms |
q |
iterations quantity | Number String |
'infinite' | |
tf |
CSS animation-timing-function |
String |
'ease-in-out' | |
int |
interval between each @keyframe, a kind of fine tuning for the animation |
Number |
10 | % |
max |
max @keyframe value, in case other than 100% creates a pause in the animation |
Number |
100 | % |
orig |
CSS transform-origin |
String |
'center center' | |
fixed |
fixed animation | Boolean |
false |
|
freez |
pause in the animation when interacting | Boolean |
false |
|
active |
active the animations | Boolean |
true |
|
trigger |
CSS pseudo-class which interacts with animation | String |
true |
|
fixedStop |
Allows to stop the animation with trigger when animation is fixed |
String |
false |
Easy way with defaults:
import React from 'react'
import { ShakeLittle, ShakeSlow, ShakeHorizontal } from 'reshake'
const MoreShakes = () => (
<div>
<ShakeLittle>Tiny brrr...</ShakeLittle>
<ShakeSlow>SlowMo ving...</ShakeSlow>
<ShakeHorizontal>
<span>✋</span>
</ShakeHorizontal>
</div>
)Available Components:
<ShakeLittle /><ShakeSlow /><ShakeHard /><ShakeHorizontal /><ShakeVertical /><ShakeRotate /><ShakeCrazy />
All components accept also the same props as <Shake />. The defaults could be imported as
import { shakes } from reshake