Rotating Animation (i.e. a wheel) - Prevent counter clockwise

[jasoncslaughter]

I have an animation that I want to rotate in a clockwise fashion... I have 16 items around a circle, from 0 radians to 2 * Pi radians, and want to rotate to each item, and then back to the original. I have that working just fine with the following:

  const [spring, set] = useSpring(() => ({
    config: { friction: 20, mass: 1, tension: 29 },
    from: {
      rotation: calculateRotation(location, items.length),
    },
    loop: { reset: false, reverse: false },
  }));

and I am using the following when the location changes:

  set({
      to: {
        rotation: calculateRotation(location, items.length),
      },
    });

And using it with react-three-fiber as such:

<a.group rotation-y={spring.rotation}>

The problem is that on the last item, it is rotating back to the original. So it is going 0 -> 1, then 1 -> 2, etc., clockwise. But on 16 -> 0 it is rotating back around counterclockwise. I thought using reverse: false should prevent that, but obviously not. Is there something I might be missing?

Thanks!

[joshuaellis]

When you go from 16 - 0, you're going from ~337.5 - 0 because you're calculation could be treating location 0 as 0, but actually you want to keep adding the rotation on so it goes 337.5 - 360...

[jasoncslaughter]

Thank you for your help Josh! I wanted to take some time to try to implement your solution, but couldn't get it to work. My workaround was to use an accumulator instead of the location in order to calculate rotation. So if there are 10 items, and location wraps around to zero, the accumulator goes to 11, and always goes up. An ugly hack, but seems to work OK for now.