background
aa-hover="block" and aa-hover="curve" add a colour layer that slides in from whichever edge of the host the cursor crossed. The library injects the moving panel — a <span> for block, an <svg> with a morphing path for curve — and removes it on dispose.
Hover effects are skipped on touch-only devices via (hover: hover) so iOS / Android don't fire stuck animations on tap.
Variants
Section titled “Variants”| Variant | What it does |
|---|---|
block | Solid colour panel slides in from the cursor's edge |
curve | Same idea, but the leading edge is a soft curved wave |
Add a space-separated flag to constrain which edge the panel enters from. With no flag (all), the closest of the four edges to the cursor is used.
| Flag | What it does |
|---|---|
| (none) | all — closest of top / bottom / left / right |
vertical | only top or bottom, picked by cursor Y |
horizontal | only left or right, picked by cursor X |
top / bottom / left / right | always that edge, regardless of cursor |
Examples: aa-hover="block", aa-hover="curve vertical", aa-hover="block top".
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-hover | (required) | block or curve, plus optional direction flag |
aa-color | currentColor | Fill colour of the injected panel |
aa-duration | (init) | seconds — falls back to init({ duration }) (default 0.6) |
aa-delay | 0 | seconds before the enter animation starts |
aa-ease | (init) | any GSAP ease — falls back to init({ ease }) (default power4.out) |
What gets injected
Section titled “What gets injected”- block — a
<span aa-hover-bg="block">absolutely positioned to fill the host. The host getsposition: relative+overflow: hidden+isolation: isolateif it doesn't already have them. - curve — an
<svg aa-hover-bg="curve" viewBox="0 0 100 100" preserveAspectRatio="none">containing a single<path>that morphs between a degenerate edge-pinned shape and full coverage. Same host treatment as block.
The injected layer's layout (position: absolute; inset: 0; z-index: -1; pointer-events: none) comes from alrdy-animate.css — that import is required for these effects, see the Next.js install guide or the Webflow install guide. Without it the injected <span> / <svg> renders as a static block and breaks layout.
If you want hover-driven changes to anything else on the element (text colour, border, scale), do that in CSS using :hover — the lib intentionally keeps its scope to the injected layer.
Required GSAP plugins
Section titled “Required GSAP plugins”gsap.
Live demo — block
Section titled “Live demo — block”Direction modes side by side. Hover from the corner you want to see the panel come in from.
Live demo — curve
Section titled “Live demo — curve”Same direction modes, swapped for curve. The leading edge bows slightly past the host before settling.
Live demo — directional list (block)
Section titled “Live demo — directional list (block)”A row layout where the panel comes in from whichever edge the cursor crossed. Pair with :hover styles in CSS for text-colour swaps.
Live demo — directional list (curve)
Section titled “Live demo — directional list (curve)”Same list, but each row hovers with a curved wave instead of a flat panel.