Make an animation smoother and leaned

[Bruno Augusto]

Good morning,

I’m trying to make a ring spin around a circle without much success. So far I have this.

First problem here is that ring doesn’t seem to go 360 degrees around the circle. It’s more like… a seesaw, going back and forth. Someone told me it’s just an optical illusion but it’s not very convincing.

Solved this smoothness issue, I need to lean it a bit. For that, ignoring the smoothness described above for a moment, I came to this

The second problem here is that, although diagonally oriented, it’s still moving around the X-axis like before. When the animation starts, the bottom-right curve of the ring goes to the top-right and the the top-left to the bottom left, while I would like to keep the fixed, top-left and bottom-right, literally making it spin around the circle, like a flipping coin I’d dare say

The ring must stay in its position because in the real case where the technique will be applied I’ll have other rings, spinning in different angles and axis, always around the circle and pretty much without touch each other.

Thank you in advance

[Paulie_D]

Someone told me it’s just an optical illusion but it’s not very convincing.

Yep, that’s what’s happening.

[Bruno Augusto]

May be because the demo is all black it was very difficult to see, but with some colors is easier.

One problem down, one to go

[Paulie_D]

I’m not sure what effect you are really after (if you can find something similar online as an example it might help).

But something like this?

https://codepen.io/Paulie-D/pen/NjjKex

[Bruno Augusto]

No, something less “random”.

See, you used the colored version, so you took time to see the Fiddle I posted in my previous comment. From that simple rotateX(), just a slight skew so the ring spins diagonally. No additional movement needed.

I just couldn’t make it because of the axis change

I can achieve the desired effect by applying a transform: rotate(-45deg) to div.loading, however this would imply a rotation for images inside it. Because there will have other rings inside, before wrapping every single one in a different <div>, I tried to animate the images directly

[Author]

Posts