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
- Make sure a parent element of the child element you’ll be animating is selected
- In the Style panel under Transitions & transforms, change the Children perspective to 1000 pixels
Set up the trigger
- Select the element you’d like to act as the trigger (e.g., Card)
- 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
- Click Interactions panel > On mouse move > Action > Play mouse animation
- Click the plus sign next to Mouse animations
- Name it (e.g., Rotate on Mouseover)
- Click the plus sign under Mouse X actions timeline at 0% and choose Rotate
- Under Rotate, change the y-axis to -5 degrees
- Click the Card element at 100% and under Rotate change its y-axis to 5 degrees
- Under Mouse Y actions, add a Rotate action
- At 0% under Rotate, change the x-axis to 5 degrees
- At 100% under Rotate, change the x-axis to -5 degrees
- Close out of the animation to adjust Smoothing
- In the Interactions panel under On mouse move, set the Mouse X position to 50%
- Set the Mouse Y position to 50%
Create a specular highlight
- Drag a new Div block onto the canvas inside the element you’re working with (Card)
- Create a Class and name it (e.g., Card-highlight)
- Set its width and height (e.g., to 400 pixels)
- Set the Position to absolute
- Position it from the top left
- Set your Background color (e.g., white)
- Under Border, change the Radius to 50%
- Under Effects, change the Opacity to 10%
- Add a Blur filter and change the Radius to 50 pixels
- In the Interactions panel, click Rotate on mouseover
- In the Mouse X timeline at 0% add a Move animation and change its x-axis to 100%
- In the Mouse X timeline at 100%, add a Move animation and change its x-axis to -50%
- In the Mouse Y timeline at 0%, add a Move animation and change its y-axis to 50%
- In the Mouse Y timeline at 100%, add a Move animation and change its y-axis to -50%
Check your work in preview mode.