1

I have been trying to use react-spring to animated a little planetarium in react.

To do so i'm using react-spring to animated an Orbit component in which i have my spring hook than controls the rotation and orbit dimensions. Problem is when i try to launch changeOrbit it works fine as long as the orbit is within one revolution, but as soon as it reaches 0 degrees, orbitX and orbitY are reset to my initial constant (orbitSize).

GIF of the bug

const { rotate, orbitY, orbitX } = useSpring({
from: { rotate: 0, orbitX: orbitSize, orbitY: orbitSize },
    rotate: 360,
    loop: true,
    config: {
      easing: (t) => t,
      duration: revolution * 2,
    },
  });

  const changeOrbit = async () => {
    const xStart = orbitX.get();
    const yStart = orbitY.get();

    await Promise.all([
      orbitX.start({
        to: async (next) => {
          await next(xStart + 100);
          await next(xStart);
        },
        // config: { easing: (t) => t, duration: revolution * 2 },
      }),
      orbitY.start({
        to: async (next) => {
          await next(yStart + 100);
          await next(yStart);
        },
        // config: { easing: (t) => t, duration: revolution * 2 },
      }),
    ]);
  };
Nezzar KEFIF
  • 11
  • 1
  • 1

0 Answers0