# Bewegung

Nichts ändert sich in einem Sprung, und nichts bewegt sich, es sei denn, jemand fragt. Gebunden an Energie (was passiert, wird als geschehend gesehen) und an das „nie störend".

## Every change of state is a transition

Farben von Tag bis Nacht, Platz bei Dichteänderungen, Größe beim Wachsen des Inhalts, Hover. Eine Dauer und eine Kurve, die weich beginnt und weich landet. Feitios Basis-CSS tut dies bereits für jedes Element.

**Change of state**`320ms, cubic-bezier(0.3, 0, 0.2, 1)`

Starts soft, speeds up in the middle and lands without overshooting.

**Placed paper**`260ms, cubic-bezier(0.2, 0.9, 0.3, 1.25)`

Blätter fallen schnell und gehen leicht über das Ende hinaus, bevor sie sich festsetzen: der kleine Sprung von Papier, das auf den Tisch fällt.

The dots move four times slower than real.

## Papier platziert

So kommen schwebende Dinge an: ein ausgeschnittenes Blatt, das sich auf dem Tisch festsetzt, leicht gedreht wird und einen Schatten wirft, begleitet von einem kleinen Sprung. Nur wenn jemand handelt.

### Einmal pro Papier

Wenn eine Aktion mehrere Dinge erscheinen lässt, kommt nur eines als platziertes Papier an: dasjenige, das zur Person spricht, wie die Benachrichtigung, dass es funktioniert hat. Die anderen gleiten ein, wie eine neue Zeile in einer Liste, die Platz schafft und die darunterliegenden vorstoßt. Zwei Papiere, die gleichzeitig landen, konkurrieren um den Blick und sehen aus wie Chaos.

## Reduzierte Bewegung

Wenn das System nach weniger Bewegung fragt, gibt es keine. Keine Übergänge, kein platziertes Papier.

## Nichts bewegt sich, bis jemand fragt

Do

Das Menü erscheint, wenn die Person klickt.

Bewegung, die auf jemanden antwortet, zeigt an, was geändert wurde.

Don’t

Jeder Abschnitt gleitet beim Scrollen ein, und Karten springen beim Hovern.

Bewegung, die niemand verlangt, ist Rauschen: sie ermüdet und ablenkt.

## Wo der Übergang abschaltet

Dinge, die jeden Moment bewegen – wie Ziehen, Zeichnen, Vergrößern oder Scrollen einer riesigen Liste –, können nicht auf 320ms warten: das Element würde hinter dem Finger zurückbleiben. In diesen Bereichen schaltet `data-motion="direct"` den Übergang aus. Außerhalb davon gilt die Regel.

Mit dem ÜbergangZiehen

`data-motion="direct"`Ziehen