# Beweging - designsysteem van Unless

Fundamenten

# Beweging
  [Easing](/nl/design/foundations/motion/)[Duur](/nl/design/foundations/motion/duration/)[Beperkte beweging](/nl/design/foundations/motion/reduced-motion/)[Logocombinatie](/nl/design/foundations/motion/logo-lockup/)[Voorbeelden](/nl/design/foundations/motion/examples/)
## Logocombinatie - typemachine bij het scrollen

De logocombinatie in de sitenavigatie krimpt tijdens het scrollen: het beeldmerk blijft staan terwijl de zes letters van het woordmerk van rechts naar links wegvagen, tot alleen het merk overblijft. Scroll je terug naar boven, dan worden ze van links naar rechts weer ingetypt. De twee vertragingen kennen hun richting - de transition-delay van elke toestand bestuurt de animatie náár die toestand, zodat de trap correct omkeert.

- **Eigenschap**: `opacity` op elk `.logo-letter`-pad (de geometrie van het merk beweegt nooit).
- **Duur**: `140ms` per letter (ease).
- **Uitgaande stagger** (gescrold): `280ms` voorsprong zodat de glas- en kleurovergang van de navigatie eerst landt, daarna `+100ms` per letter van rechts→links (posities 6 → 5 → 4 → 3 → 2 → 1 op 280, 380, 480, 580, 680, 780 ms).
- **Inkomende stagger** (terug naar boven): `0ms` als basis, daarna `+100ms` per letter van links→rechts (posities 1 → 2 → 3 → 4 → 5 → 6 op 0, 100, 200, 300, 400, 500 ms).
- **Beperkte beweging**: respecteert `prefers-reduced-motion: reduce` - letters springen tussen toestanden, zonder stagger.

### Live demo

Tik op de knop om het woordmerk in of uit te klappen. Dit is precies wat de sitenavigatie doet zodra je voorbij 8 px scrolt.
             [Beweging · Beperkte beweging](/nl/design/foundations/motion/reduced-motion/)     [Beweging · Voorbeelden](/nl/design/foundations/motion/examples/)