react-shake-it v1.0.13

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

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.