Motion
Nothing changes in a jump, and nothing moves unless someone asks. Tied to energy (what happens is seen happening) and to the "never noisy".
On this page
Every change of state is a transition
Colors from day to night, space when density changes, size when content grows, hover. One duration and one curve that starts soft and lands soft. Feitio’s base CSS already does this on every element.
320ms, cubic-bezier(0.3, 0, 0.2, 1)Starts soft, speeds up in the middle and lands without overshooting.
260ms, cubic-bezier(0.2, 0.9, 0.3, 1.25)Leaves fast and goes slightly past the end before settling: the small bounce of paper landing on the table.
Placed paper
It is how floating things arrive: a cut-out settling on the table, with a slight turn and the shadow forming, with a small bounce. Only when someone acts.
One paper at a time
When one action makes several things appear, only one arrives as placed paper: the one that speaks to the person, like the notice that it worked. The others slide in, like a new row in a list, which opens room and pushes the ones below. Two papers landing at once compete for the eye and look like a mess.
Reduced motion
When the system asks for less motion, there is none. No transition, no placed paper.
Nothing moves unless someone asks
Do
Motion that answers someone shows what changed.
Don’t
Motion nobody asked for is noise: it tires and distracts.
Where the transition turns off
Things that move every instant, like dragging, drawing, resizing or scrolling a huge list, cannot wait 320ms: the piece would lag behind the finger. In those areas, data-motion="direct" turns the transition off. Outside them, the rule stands.
data-motion="direct"Drag