Motion
The motion patterns on clinia.com, with live demos and their timing.
Marketing leverages motion more than product screens do. Every pattern below comes from a curated set. The shared timing and reduced-motion rules are on Motion.
How to choose a pattern
| If the element is… | Use | Timing |
|---|---|---|
| A section, a card or a list | Reveal on scroll | 800ms rise, 250ms fade, +80ms per item |
| A large headline | Headline, line by line | 800ms per line, +80ms per line |
| A row of customer logos | Ticker | 30s per loop, linear |
| A brand line or a chart | Line drawing | 3000ms, ease-in-out |
| A call to action or a text link | Hover and focus | 400 to 750ms |
Reveal on scroll
The default entrance for sections, cards and lists.
Search
Rises 40px and fades in.
Generation
Rises 40px and fades in.
Action
Rises 40px and fades in.
Reveal on scroll
rise 800ms cubic-bezier(0.16, 1, 0.3, 1) · fade 250ms linear · +80ms per item
Headline, line by line
Large headlines slide up one line at a time, each line clipped so it appears from below its own baseline.
Better search isthe key tobetter health.
Headline, line by line
slide up one line 800ms cubic-bezier(0.16, 1, 0.3, 1) · +80ms per line
Ticker
A slow, endless row of customer logos, rendered by Logo Strip. It pauses on hover and off screen, and sits still under reduced motion.
Ticker
Logo Strip · 30s per loop · linear · pauses on hover and off screen
Line drawing
Brand lines draw their stroke in Vital when they come into view, as on Line & shape. Charts draw theirs in Trust (accent).
Line drawing
stroke trace 3000ms cubic-bezier(0.65, 0, 0.35, 1)
Hover and focus
In a CTA, the label rolls up and the arrow slides through its tile. A text link redraws its underline.
Hover and focus
label roll 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86) · arrow out 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), in 200ms cubic-bezier(0.19, 1, 0.22, 1) · underline 750ms cubic-bezier(0.645, 0.045, 0.355, 1)
Illustrated scenes
For bigger background animations, the rules, the kit that builds them and the Rive files are on Scenes.
Do and Don't
Do
- Start motion as its element scrolls into view, staggering a group by 80ms in reading order.
- Keep content visible without JavaScript: hide it only just before it scrolls in.
- Pause every loop off screen, and stop it under reduced motion.
- Give keyboard focus the same effect as hover.
Don't
- Slide content in from the side.
- Run hover motion on touch screens.
- Animate when reduced motion is on: show the end state.
- Animate an SVG with SMIL (
<animate>,<animateMotion>). Reduced motion and CSS can't stop it. Use CSS, Motion or a Rive scene, and rebuild or remove a site's existing SMIL when it migrates.