Animate value that wraps around to zero

[JonasGruenwald]

Hi! I couldn't find anything about this in the docs, but I'd like to animate a value that goes up to a certain limit and then wraps back around to zero - specifically a point on a circular path, represented by a percentage, so it goes from 0% to 100% and then starts from 0 again. So this would mean that if the value is 90% and I set it to 10%, I would like the spring to move the value down to 0% and then up to 10%, rather than just going back all the way down to 10% by decrementing.

Is there an easy way to implement this with springs?
Any help would be appreciated :)

[Decycle]

Have you tried interpolating the values? You can try animating the value from say 80 to 120, then in the animated.div, do something like

const { percentage } = useSpring({
  from: { percentage: 80 },
  to: { percentage: 120 },
})

return (
    <animated.div
      percentage={percentage.to(
        percentage % 100
      )}>
    </animated.div>
)

Not sure if this solves your problem, but I think it might be a direction.

[JonasGruenwald]

yeah that's a good point, I ended up doing something similar. I feel a bit weird about the fact that the real uninterpolated value can now theoretically grow infinitely in one direction, but I guess overflow is not a real world concern when the value grows as slowly as in my application