CSS Animations · Interactive

Gestures and layout.

Feel the gestures Read the catalog docs →

Editorial photo of a model in an oversized navy wrap-style pantsuit with a loosened tie, seated with tan lace-up heeled boots

Drag me

Gestures & physics

Draggable · momentum — 2

Portrait of a man in a tan blazer and cream sweater with sunglasses tucked into the collar, standing outdoors — data-kui="drag-inertia" — flick and release

Model in a pink floral blouse and matching trousers blowing a bubblegum bubble, seated cross-legged on a pink pedestal against a pink background — data-kui="throwable" — flick it away

Draggable · return springs — 3

data-kui="elastic-pull" — soft snap back

Portrait of a man in a bold navy-and-cream swirl-print turtleneck sweater on a city street — data-kui="rubber-band" — wider give

data-kui="snap-back" — stiff spring

Draggable · axis — 3

Close-up portrait of a model in a rhinestone-mesh hood and turtleneck, red lipstick and a nose ring — data-kui="drag" — drag it anywhere

Portrait of a model with white hair wearing a glowing red LED visor and white high-collar jacket against a dark red background — data-kui="drag-x" — horizontal only

Close-up portrait of a model in an all-white hooded outfit and mirrored wraparound sunglasses with bold red lipstick — data-kui="drag-y" — vertical only

Swipeable — 2

Close-up portrait of a model with pale features and metallic wire choker rings, wearing reflective black visor sunglasses — data-kui="swipe" — swipe any direction

Portrait of a model in a strapless navy-and-cream gown printed with abstract Picasso-style faces, beside a matching painted vase — data-kui="swipe-x" — left or right only

Pressable — 1

Close-up portrait of a model in a golden dome-shaped reflective visor catching warm sunlight, nose and lips visible below — data-kui="long-press" — press and hold

Magnetic — 2

Beauty portrait of a face wrapped in a black headwrap down to the nose, gold drop earrings, matte black lipstick — data-kui="magnetic" — move your pointer near

data-kui="magnetic-snap" — stronger pull

Layout & FLIP

flip-filter — 1

futuristic

flip-reorder — 1

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

click to bring forward

flip-sort — 1

black helmet

flip-shuffle — 1

data-kui="flip-shuffle"

grid-to-list — 1

data-kui="grid-to-list"

masonry-reflow — 1

Abstract beauty portrait of a face rendered in liquid gold silk, fabric swirled around the head — classic

futuristic

Beauty portrait of a matte white face with molten liquid gold dripping over the eyes and mouth, bold red lips — futuristic

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

What's the difference between elastic-pull and snap-back?

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.

Why don't swipe and long-press move the element?

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.

What actually triggers a FLIP replay?

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.

Single column, image and caption side by side — what grid-to-list switches into.

Variable-height columns that pack tight — what masonry-reflow demonstrates above.

Programmatic API

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