Show elements when hovering

Utilize a hover interaction to display elements upon hovering.

Within this tutorial:

1. Create an animation for hover entry
2. Create an animation for hover exit 
3. Implement the animation on other components

Establish an animation for hover entry

1. Choose your Link Block (to serve as the trigger)
2. In the Interactions panel, click the addition symbol beside Element Trigger and opt for Mouse Hover from the selection
3. For the On Hover event, select Initiate an Animation from the Action list
4. Tap the addition symbol near Time Animations
5. Name it (e.g., Slide in)
6. Pick the component you wish to animate (e.g., the Heart component)
7. Hit the addition symbol near Timed Actions and choose Shift from the options
8. For the Shift, assign a value to the x-axis (e.g., -100)
9. Beside Timing, switch on the toggle for Set as initial state
10. Repeat steps 6 to 9 for other elements to be animated 
11. Interactions panel, (press shift) and pick the component(s) in the sequence
12. Right-click to replicate
13. For the Shift, revert the x-axis to its original value (0 pixels)
14. For Timing, change the Easing (e.g., to Ease Out)
15. Decrease the Duration (e.g., to 0.2 seconds)

Create an animation for hover exit 

1. Exit the animation you just created 
2. In the Interactions panel under On Hover Out, opt for Initiate an Animation from the Action list
3. In Timed Animations, tap the gear icon beside Slide in and choose Replicate
4. Activate Slide in 2
5. Rename it (e.g., Slide out gracefully)
6. Erase the replicated animations (e.g., Heart and H3 Price) from the sequence 
7. Choose the remaining animations in the timeline
8. Beside Timing, turn off Set as initial state
9. Adjust Easing and Duration as previously done

Implement the animation on other components

1. Select any of the Timed Actions in the sequence 
2. Beside Impact choose Class
3. Click All elements with this class and select Only children with this class
4. Repeat 1-3 for both hover entry and hover exit

‍