I> Briefly introduce:

• To handle animations, we can choose the traditional way of writing css modules, write pure css, then write the logic of handling some events by events. However, we should try to choose some libraries, it makes managing animation with js code easier to manage. One library that can help that is Reacts-spring.
• It is a library of animation, animated and react-motion-inspired animation, dealing with UI-like animations like physical handling of a pendulum (block) pendulum. amount, tension of spring wire, friction with air). Because it is very light (10.7KB for web version, 9.7kb for native version. With flexible handling and support from big companies like airbnb or matterapp, the community has been enthusiastically supported since it just debuted, what are you waiting for without understanding it.

II> Start the installation to find out:

Familiar installation command: npm install react-spring

III> Learn about api for its commonly used applications:

1> The common api:

These are the api to config that all spring (hook / component) use. We use them to config to have reasonable animation, divided into the following groups (I list a few configs that feel good and can be understood, because it is a lot).

Configs:

• duration: duration of effect (default value is undefined)
• precision: accuracy
• tension: the tension, the greater the value of this animation, the more continuous it will be
• friction: the greater the friction, the higher the value of the animation, the slower the animation will appear
• mass: volume

Presets:

This is a set of values ​​for mass, tension and friction. Its default is: config.default corresponds to {mass: 1, tension: 170, friction: 26}. The other sets you can see in its docs.

Properties:

The properties used will be:

• from: (from) is the same as from in keyframe
• to (to): same as to in keyframe
• delay: pause milliseconds before starting
• config: use the config mentioned in the config section above
• reset: set to true if you want to reset every time an animation finish.
• onStart: at the beginning stage will do
• onReset: what will Interpolations do at idle stage: I see that the most common api is map, output with extrapolate. Refer here: https://www.react-spring.io/docs/hooks/api

2> Supports (unit):

• Colors (names, rgb, rgba, hsl, hsla, gradients)
• Unit (cm, mm, in, px, pt, pc)
• Relative lengths (em, ex, ch, rem, vw, vh, vmin, vmax,%)
• Measurement angle (deg, rad, grad, turn)
• Flex and grid units (fr, etc)
• All HTML attributes
• SVG paths
• Arrays
• String patterns (transform, border, boxShadow, etc)
• Non-animatable string values ​​(visibility, pointerEvents, etc)
• ScrollTop / scrollLeft

3> Some commonly used api hook handling:

React-spring has 5 commonly used hooks (writing hooks, so it is used as a custom hook). I will introduce some basic examples and some common examples of it. The hook will use with the common api was introduced earlier.

a> Use Spring:

Used with animation menu, to move (like from -> to like keyframe in css).

Some examples:

• For example, when we want the effect to slowly show the text

This example is equivalent:

Example analysis:

• We use useString as a hook, and certainly pass from and other parameters and opacity, it will return the corresponding props styles (in addition there is a set to reset the style state for the animation if you want to change when if an event occurs or stop if you want to stop animation).
• animation.h1 → render the h1 + props tag as the styles passed in → the corresponding animation
• Example of scroll effect:

This time we pass in instead of param opacity, we pass in scroll. This effect has the following result:

• Example svg drawing effect:

This time we add config delay and duration so we can see the effect slowly (config is an additional support from react-spring if we want to display it in different ways)

b) useSprings:

Similar to useSpring, however it is applied to a list of objects that we want to have almost the same effect.

c) useTrail:

If you want to handle an array of elements, you want the elements in this array to have the effect taken from the first element to the last one in turn. This effect will create successive effects, for example like this:

https://codesandbox.io/embed/zn2q57vn13?source=post_page—–636910f3abfa———————-

d) useTransition:

If you want to manage the variation of different effects: In addition to the common api, it also uses other APIs like from, enter, update, leave, etc. to manage the status on arrival, departure or cancel. The example I find best in its docs is related to page switching when react-router is combined:

https://codesandbox.io/embed/1y3yyqpq7q?source=post_page—–636910f3abfa———————-

e) useChain:

Used in conjunction with useRef to determine the object and determine the order in which the animations will be executed. As this example:

https://codesandbox.io/embed/2v716k56pr?source=post_page—–636910f3abfa———————-

4> Attention:

In addition, react-spring previously written into animation processing components has similar functions: Spring corresponds to useSpring, Transition corresponds to useTransition, Trail corresponds to useTrail. But now that most of them are used with hooks, the examples of components on github have been removed and have been switched to hook use.

IV> Conclusion:

The use of react-spring is very flexible, helping control animation with js, it helps control when to start, when to end or cancel the effect more actively. On the contrary, it can be heavier than using pure css (but only applies to the web, and some platforms are very limited). Therefore, how the animation is used depends on the level of the project, as well as what its intended purpose is.

Reference and animation refer to https://www.react-spring.io