Using wix editor in dev mode, I would like to create a button that, when clicked, will rotate an image 30 degrees. Can someone help?

Ask the community
, , , ,
1

Here is the code I’ve been trying to use but it’s not working…

$w.onReady(function () {
// Get a reference to the image and the button using their IDs
const myImage = $w(‘#myImage’);
const rotateButton = $w(‘#rotateButton’);

// Add a click event handler to the button
rotateButton.onClick(() => {
// Get the current rotation angle of the image
const currentRotation = myImage.rotate;

// Rotate the image 30 degrees clockwise (adding 30 to the current angle)
const newRotation = currentRotation + 30;

// Set the new rotation angle for the image
myImage.rotate = newRotation;

});
});

2

You’ll need to use the wix-animations-frontend library to accomplish this:

You create a timeline(), add() an animation to it, and then call play() on the timeline in your onClick event handler.