Smooth intermediate values from integer state? (Move along circle)

[laurentlahmy]

My animation is driven by index values which are integers (0, 1, 2...). I would like to somehow map them to a smooth position animation along a circle.

I'm using

x: 50 * Math.cos(((-index % 6) * Math.PI) / 3),
y: 50 * Math.sin(((-index % 6) * Math.PI) / 3),

in my animate prop, which would work if my index values were continuous, but because they are not, it just animates from previous to new position in a straight line.

I tried to use useTransform but I get the same result.

Is there a way to pass all intermediate values so that I nicely follow the circle?

Should I update the value frame by frame?
Should I use useTime? Can I use a time value while preserving the "spring physics" of my animation?
Should I use onUpdate and manually update the position?

Thanks!

sandbox here

[laurentlahmy]

Solution was to animate angle, not coordinates.
Thanks @easymac on framer's Discord.

https://codesandbox.io/p/sandbox/reverent-flower-forked-z9glvh?file=%2Fsrc%2FApp.tsx%3A36%2C8-36%2C16