react-shake-it

A component for generating CSS animations at runtime.

Table of contents

1. Demo
2. Props rundown
3. Props details

Demo

Demo and playground are available here

Props rundown

| prop | required? | type | default | |-----------------|-----------|--------------------|---------| | children | + | ReactElement | | | active | | boolean |true | | horizontal | | number \| string |0 | | vertical | | number \| string |0 | | rotation | | number \| string |0 | | scale | | string |"1.0 1.0"| | opacity | | string |"1.0 1.0"| | duration | | number \| string |"400ms" | | delay | | number | | | iteratons | | string |"infinite"| | precision | | number |0.2 | | interpolator | | IInterpolateFn \|IIndividualInterpolators |interpolateRandom| | fillMode | | IInterpolateFn |"none" | | direction | | IInterpolateFn |"normal" | | timingFunction| | IInterpolateFn |"linear" |

Props details

active

Defines, whether the animation should be played. Setting this to false will return a simple <div>.

horizontal

Defines min and max horizontal translation of the animated component. Can be either:

• An integer. This defaults to pixels, and positive and negative values as boundaries.
• A string consisting of an integer and a unit (i.e. 20rem). As above, negative value is used as a lower boundary.
• A string consisting of both boundaries (i.e. -20px 30px).

vertical

Defines min and max vertical translation of the animated component. Can be either:

• An integer. This defaults to pixels, and positive and negative values as boundaries.
• A string consisting of an integer and a unit (i.e. 10rem). As above, negative value is used as a lower boundary.
• A string consisting of both boundaries (i.e. -10px 150px).

rotation

Defines min and max rotation of the animated component. Can be either:

• An integer. This defaults to degrees, and positive and negative values as boundaries.
• A string consisting of an integer and a unit (i.e. 0.1turn). As above, negative value is used as a lower boundary.
• A string consisting of both boundaries (i.e. -5deg 3deg).

scale

Defines min and max scale of the animated component. Consisits of a string of 2 numbers (i.e. 0.9 1.1) being respectively min and max value.

opacity

Defines min and max opacity of the animated component. Consisits of a string of 2 numbers (i.e. 0.9 1.1) being respectively min and max value.

duration

Defines time of the animation. Can be either:

• An integer. Defaults to ms.
• A string consisting of an integer and a unit (i.e. 1s).

delay

Time between activating the animaiton, and animation actually playing.

iterations

Number of iterations to play on activation.

precision

Length of 1 keyframe (for example 0.2 means keyframes every 20%).

interpolator

Defines way of generating new values for the animation. Can be either:

• IInterpolateFn - A function ((progress: number) => number). Input and output values are between 0.0 and 1.0.
• IIndividualInterpolators - An object, with keys h, v, s, r, o and functions described above as values. All keys are optional - unfilled values will default to interpolateRandom()

❕ Results generated by this function aren't actual animation values, they only describe the ratio between lower and higher bounds. (0 results in using lower bound, 1 results in using the higher bound). In general: keyframeValue = highBound * x + (1 - x) * lowBound, where x is the output of above mentioned function.

fillMode, direction, timingFunction

Direct CSS animation properties.

❕ Unlike regular CSS animation, the value function is linear. This is because interpolator prop provides similar, yet more extensive function.