Skip to main content
Version: next

withSequence

withSequence chains animation steps, each starting only after the previous one completes, for multi-phase motion that a single spring or timing can't express.

Signature​

function withSequence(
  animations: Descriptor[],
  options?: { onStart?: () => void; onComplete?: () => void }
): Descriptor;

Usage​

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

function Sequenced() {
  const [x, setX] = useValue(0);

  const run = () => {
    /* Each step waits for the previous one to finish */
    setX(
      withSequence([
        withSpring(100),
        withTiming(200, { duration: 500 }),
        withSpring(0),
      ])
    );
  };

  return <animate.div style={{ translateX: x }} onClick={run} />;
}
Preview

Steps can mix any driver: withSpring, withTiming, withDelay, withDecay, freely within the same sequence.

Next steps​