How can I tilt button on hover?

Ask the community
,
1

I’m trying to figure out how to code a button that’s in the header - so that when it is hovered over it rotates like 10 degrees - a small tilt. Help is appreciated. Thank You!

2

Hello Matthew,

perhaps this may help you with your issue.

https://www.wix.com/corvid/reference/wix-animations#top

3

I saw that already. I didn’t get how I could rotate a button in place using that. I was hoping for an example optimally or hopefully an good explanation. Thanks!

4

Here check this out…
https://russian-dima.wixsite.com/meinewebsite/timeline-rotation

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
 "repeat": 3,
 "repeatDelay": 100,
 "yoyo": true
  }
);

$w.onReady( function () {
 const myImage = $w("#myImage");
  timeline
    .add( myImage, {
 "rotate": 360,
 "scale": .5,
 "duration": 1000
    } )
    .add( myImage, {
 "opacity": 0,
 "duration": 1000
    } );
  $w("#playButton").onClick( () => {
    timeline.play();
  } );
  $w("#reverseButton").onClick( () => {
    timeline.reverse();
  } );
  $w("#pauseButton").onClick( () => {
    timeline.pause();
  } );
  $w("#replayButton").onClick( () => {
    timeline.replay();
  } );
} );