withSequence

The withSequence modifier allows you to chain multiple animations together, executing them one after another in the order they are defined. This is useful for creating complex, multi-step animations where each step needs to be completed before the next begins.

Syntax

withSequence(...animations: Animation[]) => Descriptor

Parameters

• ...animations: A series of animation descriptors (withSpring, withTiming, withDecay, etc.) that will be executed sequentially.

Example

This example shows how to chain multiple animations together using withSequence. It demonstrates how different types of animations— spring, timing, delay, and decay—can be stitched together into one continuous flow.

import React from 'react';
import {
  useValue,
  animate,
  withTiming,
  withSequence,
  withSpring,
  withDelay,
  withDecay,
} from 'react-ui-animate';

export default function BasicExample() {
  const [obj, setObj] = useValue({ x: 0, y: 0, width: 100, height: 100 });

  return (
    <>
      <button
        onClick={() =>
          setObj(
            withSequence(
              [
                withSpring({ x: 100, y: 100 }),
                withTiming({ width: 200, height: 200 }),
                withDelay(1000),
                withTiming({ x: 0, y: 0 }, { duration: 3000 }),
                withDecay(0.5),
              ],
              {
                onStart() {
                  console.log('obj sequence started');
                },
                onComplete() {
                  console.log('obj sequence completed');
                },
              }
            )
          )
        }
      >
        Start
      </button>
      <button onClick={() => setObj({ x: 0, y: 0, width: 100, height: 100 })}>
        Reset
      </button>

      <animate.div
        style={{
          width: obj.width,
          height: 100,
          backgroundColor: 'teal',
          left: 0,
          top: 0,
          translateX: obj.x,
          translateY: obj.y,
          borderRadius: 4,
        }}
      />
    </>
  );
}

Open Sandbox

What Happens Here:

1. Springs to position (100, 100) smoothly (withSpring).
2. Then resizes its width & height to (200, 200) with a linear timing (withTiming).
3. Then it waits for 1000ms (withDelay).
4. Then moves back to the starting position (0, 0) over 3000ms (withTiming).
5. Finally, it applies decay animation on all properties (withDecay), causing them to slow down naturally based on momentum.