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).
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 },
}),
]);
};