Как сделать, чтобы объект перемещался при скролле, покачиваясь из стороны в сторону?

Question

[Влад]

Пытаюсь сделать следующее применить анимацию и :

...
&__ufo {
	position: absolute;
	top: 20px;
	right: 0;
	object-fit: cover;
	pointer-events: none;
}
&__ufo--anim {
	animation: ufo-rotate 2s ease-out infinite;
}
@keyframes ufo-rotate {
	0% {
		transform: rotate(0deg) scale(0.8);
	}
	50% {
		transform: rotate(15deg) scale(1);
	}
	100% {
		transform: rotate(0deg) scale(0.8);
	}
}
...

window.addEventListener('scroll', (e) => {
...
    if (wrapperScrollTop < windowHeight) {
        ufo.classList.add('heaven__ufo--anim');
        ufo.style.transform = `translateX(-${(scrollTop - windowHeight) * speed}%)`;        
    }
...

Не работает. Если присвоить элементу класс `heaven__ufo--anim` в html-е, то срабатывает только css-анимация, а JS нет.

Получается через rotate сделать только в JS:

ufo.style.transform = `translateX(-${(scrollTop - windowHeight) * speed}%) rotate(${(scrollTop - windowHeight) * 0.02}deg)`;

Но в этом случае объект совершает поворот на протяжении всего события, а нужна другая логика (см. выше - animation: ufo-rotate 2s ease-out infinite;)

Как можно этого добиться?

Comments

[Алексей Дубровин]

animation это свойство которое задаёт анимацию.
Анимация изменяет свойство
transform.
Вы так же его перебиваете через js.
Чтобы сделать как вы хотите вам нужно не перебивать js. Тоесть не трогайте это свойство. В данном случае вы позиционируете абсолютно. Никто не мешает вам изменять позицию по X трогая left