103
AI ready

Directional Hover Fill

£10 or the whole Vault, £99

An ink fill that enters where your pointer arrives, bows into the surface and drains through the edge you leave. Text stays perfectly still.

intermediate
4 more details
hover-effectvelocity-reactiveclip-pathsvg-path

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Directional Hover Fill demo in new tab

Released

About this effect

A directional background fill for links, buttons and cards. The leading edge bends towards the point where your pointer enters, reacts to its speed and settles into a solid surface. Leave through another edge and the fill follows you out.

Read the full effect overview

Rapid crossings remain continuous, with no snap back to a hidden starting position. The content stays stationary and changes contrast exactly where the fill passes. Use it on service links, calls to action or navigation without redesigning the rest of the page.

Directional Hover Fill - GSAP animation effect preview

What's included

7 items
  • Entry and exit from all four edges, with a bowed front centred on the pointer
  • Pointer speed changes the curvature during a crossing
  • Quick swipes carry the existing fill out without folding; re-entry catches the moving shape
  • Stationary text with matching contrast on each side of the fill
  • Native link and button behaviour, keyboard focus and touch press feedback
  • Instant reduced-motion states, independent instances and complete teardown
  • Ink, Spectrum, Dusk and cursor-origin Radial styles with accessible comparison tabs

Perfect for

3 use cases
  • Service and portfolio links with a clear hover response
  • Navigation rows that respond to the direction of travel
  • Calls to action that keep their typography steady and readable

How it works

1 section

The fill follows the pointer's entry and exit edges while a curved front reacts to its location and speed. A matching clipped copy keeps text readable as the boundary passes. GSAP handles the transition and interrupted gestures, with immediate states for keyboard focus and reduced motion.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Directional Hover Fill opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

Add in your HTML <head>:

Code snippet omitted: it ships with the download.

Add a link or button in your page:

Code snippet omitted: it ships with the download.

Before </body>, load GSAP core and the effect:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

Required markup: put data-directional-fill on a native link or button and wrap its contents in one immediate child with data-fill-content. Keep that child presentational: text, spans, images and decorative SVGs work; do not nest form controls, media players or other interactive content. The script creates a hidden-from-assistive-technology visual copy of this child and an SVG clipping definition for each instance.

Removable demo styling: .demo-stage, .demo-cue, .service-list, .service-number, .service-title, .service-description, .service-arrow and .service-dialog belong to the example. The style tabs, service dialogs and final inline script are demo-only. Remove those, replace the buttons with your own links and choose any font, spacing or palette.

Required CSS: retain relative positioning, isolation and clipped overflow on [data-directional-fill]; absolute inset positioning and disabled pointer events on .directional-fill-layer; and the zero-sized .directional-fill-defs rule. Put your padding on [data-fill-content], not on its parent, so the original and copy align. Set the foreground and filled colours through --ink, --surface, --fill and --fill-ink. Preserve the visible focus outline and fallback hover/focus styling. No content is pre-hidden.

The supplied [data-fill-content] grid is only for the three-column demo. Replace it with your own flex, grid or block layout. Keep the same layout on the original and the generated copy. If your content changes dynamically, revert the effect and initialise the script again so the visual copy contains the new content.

Fill Styles

Set data-fill-theme="ink", data-fill-theme="spectrum" data-fill-theme="dusk" or data-fill-theme="radial" on a control or a shared parent. Ink is the default solid fill; Spectrum uses a black-to-green gradient with GSAP Vault lime text; Dusk uses purple/magenta/blue with white text. Ink, Spectrum and Dusk use the same directional motion and quick-swipe handling. For a circular reveal, also set data-fill-mode="radial" on the control or shared parent. It expands from the pointer entry point and contracts towards the exit point, with a radius that reaches every corner. The Radial demo tab sets both attributes and uses a black-and-green palette with GSAP Vault lime text. The optional demo tabs support arrow keys, Home and End.

For your own gradient, set --fill: linear-gradient(110deg, #0f0f0e, #354500, #516800) and --fill-ink: #c8ff00. Check text contrast across every gradient stop. Theme changes do not recreate the animation or its content.

Options

Set attributes on each [data-directional-fill] control.

Attribute Values Default Description
data-fill-mode directional, radial directional Reveal geometry; may also be set on a parent
data-enabled true, false true Skip enhancement when false; native CSS states remain
data-speed 0.25–3 1 Transition speed multiplier
data-bend 0–1.5 1 Curvature strength; zero gives a straight directional front

Accessibility

  • Keyboard focus gives an immediate full fill and visible focus outline; native link/button activation remains intact.
  • Touch displays immediate press feedback and releases on pointer-up or cancellation. The effect never prevents scrolling or link navigation.
  • Reduced motion switches states instantly. Changing the motion preference while mounted rebuilds the interaction and keeps all content available.
  • The visual duplicate is aria-hidden and inert. Original accessible names remain unchanged.
  • Without JavaScript or GSAP, original content remains visible and CSS supplies hover, active and focus feedback. Demo details require JavaScript; production links retain their ordinary destinations.
  • Maintain readable contrast between --ink/--surface and --fill-ink/--fill when restyling.

Dependencies

  • GSAP core 3.12+; demo pinned to 3.15.0.
  • A browser supporting SVG clipping, Pointer Events and :focus-visible.
  • No GSAP plugins, Lenis or image assets. Mona Sans is a removable demo font.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.