The editor
Interaction states: hover, press, focus, drag
A state is where an element goes while it's hovered, pressed, focused or dragged. States don't run on the timeline's clock, so they aren't keyframes. A state starts from wherever the timeline left the element.
- The four
- Hover (
whileHover,:hover), press (whileTap,:active), focus (whileFocus,:focus-visible, so a mouse click doesn’t trigger it) and drag (whileDrag). Each starts small: hover scales up 3% and press scales down 3%. - One transition, both ways
- A state travels in and out on one curve, a snappy spring by default. Press something mid-hover and the spring changes course from where the element really is. There’s one curve per state, because different curves in and out tend to make a control feel broken.
- It rides on the timeline
- A state sets only the properties it names, and the rest stay wherever the entrance left them. That’s how a card can slide in and still lift on hover, in every dialect.
- Where CSS and GSAP differ
- CSS has no drag pseudo-class, so a drag state isn’t in the CSS export, and the stylesheet says so. A CSS transition also can’t be interrupted the way a spring can: press mid-hover and it restarts with a fresh duration. Motion’s springs carry their velocity into the new target. GSAP starts a new tween from wherever the element is (
overwrite: "auto"), without the previous tween’s velocity. GSAP’s states are event listeners with a teardown function, since GSAP has no declarative state.