FIGS · 2026 Website Redesign

Motion Lab

A sandbox for settling how the new site moves. Every experiment is plain HTML, CSS and JavaScript — no framework, no build-time magic — so whatever gets approved here lifts straight into production. Durations, easings, travel and stagger all come from src/motion.css; nothing is hardcoded.

Every page carries a review toolbar. Drop Speed to 0.2x to watch an easing curve resolve, toggle Reduced to review the accessibility fallback as a real design state, and press H to hide the toolbar for screen recordings.

01 Hero reveal Masked line reveal against a settling image, then a two-rate parallax exit. Decides how long the hero holds before the page feels usable. timelinemaskparallax 02 Pinned fabric story FIONx, FORMx and FIBREx in a pinned, scrubbed sequence. Decides the scroll budget per panel — the line between immersive and stuck. ScrollTrigger pinscrubcross-fade 03 Collection grid stagger Row-batched card reveals plus hover and swatch micro-interactions. Decides how much motion a PLP can carry before it fights scanning. batchstaggerhover 04 PDP rail & gallery parallax Native-sticky buy rail against a three-depth gallery, plus the add-to-bag confirmation. Decides where overshoot is earned. stickydepthconfirmation 05 Global nav & mega-menu Sticky header state change, mega-menu with dwell-open, mobile sheet. Decides how loud a header state change should be. sticky statedwellsheet 06 Cart drawer & add-to-bag The most-touched motion on a commerce site. Fly-to-cart, spring confirmation, quantity nudge, success flash. Decides whether overshoot is delight or noise. drawerspringflash 07 Collection landing & lookbook Editorial header with two-depth parallax, filter reveal, FLIP density toggle. First page in the lab to use Lenis and SplitType. parallaxLenisFlip

The vocabulary

Not a reference table — a playground. Every value below is read live from src/motion.css, and every specimen runs the real tween. Plot a curve, race CSS against GSAP, drag a duration until it feels right, then export the block and paste it back into the file.