withSpring

Learn spring animations with withSpring.

withSpring

withSpring provides a physical spring animation. It does not go linearly to the target; it bounces like a spring. It is ideal for button presses, card pulls and drag-and-drop that need a natural feel.

Example: offset.value = withSpring(100). Default parameters give a soft spring behavior. With configuration you can adjust damping, stiffness and mass. A low damping bounces more; a high damping settles with less bounce.

Spring behavior

The spring animation works by physics rules. The lower the damping the more the spring bounces. stiffness sets the spring stiffness; mass sets the mass of the moving object. For a soft card animation a low stiffness and medium damping are common.

Example: withSpring(100, { damping: 10, stiffness: 100 }). This makes the card reach the end and bounce a bit. damping: 30 bounces less; damping: 5 bounces a lot. Finding the right feel requires playing with the values.

Exercise A withSpring animation

Import withSpring from react-native-reanimated. Write offset.value = withSpring(100, { damping: 10 }). Make a spring animation with damping 10 to 100.

Show example solution

import React from 'react';
import { useSharedValue, withSpring } from 'react-native-reanimated';

export function useSpringMove() {
  const offset = useSharedValue(0);

  function run() {
    offset.value = withSpring(100, { damping: 10 });
  }

  return { offset, run };
}

Test yourself

Match the withSpring parts

withSpring

Spring animation
damping

Damping
stiffness

Stiffness
mass

Mass

Write the damping value

withSpring(100, { damping: ____, stiffness: 100 })

Show answer

withSpring(100, { damping: 10, stiffness: 100 })

When is withSpring preferred?
- When a fixed duration is needed
- When a natural feel is needed
- When no animation is wanted
- Only for text changes
Show answer

When a natural feel is needed — withSpring is preferred for a natural feel.

Next lesson: Summary - Reanimated

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies