Direction Aware Hover
A Vue component that creates a direction-aware hover effect on images using GSAP for animations.
Usage
Mouse over different edges of the image to see the effect.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
img | String | Required | URL of the image to be displayed. |
imageAlt | String | 'Hover image' | Alt text for the image. |
class | String | '' | Additional CSS classes for the main container. |
childrenClass | String | '' | CSS classes for the content container. |
imageClass | String | '' | Additional CSS classes for the image. |
Slots
| Slot | Description |
|---|---|
default | Content to be displayed over the image on hover. |
How it Works
- The component renders an image container with the provided image.
- On mouse enter, it determines the direction of the mouse entry.
- Based on the entry direction, it animates the image and content using GSAP.
- On mouse leave, it animates the components back to their original positions.
Customization
You can customize the DirectionAwareHover component in several ways:
- Use the
imgprop to set the image source. - Adjust the
imageAltprop to provide appropriate alt text for accessibility. - Use the
class,childrenClass, andimageClassprops to apply custom styles. - Modify the content displayed on hover using the default slot.
Dependencies
This component requires the GSAP library for animations. Make sure to install it in your project:
npm install gsap