Reveal elements on hover

Use a hover interaction to reveal elements on hover.

In this lesson:

1. Build an animation to hover in
2. Build an animation to hover out 
3. Apply the animation to other elements
   

Build an animation to hover in

1. Select your Link Block (to make it the trigger)
2. In the Interactions panel, click the plus sign next to Element Trigger and choose Mouse Hover from the dropdown menu
3. Under On Hover, choose Start an Animation from the Action menu
4. Click the plus sign next to Time Animations
5. Name it (e.g., Fly in)
6. Select the element you’d like to animate (e.g., the Heart element)
7. Click the plus sign next to Timed Actions and choose Move from the dropdown menu
8. Under Move, give the x-axis a value (e.g., -100)
9. Next to Timing, toggle the switch to Set as initial state
10. Repeat steps 6 to 9 for other elements you’d like to animate 
11. Interactions panel, (hit shift) and select the element(s) in the timeline
12. Right-click to duplicate
13. Under Move, change the x-axis back to its origin (0 pixels)
14. Under Timing, change the Easing (e.g., to Ease Out)
15. Reduce the Duration (e.g., to 0.2 seconds)

Build an animation to hover out 

1. Click out of the animation you just built 
2. In the Interactions panel under On Hover Out, choose Start an Animation from the Action menu
3. Under Timed Animations, click the cog icon next to Fly in and choose Duplicate
4. Activate Fly in 2
5. Rename it (e.g., Fly out fabulously)
6. Delete the duplicate animations (e.g., Heart and H3 Price) from the timeline 
7. Select the remaining animations in the timeline
8. Next to Timing, switch off Set as initial state
9. Adjust Easing and Duration as before

Apply the animation to other elements

1. Select any of the Timed Actions in the timeline 
2. Next to Affect choose Class
3. Click All elements with this class and choose Only children with this class
4. Repeat 1-3 for both hover in and hover out

‍