Reanimated 2 withSpring Options and Their Meanings

In this post we will look at the withSpring hook and it’s options from reanimated 2. To get the result that you want you need to have a good understanding of all the options. Because they go hand in hand.

Animation is the one of the coolest and also at the same time it is the hardest part of programming. At once writing CSS animation is a little bit easy but when it comes to react native. Oh god, it is the whole new paradigm.

And because of that there are a whole lot of libraries and frameworks to support you to write react native animations. Even though they are here to help us, I don’t know why these libraries feel more confusing to me.

Soooo, that is why whenever I understood anything from these complex topics. I write these posts to help people like me.

What is withSpring?

Obesely it’s a hook, a special method provided by Reanimated API 2. We can use this hook to simulate spring-like animation. By default it will create this kind of animation but the confusion starts when it comes to work with it’s configuration options.

Image source official reanimated docs

So let’s look at them one by one.

• damping
• mass
• stiffness
• overshootClamping
• restDisplacementThreshold
• restSpeedThreshold

damping

First of all, here we have this option: damping. According to the documentation damping defines how the spring’s motion should be damped due to the forces of friction. The default value of this option is 10.

And if you are not from a physics background this sounds like a foreign language. If you want a more complex definition then you can visit this wikipedia link.

But let me explain this in a simple word. This option will define how long you want to run your spring animation. Lower the value the longer time it will take to stop the spring animation.

Note: if you use 0 for damping value it will never stop. It will run forever.

mass

Next we have mass. By the way this is the easiest thing in the list because it explains it in it’s own. According to the documentation: mass is an object attached to the end of the spring. The default value will be 1.

Means you can think of it as the load you are hanging at the end of your spring. Greater value means heavy mass. If you increase this value your animation will behave like you are hanging a bulky object to your spring.

Lower value will give your spring free move. Because obesely we are decreasing the size of mass from the spring.

stiffness

Next we have stiffness. Like always as per docs, “the spring stiffness coefficient”. Default value is 100. And it means how stiff or in other word how hardness that you want in your spring animation.

You can control the suppleness of your spring or in a simple word you can define how springy you want your spring to be. Lower the value less bouncier or less springy higher the value much bouncier or springy.

overshootClamping

Next in the list we have overshootClamping. Basically with this option you can clamp your animation. Means, spring is not like other animation. Spring overshots the value.

Like if you have a spring animation with value 20 means to create spring animation your animation value will play under and over 20. To give us that bouncy springy look.

So if you set this option to true it will not go beyond 20. Means it will clamp it right at the final value. But it will turn your supplement spring into a strut stick. So, use it wisely. That is why the default value is false.

restDisplacementThreshold

Ok next and that is restDisplacementThreshold. The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. Oh yes I copied it from the docs.

In a simple word this is the threshold or specific point (in pixel) in which your animation should be displaced or go to rest. Default is 0.01 to get smoother landing or end if you use higher value as restDisplacementThreshold your animation will stop as soon as it hits the threshold.

restSpeedThreshold

Ok here is the thing next we have restSpeedThreshold. And I seriously don’t know what this is? According to docs this is the speed at which the spring should be considered at rest in pixels per second. Default 0.001.

But I didn’t find any change while I increase or decrease this value. So that’s the overall options which you can use inside your withSpring hook. Here is the little demo of wrong input value with the options that we discussed above.

1// source code
2const App = () => {
3  const inputStyleValue = useSharedValue(0);
4
5  const rotateBox = () => {
6    inputStyleValue.value = withSequence(
7      withTiming(-10, {duration: 50}),
8      withSpring(0, {
9        damping: 8,
10        mass: 0.5, 
11        stiffness: 1000,
12        restDisplacementThreshold: 0.1,
13      }),
14    );
15  };
16
17  const inputStyle = useAnimatedStyle(() => {
18    return {
19      transform: [{translateX: inputStyleValue.value}],
20    };
21  });
22
23  return (
24    <View style={styles.container}>
25      <Animated.View style={[styles.inputContainer, inputStyle]}>
26        <TextInput style={styles.input} placeholder="E-mail" />
27      </Animated.View>
28      <View style={{marginTop: 50}}>
29        <Button onPress={rotateBox} title="Login" />
30      </View>
31    </View>
32  );
33};
34

Post by @fullstackniraj