Как сделать правильно анимацию вращения круга?

Question

[evgeniy2024]

Всем привет, есть круг на котором расположено 3 div с цифрами внутри


Я с помощью gsap и небольшого расчета угла поворачиваю круг в одно и тоже положение, тоесть независимо от клика на любую цифру, к примеру я кликаю на цифру 3, или я кликну на цифру на 1, то выбранная цифра всегда будет наверху. Вот тут то и проблема кроется, вместе с кругом поворачиваються и сами элементы,


а мне нужно повернуть всю конструкцию в нужное положение так чтобы элементы оставались вертикально, независимо от угла поворота

Comments

[Ankhena]

Поворачивайте их в другую сторону...
И аналогичный вопрос тут был совсем недавно.

[its2easyy]

если используешь gsap, то попробуй MotionPathPlugin, там есть настройка выравнивания элемента при движении по пути

[evgeniy2024]

its2easyy, MotionPathPlugin это конечно хорошо, ну для обычных смертных он недоступен при деплое

[evgeniy2024]

its2easyy, Пытаюсь найти решение на основе css

[Максим]

evgeniy2024, если на css то круг крутите в одну сторону и кружеи в обратную...как в первом комментарии

[evgeniy2024]

Максим, выглядит как будто смешали молоко с огурцом, но уже хоть что-то

[Kentavr16]

evgeniy2024, Почему? Все крайне логично.

[its2easyy]

evgeniy2024, он в бесплатный пак входит вообще то

[Виталий Першин]

Добавил бы свой код что ли...

[Максим]

Виталий Першин, он за готовым решением

[Ankhena]

Ещё вы можете не крутить сам круг, а сдвигать номера по нужной траектории. Тогда они и не будут поворачиваться по своей оси.

[Ankhena]

И за вас поискала Элементы расположены по кругу, кол-во элементов опционально, они должны крутится во круг центра. Как сделать анимацию?

[evgeniy2024]

Ankhena, звучит интересно

[evgeniy2024]

Ankhena, вы просто волшебник, спасибо большое