Create an animation that rotates on hover (mouseover)

Updated

Animate a rotational card movement based on the position of your mouse as it hovers over an element.

Set up a rotation based on mouse position. 

Set perspective

  1. Make sure a parent element of the child element you’ll be animating is selected
  2. In the Style panel under Transitions & transforms, change the Children perspective to 1000 pixels

Set up the trigger

  1. Select the element you’d like to act as the trigger (e.g., Card)
  2. In the Interactions panel, click the plus sign next to On Selected Element and choose Mouse move over element from the dropdown menu

Animate the rotation

  1. Click Interactions panel > On mouse move > Action > Play mouse animation
  2. Click the plus sign next to Mouse animations
  3. Name it (e.g., Rotate on Mouseover)
  4. Click the plus sign under Mouse X actions timeline at 0% and choose Rotate
  5. Under Rotate, change the y-axis to -5 degrees
  6. Click the Card element at 100% and under Rotate change its y-axis to 5 degrees
  7. Under Mouse Y actions, add a Rotate action
  8. At 0% under Rotate, change the x-axis to 5 degrees
  9. At 100% under Rotate, change the x-axis to -5 degrees
  10. Close out of the animation to adjust Smoothing

Configure the resting state

  1. In the Interactions panel under On mouse move, set the Mouse X position to 50%
  2. Set the Mouse Y position to 50%

Create a specular highlight

  1. Drag a new Div block onto the canvas inside the element you’re working with (Card)
  2. Create a Class and name it (e.g., Card-highlight)
  3. Set its width and height (e.g., to 400 pixels)
  4. Set the Position to absolute 
  5. Position it from the top left
  6. Set your Background color (e.g., white)
  7. Under Border, change the Radius to 50%
  8. Under Effects, change the Opacity to 10%
  9. Add a Blur filter and change the Radius to 50 pixels
  10. In the Interactions panel, click Rotate on mouseover
  11. In the Mouse X timeline at 0% add a Move animation and change its x-axis to 100%
  12. In the Mouse X timeline at 100%, add a Move animation and change its x-axis to -50%
  13. In the Mouse Y timeline at 0%, add a Move animation and change its y-axis to 50%
  14. In the Mouse Y timeline at 100%, add a Move animation and change its y-axis to -50%


Check your work in preview mode.


Related articles