Skip to content
MotionLab

Flip Layout Grid

Switch grid ↔ list and filter categories; GSAP Flip animates every item to its new box.

★ showcaseGSAPFlip

How it works

Flip.getState() → change classes / DOM → Flip.from(state, {absolute, nested, onEnter, onLeave}).

Performance

Flip converts the layout change into transforms; absolute: true avoids layout thrash during the tween.

Accessibility & reduced motion

Filter buttons are aria-pressed toggles; reduced mode swaps instantly.

Playgroundtween
Export
transition={{ duration: 0.7, ease: [0.65, 0, 0.35, 1] }}