Stripe
Product diagrams that play for seconds at a time through the Web Animations API, case-study cards that drift 0.8s on quart-out, a 2s in-out logo swap, and the arrow that slides on every link in 0.3s. The most motion of any site here: 1,600 timed events in one visit.
Tiers
Each curve was read from the browser while visiting stripe.com. The demo is our own element running the same timing.
case study card media drifting on hover
Click the track or Replay.
- Timing
- cubic-bezier(0.165, 0.84, 0.44, 1)
- Duration
- 0.8s
- Property
- transform
- Seen
- CSS transition, on hover, 16×
- On
- a.case-study-card > div.case-study-card__media
diagram strokes moving
Click the track or Replay.
- Timing
- cubic-bezier(0.16, 1, 0.3, 1)
- Duration
- 0.6s
- Property
- transform
- Seen
- CSS transition, on hover, 36×
- On
- svg > path
headline words rising (WAAPI)
Click the track or Replay.
- Timing
- cubic-bezier(0.33, 1, 0.68, 1)
- Duration
- 325ms
- Property
- transform
- Seen
- Web Animations API, on load, 10×
- On
- span > span
link arrow sliding
Click the track or Replay.
- Timing
- cubic-bezier(0.25, 1, 0.5, 1)
- Duration
- 0.3s
- Property
- transform
- Seen
- CSS transition, on load, 21×
- On
- g > g.arrow-group
nav link fade
Click the track or Replay.
- Timing
- cubic-bezier(0.45, 0.05, 0.55, 0.95)
- Duration
- 0.24s
- Property
- opacity
- Seen
- CSS transition, on hover, 1×
- On
- nav#navigation-menu > a.hds-link.navigation-menu-home-link
globe arc labels
Click the track or Replay.
- Timing
- ease-out
- Duration
- 0.15s
- Property
- transform
- Seen
- CSS transition, on hover, 116×
- On
- div.globe__ui-container > div.globe__arc-ui
product graphic sequence (WAAPI, eased per keyframe)
Click the track or Replay.
- Timing
- linear
- Duration
- 4480ms
- Property
- transform
- Seen
- Web Animations API, on hover, 10×
- On
- div > div
developer systems logos swapping
Click the track or Replay.
- Timing
- cubic-bezier(0.9, 0, 0.1, 1)
- Duration
- 2s
- Property
- transform
- Seen
- CSS transition, on hover, 3×
- On
- div.developer-systems-animation__app > div.developer-systems-animation__app-logo
Honest notes
- Reduced motion
- Honored
Movement (transform, position, size): 852 events in the normal run, 54 with reduced motion on (6%). All timed CSS and WAAPI motion: 1600, then 235 (15%). 92 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 2 times.
transition: all- Not seen
0 elements computed
transition-property: allat the end of the visit. 0 declarations in the CSS the page loaded. - Motion in JavaScript
- Yes
Scripts include Framer Motion / Motion, three.js. Motion run on requestAnimationFrame isn't readable from styles, so it isn't in the tiers.
- Canvas
- Motion lives in canvas
A WebGL canvas covers at least a quarter of the viewport. What it draws is out of scope here.
- Posture
- material
At rest, 348 transitions move things (transform, opacity) and 636 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as material.
- Coverage
- One load, 30 elements hovered
Scrolled to the bottom with the mouse wheel, hovered and left a spread sample of links and buttons. Menus, clicks, forms and other pages weren't visited.
Seven viewport-sized WebGL canvases (the globe among them) aren't measured. The long WAAPI sequences carry linear timing on the effect and put their easing on each keyframe (ease-out and quad-out here), so the plotted curve for that tier is linear by construction.
Notes
- Stripe's arrow is cubic-bezier(0.25, 1, 0.5, 1), quart-ish out at 0.3s. It fired on load as the page settled, not only on hover.
- cubic-bezier(0.9, 0, 0.1, 1) is a severe in-out: almost nothing happens for the first and last fifth of its 2 seconds.
- 92 prefers-reduced-motion queries in the CSS, more than any other site measured.