Cloth Drape
A hanging fabric banner you can grab, drag and swing: a soft-body cloth simulation that warps your artwork across it and shades its own folds.
About This Effect
Real fabric, hanging from grommets, in a canvas element. Grab it anywhere and the sheet deforms locally while the whole thing follows with weight; let go and it swings, ripples and takes its time coming back to rest.
Read the full effect overview
One input drives four visible channels at once: the mesh deforms, your artwork warps with it, the folds shade from their own surface normals, and a soft cast shadow tracks the sheet across the wall behind. Whip it hard and it snaps taut, throws a travelling ripple across the weave and billows toward you.
It is a hand-written soft body on GSAP's ticker: verlet particles, distance constraints, no physics library, no WebGL. Point it at any image with one data attribute.
What's Included
- Verlet particle mesh with structural, shear and bend constraints, relaxed several times per fixed step, written from scratch with no physics library
- 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
- Grabbing takes a patch of fabric, not a single vertex, so a pull makes a fold instead of a spike, and release inherits your pointer's velocity
- 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 visible triangle seams
- Your artwork is warped as a real triangle mesh with per-triangle affine mapping, and the triangles are depth-sorted so a fold that doubles over paints in the right order
- Cast shadow rendered from the sheet's live silhouette, so it moves, stretches and softens with the fabric
- Two material presets, silk and canvas, switchable from any button, plus per-instance control of gravity, damping, bend, stretch limit and wind
- Ambient wind keeps the sheet alive at rest without ever reading as jitter, and a gust button or Enter throws a full billow through it
- Fixed 120Hz timestep with an accumulator, so the fabric behaves identically at 60Hz and 144Hz
- Full keyboard path: the sheet is focusable, arrow keys push it and Enter sends a gust
Perfect For
- Exhibition, festival and gallery sites where the poster itself should be the thing visitors play with
- Fashion and textile brands that want their print shown on something that behaves like fabric
- Hero sections and campaign microsites needing one tactile, memorable interaction above the fold
- Product pages for printed goods: banners, flags, tapestries, scarves, tote prints
- 404 and coming-soon pages where a toy earns the wait
How It Works
The sheet is a grid of verlet particles. Each fixed 1/120s step integrates gravity and a two-wave wind field, then relaxes three sets of distance constraints over several passes: structural links along the weave, shear links across each cell that stop the grid collapsing into a parallelogram, and bend links that skip a neighbour and are what resist creasing. A final pass hard-limits how far any structural link may stretch, which is what makes a hard whip snap taut and sends a ripple travelling across the fabric rather than letting it behave like elastic.
This is a deliberately different physics class from the impulse-based rigid body solver in Physics Word Pile. That effect resolves contacts between separate solid objects with restitution and friction; this one has no contacts at all, and its behaviour comes entirely from relaxing a mesh of constraints toward its rest shape. Both run on GSAP's ticker with a fixed timestep and an accumulator, and neither uses a physics library, but nothing else is shared.
Rendering is a canvas triangle mesh rather than a grid of CSS 3D divs. Three points define an affine transform exactly, so each triangle clips to its own shape and draws the image through that transform, which warps the artwork genuinely; a div grid can only translate and rotate whole cells and shows a seam at every join. Triangles are grown by a fraction of a pixel before clipping so neighbours overlap, and are depth-sorted each frame so a fold that doubles over paints back to front.
Lighting is computed per vertex from face normals averaged across the cells that share it, then painted into a separate opaque light layer and composited over the sheet once with soft-light. Because that layer is opaque, overlapping triangles replace rather than accumulate, which is what stops the mesh printing as a grid; because the light value is linear across a triangle, one linear gradient per triangle reproduces it exactly and the shading comes out smooth rather than faceted.
GSAP drives the wind envelope: a gust is a tween on a single proxy value with a power3.out tail, so it arrives instantly and dies away instead of switching off.