withDelay

withDelay is a pause, one step you place inside a withSequence, not a wrapper around another animation.

Signature

function withDelay(ms: number): Descriptor;

Usage

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

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

  const run = () => {
    /* Pause 500ms, then spring — withDelay is a sequence step */
    setX(withSequence([withDelay(500), withSpring(200)]));
  };

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

Preview

note

For staggering several items rather than delaying a single sequence, use withStagger instead. It wraps this same pattern per index.

Next steps

• withSequence: where withDelay steps live.
• withStagger: per-item delay for lists.