react-spring-visualizer

What is this ?

I am a big fan of react-spring, a spring-physics based animation library. It has quickly become my go-to library for UI animation in React projects. However, as a newbie to spring-based animations, I’ve had a hard time visualizing which effect the settings would have.

So, I made this visualizer in order to help me determine the correct spring config for my animations. I hope it is of some help to someone else.

The settings.

Explanation of components of spring physics

Mass

Imagine a fixed spring with a bob on one end, the mass value is the mass of the bob (). While not technically the same, in this instance you can think of it as the weight of the bob.

The higher the mass, the longer it takes for the animation to come to a rest.

Tension

Imagine a fixed spring with a bob on one end and a certain spring length when the spring is at rest. Now pull the bob downwards; the distance between the rest position of the spring and the end of the spring is the tension ().

The higher the tension, the faster the animation will be.

Friction

Imagine a spring as before (), but there is a certain amount of friction in the air. If the friction is higher, there’s more power on the spring necessary to pull the bob to its resting position.

The higher the friction, the slower the animation will be. If the friction is low enough, it the bob will overshoot its position at rest. This creates a bouncy effect.

Precision

If the bob () bounces around its resting point, it will continue to do so for some time. The precision determines when to quit bouncing and stop the animation at the resting point.

By keeping the precision low, the animation will be more accurate and it might take longer to reach equilibrium.

Personally I haven’t found much use for this setting. Please, let me know if I’m missing something!

Velocity

Imagine pushing the bob () upwards or downwards while releasing it. The speed with which you push the bob is the velocity. Pushing downwards is a negative velocity, pushing upwards is a positive velocity.

Sometimes it’s nice to give a little negative velocity to create a sense of anticipation.

If a component is coming from off-screen, it is can be pleasant to give it a positive velocity, so it looks like the component is coming from far away.

Clamp

Imagine putting an solid barrier just above the resting position (), so the bob can not overshoot the resting position. There will be no bounce and the animation comes to a stop immediately.

You might want to use this when animating opacity, a bounce effect is probably not what you are looking for. The same goes for animating to a scale of 0, usually you don’t want to show a negative scale, which would flip the animated component.

Another use-case is when you want to move a component to off-screen, clamp it so the animation doesn’t continue while the component is off-screen.

Presets

React-spring comes with a set of sweet presets. You can select these to preview them.

Color scheme from Happy Hues bij Mackenzie Child.

16 comments

  1. Very nice post. I just stumbled upon your weblog and wished to say that I’ve really enjoyed surfing around your blog posts.
    In any case I’ll be subscribing to your rss feed and I hope you write again very soon!

  2. Howdy! Do you know if they make any plugins to protect against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard
    on. Any suggestions?

  3. I’m really enjoying the theme/design of your site. Do you ever run into any internet browser compatibility problems?
    A couple of my blog audience have complained
    about my website not operating correctly in Explorer but looks great in Chrome.
    Do you have any advice to help fix this issue?

  4. First of all I want to say terrific blog!
    I had a quick question which I’d like to ask if you don’t mind.
    I was curious to find out how you center yourself and clear your head prior to
    writing. I have had a difficult time clearing my mind in getting
    my thoughts out. I truly do enjoy writing but it just seems like the
    first 10 to 15 minutes tend to be wasted just trying to figure out how to begin. Any suggestions or
    hints? Appreciate it!

  5. Magnificent beat ! I wish to apprentice even as you amend your site,
    how could i subscribe for a blog web site? The account aided me a appropriate
    deal. I were tiny bit acquainted of this your broadcast offered vibrant clear idea

  6. Link exchange is nothing else except it is only placing
    the other person’s weblog link on your page at proper place and other person will also do same in support
    of you.

  7. Have you ever considered about adding a little bit
    more than just your articles? I mean, what you say is important
    and all. Nevertheless think of if you added some great images or
    videos to give your posts more, “pop”! Your content is excellent but with pics and video clips, this
    website could certainly be one of the greatest in its field.
    Superb blog!

  8. Hello there, just became alert to your blog through Google, and found that it is truly informative.
    I am gonna watch out for brussels. I will appreciate if you continue this in future.
    Lots of people will be benefited from your writing.
    Cheers!

  9. What’s up to all, how is everything, I think every one is
    getting more from this site, and your views are nice
    in support of new viewers.

Leave a Reply

Your email address will not be published.