React Spring useTransition not working as expected

Question

So i tried to make a transition where the logo and the name of the companies go on in a loop. But as you can see in the gif the animation is not smooth as expected

PS- Im using Next.js

const clients = [
    {
      image: "/clients-logo/ABC.png",
      name: "ABC",
    },
    {
      image: "/clients-logo/XYZ.png",
      name: "XYZ",
    },
    {
      image: "/clients-logo/EFG.png",
      name: "EFG",
    },
  ];

  const [index, setIndex] = useState(0);

  const clientTransitions = useTransition(index, {
    key: index,
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 1000 },
  });

  useEffect(() => {
    const t = setInterval(
      () => setIndex((state) => (state + 1) % clients.length),
      6000
    );
    return () => clearTimeout(t);
  }, []);
return (
    <div className="bg-gray-200 flex h-96" >
      <div>...</div>
      <div className="flex-1 flex items-center justify-center">
        <div className="flex flex-col items-center overflow-hidden">
          {clientTransitions((style, i) => (
            <animated.div style={style} className=" flex flex-col items-center">
              <img src={clients[i].image} alt="z" className="width-img" />
              <p className="text-2xl mt-2">{clients[i].name}</p>
            </animated.div>
          ))}
        </div>
      </div>
    </div>
  );

Where am I going wrong? Or should I use some other method to achieve the same?

score 1 · Answer 1 · answered Jun 21 '21 at 14:07

Try with absolute position. This way the new and old client are on each other. For example:

  const clientTransitions = useTransition(index, {
    key: index,
    from: { opacity: 0, position: "absolute" },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 1000 },
  });

React Spring useTransition not working as expected

1 Answers1