React-motion 101: Springs – Bjorn Holdt – Medium

React-motion 101: Springs  #reactjs #reactmotion #javascript #react #animation #reactjs

  • Box 2 is different.
  • Instead the law of physics, in particular a spring, was used to create the animation.
  • You can tell a spring was used because towards the end of the animation, it takes a while for the box to settle into its final position.
  • Box 1, 3 and 4 animation will look a bit jarring if we interrupt it.
  • Box 2 on the other hand handles the change gracefully and naturally springs into its new position (play around with these values on codepen)Stiffness and damping to change animationIn a spring animation, there are two variables you can control: stiffness and damping.

Boxes 1, 3 and 4 all used different timing functions (ease-in, ease-out, linear). However, they were all timed animations set to run for 500ms. Box 2 is different. The animation wasn’t set to run for…

@ReactDOM: React-motion 101: Springs #reactjs #reactmotion #javascript #react #animation #reactjs

Which one is the odd one out?

Boxes 1, 3 and 4 all used different timing functions (ease-in, ease-out, linear). However, they were all timed animations set to run for 500ms.

Box 2 is different. The animation wasn’t set to run for a certain time. Instead the law of physics, in particular a spring, was used to create the animation. You can tell a spring was used because towards the end of the animation, it takes a while for the box to settle into its final position. The difference becomes even more apparent if we interrupt the animation. Box 1, 3 and 4 animation will look a bit jarring if we interrupt it. Box 2 on the other hand handles the change gracefully and naturally springs into its new position (play around with these values on codepen)

In a spring animation, there are two variables you can control: stiffness and damping. Changing these two variables will result in a different feel to the animation.

Stiffness defines how strong the object is pulled towards its final value.

Damping is the friction the object will encounter as it gets pulled towards its target.

Changing these two values will result in a completely different feel to an animation.

Let’s look at a couple of examples of using a spring animation with react-motion. We will just change one property of a div to create a variety of animation effects.

Using the same principles as above, except that we change the rotation of the box instead of the scale.

Timed animations have their place and are often the first thing we look for when creating animations. Spring based animations are a good alternative for many of these types of animations. They deal much better with interruptions to the animations, don’t resort to needing to hard code duration and timing functions of animations.

React-motion 101: Springs – Bjorn Holdt – Medium