Get started

CSS Animations · Interactive

Gestures and layout.

Drag, throw, swipe, and hold. These primitives use a spring integrator rather than an easing curve, because a throw has to start at whatever velocity your pointer had — and the layout moves below aren't keyframed at all: the library measures a before and after and animates the difference.

Feel the gestures Read the catalog docs →

Every card below responds to a real pointer — drag, swipe, or hold one.

Black-and-white photo of a train pulling into a platform as a lone commuter waits in the distance

Gestures & physics

Thirteen preset names over four primitives — draggable, swipeable, pressable, magnetic — sitting outside the lettered A–O catalog sections. The drag family differs only in what happens on release: nothing (drag), back to origin with varying spring stiffness (elastic-pull, rubber-band, snap-back), or onward with momentum (drag-inertia, throwable).

Draggable · axis — 3

Two commuters in silhouette waiting as a subway train pulls into a dimly lit station
data-kui="drag" — drag it anywhere
Black-and-white photo of passengers walking along a sunlit train station platform, one leaning on a cane
data-kui="drag-x" — horizontal only
Wide-angle monochrome photo of a modern subway platform and tunnel with two commuters walking toward the train
data-kui="drag-y" — vertical only

Draggable · momentum — 2

Long-exposure black-and-white photo of a crowd blurring across a city crosswalk
data-kui="drag-inertia" — flick and release
Overhead long-exposure black-and-white photo of pedestrians crossing a striped crosswalk, blurred in motion
data-kui="throwable" — flick it away

Draggable · return springs — 3

Black-and-white photo of a lone traveler pulling a suitcase down a quiet backlit suburban street
data-kui="elastic-pull" — soft snap back
High-contrast black-and-white street photo of a man walking past a sunburst between city buildings
data-kui="rubber-band" — wider give
Silhouette of a person walking along a waterfront promenade at sunrise with a city skyline behind
data-kui="snap-back" — stiff spring

Swipeable — 2

Black-and-white photo of pedestrians walking down a cobblestone lane strung with string lights at dusk
data-kui="swipe" — swipe any direction
Black-and-white profile of two people walking close together past a sunlit wall, casting long shadows
data-kui="swipe-x" — left or right only

Pressable — 1

Black-and-white candid photo of two older men walking and talking on a cobblestone street
data-kui="long-press" — press and hold

Magnetic — 2

Black-and-white close portrait of a man in a denim shirt looking directly at the camera
data-kui="magnetic" — move your pointer near
Black-and-white photo of a commuter walking away down a subway platform, carrying bags
data-kui="magnetic-snap" — stronger pull

Layout & FLIP

Nine preset names, one technique: the library measures each child's box before a DOM change, measures again after, and animates only the delta. Filtering is a class or hidden change on the children — a layout change isn't expressible as keyframes. These animate elements you control; accordion-height animates height only, it doesn't own aria-expanded or keyboard handling.

flip-filter — 1

flip-reorder — 1

Click any card — it jumps to the front and the rest reflow around it.

Black-and-white photo of a lone traveler pulling a suitcase down a quiet backlit suburban street
click to bring forward
Black-and-white profile of two people walking close together past a sunlit wall, casting long shadows
click to bring forward
Black-and-white candid photo of two older men walking and talking on a cobblestone street
click to bring forward
Black-and-white close portrait of a man in a denim shirt looking directly at the camera
click to bring forward

flip-sort — 1

Black-and-white photo of a train pulling into a platform as a lone commuter waits in the distance
elastic-pull bounds: 80
Overhead long-exposure black-and-white photo of pedestrians crossing a striped crosswalk, blurred in motion
rubber-band bounds: 120
Two commuters in silhouette waiting as a subway train pulls into a dimly lit station
throwable damping: 18
Black-and-white photo of passengers walking along a sunlit train station platform, one leaning on a cane
snap-back stiffness: 260

flip-shuffle — 1

Wide-angle monochrome photo of a modern subway platform and tunnel with two commuters walking toward the train
data-kui="flip-shuffle"
Long-exposure black-and-white photo of a crowd blurring across a city crosswalk
data-kui="flip-shuffle"
High-contrast black-and-white street photo of a man walking past a sunburst between city buildings
data-kui="flip-shuffle"
Silhouette of a person walking along a waterfront promenade at sunrise with a city skyline behind
data-kui="flip-shuffle"

grid-to-list — 1

Black-and-white photo of pedestrians walking down a cobblestone lane strung with string lights at dusk
data-kui="grid-to-list"
Black-and-white photo of a commuter walking away down a subway platform, carrying bags
data-kui="grid-to-list"
Black-and-white photo of a lone traveler pulling a suitcase down a quiet backlit suburban street
data-kui="grid-to-list"
Black-and-white candid photo of two older men walking and talking on a cobblestone street
data-kui="grid-to-list"

masonry-reflow — 1

Black-and-white close portrait of a man in a denim shirt looking directly at the camera
tall
Silhouette of a person walking along a waterfront promenade at sunrise with a city skyline behind
wide
Wide-angle monochrome photo of a modern subway platform and tunnel with two commuters walking toward the train
tall
Long-exposure black-and-white photo of a crowd blurring across a city crosswalk
wide
Black-and-white photo of passengers walking along a sunlit train station platform, one leaning on a cane
tall
Black-and-white profile of two people walking close together past a sunlit wall, casting long shadows
wide

expand-to-modal — 1

Click a card to expand it in place; the rest of the grid reflows around it.

accordion-height & tab-indicator-slide — 2

Same primitive (draggable with return:true), different spring stiffness. elastic-pull ships a soft return, rubber-band widens the resistance before it lets go, and snap-back uses a stiff spring (stiffness:260) that whips home fast.
swipeable and pressable only own a state channel — they publish data-kui-swipe / data-kui-pressed attributes and leave the visual response to ordinary CSS, same as the swipe badge and press outline on the cards above.
A MutationObserver on the container watching childList, subtree, and the hidden attribute. Reordering or hiding children fires it automatically — a bare CSS class change on the container (like grid-to-list's view toggle) does not, so this page re-appends the children after a class swap to give the observer something to notice.

Even columns, fixed aspect ratio — the entrance-matrix and filter demos above all use this.

Programmatic API

The same registry, driven from JavaScript. anim.play() accepts a selector, an Element, or any iterable.