Design system · Motion
Motion, from simple to elaborate.
Seven levels of how our pages can move. Each takes a little more work and has a little more effect. Every example runs live on this page.
Bars show the effort
Level 1 of 7
Hover and transitions
Buttons, cards and links respond as soon as you point at them or tap them. The smallest level, and it belongs on every page.
- Use
- Buttons, cards, links, switches
- Technique
- CSS transitions, 150 to 200 ms
- Effort
- small
Point at the elements, or tab through them with the keyboard.
Level 2 of 7
Reveal on scroll
Sections fade in softly as they come into view, and never so slowly that you have to wait for them.
- Use
- Long pages, references, key figures
- Technique
- CSS scroll timeline or IntersectionObserver, 400 to 600 ms
- Effort
- small
- servers in Germany
- 9
- US services replaced
- 13
- working day to reply
- 1
Scroll inside the window.
Level 3 of 7
Drawing lines
An illustration appears stroke by stroke and then fills in. It guides the eye without being loud.
- Use
- Illustrations, diagrams, check marks in lists
- Technique
- SVG, stroke length via stroke-dashoffset
- Effort
- medium
Loops every 12 seconds.
Level 4 of 7
Motion along paths
Things travel and make a process visible. Here packages pass through eight stations on their way to the server.
- Use
- Explaining processes, such as the pipeline on /qualitaet
- Technique
- CSS keyframes along computed points
- Effort
- medium
Loops continuously.
Level 5 of 7
Tied to scrolling
The motion follows your scrolling, forwards and backwards. The stack assembles layer by layer, at your own reading pace.
- Use
- One explainer per page, such as how our stack is built
- Technique
- CSS scroll timeline, the end state right away where it is not supported
- Effort
- medium
Scroll inside the window, then back.
Level 6 of 7
Responds to mouse and finger
The scene tilts towards the pointer. An eye-catcher that shows someone has thought things through. Nothing important ever depends on it.
- Use
- Single eye-catchers, such as in the hero
- Technique
- Pointer events or CSS zones, tilt via perspective
- Effort
- medium
Move the pointer over the scene, or tap it on a phone.
Level 7 of 7
Scripted scenes
Several parts play to a shared beat: a change leaves the laptop, passes three checks and goes live. For characters, states or real 3D we use Lottie, Rive or Three.js.
- Use
- One hero or explainer, at most one per page
- Technique
- CSS keyframes on a shared beat, Lottie, Rive or Three.js where needed
- Effort
- large
- Change
- Review
- Live
One run takes 10 seconds.
For every level
What always applies.
- Reduce motionIf the system setting is on, everything stands still and shows the finished state.
- One switch stops everythingIn the footer of every page. Loops also stop as soon as they scroll out of view.
- Only position and opacityWe animate transform and opacity. That runs smoothly even on older phones.
- Short durations150 to 200 ms for responses, 400 to 600 ms for reveals, 6 to 12 seconds for loops.
- Nothing flickersNo flashing faster than three times a second, no glow, no gradients.
- Content firstEvery page works without motion. Motion makes things clearer, it does not replace them.
Motion for your website?
In the intro call we tell you which level is worth it. Often the first three are enough.