Five new effects are in the library, and they have something in common: not one of them is a scroll effect. Nothing here waits for a ScrollTrigger to fire. They are objects on the page that respond to a pointer, a finger or a key, and keep responding for as long as someone keeps poking them.
That is a deliberate shift. Most of the catalog animates on the way past. These five are things a visitor stops and plays with, which makes them hero-section and campaign material rather than section furniture.
Four of the five run on GSAP core with no plugins at all: no ScrollTrigger, no canvas library, no WebGL, no physics engine. Only the page turn reaches for Draggable and InertiaPlugin, both free on the public CDN since GSAP 3.13.
Here’s what’s new.
Holo foil card
A card that behaves like real holographic foil. One gesture drives five channels at once: the card tilts in 3D, a prismatic sheen slides across it and shifts hue with the angle, a glitter layer twinkles on its own clock, the art and the type separate into depth, and a specular highlight blooms only near grazing angles.
The look comes from material layering rather than a hue-rotate shortcut: prismatic gradients under color-dodge, a specular under overlay, a laminate bevel under soft-light, and a screen-blend bloom that stays shut until a hard sweep earns it.
Key features:
- Velocity lead, so a fast flick makes the tilt overshoot past the pointer and the glare blow out, then recover
- Elastic settle back to a per-card resting pose defined in CSS, so the card looks identically lit with JS, without JS, and under reduced motion
- Three shipped foil recipes (rainbow prism, brushed chrome, cracked ice), each a real material; a fourth is one background rule on a new
data-foilvalue - Touch drag as a first-class channel with pointer capture and
pan-y, so a phone visitor can tilt the card and still scroll the page - Device orientation as an optional extra, with the iOS permission prompt behind a button that only appears where it is needed
The script writes custom properties and one rotation; every visual decision stays in your stylesheet:
<article class="foil-card" data-foil-card data-foil="prism" tabindex="0">
<div class="foil-card__inner" data-foil-inner>
<div class="foil-card__art" data-foil-parallax="back">...</div>
<div class="foil-layer foil-layer--sheen" aria-hidden="true"></div>
<div class="foil-card__face" data-foil-parallax="front">...</div>
<div class="foil-layer foil-layer--glare" aria-hidden="true"></div>
</div>
</article>Layer order in the DOM is layer order on screen, and it is a real design decision: sheen and sparkle sit below your content so type stays readable, glare and bloom sit above it so a hard sweep washes over the whole card.
Fracture reveal
Strike an element and it shatters into a Voronoi shard field computed at that moment. Shards near the impact leave fast and spin hard, distant ones drift, fresh edges catch the light. Hit it again while it is still in the air and the break compounds instead of restarting.
The Voronoi decomposition is written from scratch (ring-distributed seeds, blended Lloyd relaxation, half-plane clipping) with no geometry library. Shards are ordinary DOM elements clipped with clip-path over a clone of your own markup, so what breaks can be an image, live text, an inline SVG or a whole composed layout.
Key features:
- Distance falloff from the impact point drives five channels at once: throw distance, spin rate, z-depth, edge light, and how long each shard stays out
- An elliptical rubber-band leash keeps a wild scatter composed inside the frame instead of firing the plate off-screen
- Distance-ordered elastic return that heals from the rim inward and snaps to exact zero, so no seam survives at rest
- Shards are bounding-box sized with the artwork clone offset back into place, cutting compositor memory by roughly twenty times against full-size shard layers
- Rendered entirely through
quickSetters on one shared ticker that sleeps the moment every shard is home
Integration is a single attribute:
<div class="hero-plate" data-fracture role="button" tabindex="0"
aria-label="Break the hero image. Press Enter or Space to strike it.">
<img src="hero.jpg" alt="Studio interior">
</div>One layout rule matters: everything a shard must reproduce has to live inside the fractured element, not on it. Shards clone the element’s contents, so a background or border set on the [data-fracture] element itself stays behind as a ghost of the intact plate.
Cloth drape
A hanging sheet of fabric you can grab, drag and swing. Pull it and it deforms locally while the whole sheet follows with weight; whip it and it snaps taut and sends a ripple across the weave; let go and it takes its time coming back to rest.
Underneath is a Verlet particle mesh with structural, shear and bend constraints, relaxed several times per fixed step. No physics library, no WebGL.
Key features:
- Grabbing takes a patch of fabric rather than a single vertex, so a pull makes a fold instead of a spike, and release inherits the pointer’s velocity
- Grommet pinning: pin as many or as few points along the top edge as you like and the fabric sags into real catenaries between them
- Per-vertex lighting from the mesh’s own normals, painted as a separate light layer and composited in one pass, so folds shade smoothly with no triangle seams
- Your artwork is warped as a real triangle mesh with per-triangle affine mapping, depth-sorted so a fold that doubles over paints in the right order
- Fixed 120Hz timestep with an accumulator, so the fabric behaves identically at 60Hz and 144Hz
- Two material presets, silk and canvas, plus per-instance gravity, damping, bend, stretch limit and wind
<section class="cd-stage" data-cloth-drape aria-label="Hanging fabric banner">
<div class="cd-hang">
<img class="cd-art" data-cloth-art src="your-artwork.jpg"
width="1240" height="820" draggable="false" alt="What your banner says">
</div>
</section>Ambient wind keeps the sheet alive at rest without ever reading as jitter, and a gust button (or Enter, from the keyboard) throws a full billow through it.
Page turn book
A page that curls around a real cylinder as you drag it, throws over with momentum, and settles. Each leaf is rebuilt on the fly as a row of vertical strips laid along a fold polyline, so the paper bends rather than rotating flat.
This is the one effect of the five that uses plugins: Draggable for the grab and InertiaPlugin for the throw.
Key features:
- Per-strip Lambert shading, so the highlight travels down the fold and the reverse side reads darker
- Cast shadow that tracks the leading edge across the page below and crosses to the facing page mid-turn
- Page snapping on the throw: nudge it and it springs back, flick it and it commits
- Riffle on a hard flick, carrying two or three leaves over in a staggered cascade
- Backface content revealed through the turn, so the reverse of each leaf is a real page
- Single-page phone layout hinged on the left edge, with the strip count reduced automatically
The markup is one leaf per turn, front and back:
<div class="lookbook" data-turn-book tabindex="0" role="group"
aria-label="Lookbook, three spreads. Drag a page across to turn it.">
<div class="lookbook__block">
<article class="leaf" data-turn-leaf>
<div class="leaf__face leaf__face--front" data-turn-face="front">...</div>
<div class="leaf__face leaf__face--back" data-turn-face="back">...</div>
</article>
</div>
</div>Prev/next controls, arrow-key paging and a live region announcing the current spread all come with it.
Curtain menu overlay
A fullscreen nav overlay that arrives as three clip-path curtains sweeping across the page on offset durations and eases, with oversized link type masking up behind them on a stagger. Closing reverses the choreography rather than fading out.
Moving through the list drives four things at once: the active link slides out and takes its own tint, the rest dim and recede, an anchored preview plate wipes to that link’s image in the direction you travelled, and a colour bloom behind the type re-tints and drifts to the row.
Key features:
- Interruption-safe transitions: a wipe caught mid-flight is completed, not abandoned, so a fast sweep down the list never queues a backlog
- Real dialog behaviour: focus trap, Escape to close,
aria-expandedandaria-hidden,inertwhile closed, and focus returned to the trigger - Body scroll lock that also stops and restarts Lenis, which ignores
overflow: hidden - Keyboard focus drives the same preview channel as hover, and press-and-slide does on touch
- Magnetic close control with a lagging glyph and an elastic release
- Without JavaScript the whole menu renders as an ordinary nav list, so no link is ever trapped behind a class the script never added
That last point is worth spelling out, because it is the failure mode most overlay menus ship with. If the markup starts hidden and only JavaScript reveals it, a script error or a blocked bundle takes your entire navigation with it. Here the CSS that hides the overlay is gated behind a class the script adds, so the no-JS state is a plain list of links.
The rules all five follow
Interactive effects fail differently from scroll effects. A scroll animation that misbehaves is a visual glitch; a pointer-driven object that misbehaves eats clicks, traps focus or leaves a phone unable to scroll. All five ship with the same defences:
- Reduced motion is a resting state, not a dead one. Every effect settles to a composed, deliberately lit pose rather than switching itself off mid-pose.
- A keyboard path that drives the real animation, not a shortcut version of it. Focus the foil card and the full sweep plays; press Enter on the fracture plate and it strikes at a fresh point each time.
- Touch handled as its own channel.
touch-actionset per effect so a drag gesture never dies inpointercanceland the page still scrolls where it should. - The ticker sleeps. None of these run a permanent RAF loop. The shared clock turns over only while something is actually being touched or settling.
// The shape every one of them uses
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
settleToRestingPose(); // still composed, just not animated
return;
}What’s next
More interaction-led work, and more of it built to survive a screen recording: these are the effects people send each other. If there is a physical object you have been wanting to put on a page, say so and it may well be next.
All five are in the Effects & Templates Vault, along with every other effect and template in the library.
