Reveal elements on hover

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
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

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form