Skip to content

Latest commit

 

History

History
90 lines (69 loc) · 3.57 KB

README.md

File metadata and controls

90 lines (69 loc) · 3.57 KB

HoverFill

Overview

HoverFill is a versatile React wrapper component that creates an interactive, animated hover fill effect. It uses GSAP (GreenSock Animation Platform) to create smooth, directional sliding animations that respond to mouse interactions.

HoverFill Showcase

Props

Prop Type Default Description
as ElementType 'div' The component type to render as
fillColor string 'white' Color of the SVG fill effect
fillOpacity number 1 Opacity of the SVG fill effect
fillDuration number 0.5 Animation duration in seconds
fillPin boolean false Pins the fill overlay
fillInvertColors boolean false Invert the colors behind the SVG using blend mode
fillOnFocus boolean false Animate tab navigation (must be a tabbable element)
fillFocusEnter 'up' | 'down' | 'left' | 'right' 'up' Animation direction for focus
fillFocusLeave 'up' | 'down' | 'left' | 'right' 'down' Animation direction for blur
fillInvert boolean false Invert the animation direction for mouse enter/leave
fillZ 'auto' | number fillInvertColors ? 'auto' : -1 The z-index of the SVG overlay

Usage Example

import HoverFill from '@/components/HoverFill';

function MyComponent() {
  return (
    <HoverFill
      as="button"
      fillInvertColors={true}
      style={{ position: 'relative' }} // Important for SVG positioning
    >
      Hover me
    </HoverFill>
  );
}

Important Notes

  • HoverFill must have a position value of relative, absolute, or fixed for the SVG overlay to correctly fill the element.

How It Works

The HoverFill component creates an SVG overlay that animates dynamically based on the mouse enter and leave directions. Key features include:

Key Features

  • Wrapper component that can be applied to any React element
  • Highly customizable animation parameters
  • Can trigger animations programmatically from the parent
  • Performance-optimized with GSAP and React hooks
  • Supports both mouse and keyboard interactions

Exposed Methods

function MyComponent() {
  const hoverFillRef = useRef(null);
  return (
    <HoverFill
      ref={hoverFillRef}
      onClick={console.log(hoverFillRef.current)}
    ></HoverFill>
  );
}
  • slideDownOut
  • slideUpIn
  • slideUpOut
  • slideDownIn
  • slideLeftIn
  • slideRightIn
  • slideLeftOut
  • slideRightOut

Dependencies

  • React
  • GSAP
  • @gsap/react

License

MIT License