I'm trying to create a looping text carousel with React Spring. I've tried with a <h1 />, and an array of <span /> within a <div />, but aren't getting a smooth animation.

Current code:

import React from "react";
import { animated, useSprings } from "react-spring";

interface CarouselProps {
  className?: string;
}

const Carousel: React.FC<CarouselProps> = ({ className }) => {
  const string = [
    "a",
    "b",
    // ...
    "y",
    "z",
  ];

  const springs = useSprings(
    string.length,
    string.map((_, i) => ({
      loop: true,
      from: { translateX: "100%" },
      to: { translateX: "-100%" },
      config: { duration: 3000 },
      delay: (i + 1) * 100,
    }))
  );

  return (
    <div className={className}>
      <h1 className="w-48 bg-red-500 flex items-center">
        {springs.map((styles, i) => (
          <animated.p key={i} style={styles}>
            {string[i]}
          </animated.p>
        ))}
      </h1>
    </div>
  );
};

export default Carousel;

This is the example I'm trying