INFINITE ROTATION ANIMATION
How TO CREATE IT
01.
Hover over the Dev Mode button in the Editor's main menu and click Turn on Dev Mode.
02.
Make sure you're editing the site page that includes the element you want to animate. Then, paste the code snippet below into the Code Panel.
import wixAnimations from 'wix-animations';
const infinity_rotation_timeline = wixAnimations.timeline({ repeat: -1 });
$w.onReady(function (){
initRotationAnimation();
});
function initRotationAnimation() {
const element_to_rotate =
$w('#yourElementId');
infinity_rotation_timeline.add(element_to_rotate, {
rotate: 360,
duration: 40000,
easing: 'easeLinear'
}).play();
}
// Learn more about wixAnimation:
03.
Select the element you want to animate and copy its ID from the panel on the bottom right corner. Go back to the code snippet and replace “YourElementId” with the new ID.
04.
Preview the site to see the rotation in action.
05.
If you want the rotation to pause with a hover/click, copy the following snippet under the first code, and change the Element ID.
element_to_rotate.onMouseIn(() => {
infinity_rotation_timeline.pause();
});
element_to_rotate.onMouseOut(() => {
infinity_rotation_timeline.play();
});
Watch the full tutorial
