Motion

Motion system

GSAP for orchestrated motion. CSS for micro-states. 2 easing curves. 5 duration tiers.

The cardinal rule

GSAP = scroll reveals, staggers, complex state transitions. CSS = hover, focus, active. Never CSS keyframes for content reveals.

Easing curves

ease-out

cubic-bezier(0.19, 1, 0.22, 1)

GSAP: power3.out

Default for all entrances. Fast start, smooth deceleration. Used in 90% of animations.

ease-in-out

cubic-bezier(0.76, 0, 0.24, 1)

GSAP: power4.inOut

Bidirectional only. Nav menu, modal transitions. Symmetrical acceleration.

Duration scale

200ms

BaseButton states, dots

300ms

FastHovers, color shifts

500ms

MediumReveals, wizard steps

800ms

SlowSection reveals, nav

1200ms

CinematicHero, brand intro

GSAP patterns

Scroll reveal

ScrollTrigger top 85%

y:25→0, opacity:0→1, 0.8s, power3.out

Hero curtain

CSS stacking (no JS)

Hero sticky -z-10, canvas relative z-20

Mobile nav

Toggle button

clipPath polygon, links stagger y:40→0, 0.8s

Pinned scroll

ScrollTrigger pin

pin:true, snap:1/(panels-1)

Media reveal

CSS group:hover

scale(1.05), grayscale(0), 1s ease-out

Brand intro

First visit (cookie)

Logo scale+opacity timeline, ~3s

CSS transitions

Reflexive micro-interactions. Direct user interaction only, not scroll.

Button hover

--motion-fastbackground-color, color

Border highlight

--motion-fastborder-color

Icon translate

--motion-fasttransform

Card hover

300msall

Nav solid

300msbackground, border, color

Image reveal

1sfilter, transform

Accordion

500msall

Client logo

500msopacity, filter, transform

Do / Don't

Use GSAP for scroll-triggered reveals

Use CSS transitions for hover states

Use --ease-out for entrance animations

Use data-reveal for standard fade-up

Don't

Use CSS @keyframes for content reveals

Use ease-in for entrances

Animate layout properties (width, height)

Use transition-all on complex components