TextSplit

TextSplit.tsx

'The animator’s JavaScript toolbox.'.split('').map((character, i) => (
                <TaglineCharacter index={i} key={i} character={character} />
              ))

function TaglineCharacter({ character, index }) {
  const ref = useRef(null);

  useEffect(() => {
    const controls = animate({
      from: 0,
      to: 0,
      velocity: -500,
      stiffness: 120,
      elapsed: -index * 20,
      onUpdate: (y) =>
        (ref.current.style.transform = `translateY(${y}px) translateZ(0)`),
    });

    return () => controls.stop();
  }, []);

  return (
    <span
      ref={ref}
      className="hl"
      style={{
        display: 'inline-block',
        width: character === ' ' ? 8 : 'auto',
      }}
    >
      {character}
    </span>
  );
}

This is with Popmotion but you can imagine a similar approach ditching the useEffect and using motion.span instead