Skip to main content
Version: next

withLoop

withLoop repeats an animation a fixed number of times, or forever: loading spinners, pulses, and any other continuously-repeating motion.

Signature​

function withLoop(
  animation: Descriptor,
  iterations?: number,
  options?: { yoyo?: boolean; onStart?: () => void; onComplete?: () => void }
): Descriptor;

iterations defaults to Infinity. yoyo: true alternates direction each iteration (there and back) instead of restarting from the beginning every time.

Usage​

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

function Spinner() {
  const [rotation, setRotation] = useValue(0);

  useEffect(() => {
    /* Repeat forever — omit iterations (or pass Infinity) */
    setRotation(withLoop(withSpring(360, { stiffness: 200, damping: 0 })));
  }, []);

  return <animate.div style={{ rotate: rotation }} />;
}
Preview

A finite loop (e.g. bounce 3 times) just passes a number instead of omitting it: withLoop(withSequence([withSpring(50), withSpring(0)]), 3).

Next steps​