Motion
The animation library's own site runs its springs through the Web Animations API as sampled linear() curves: a 1.75s text settle, 0.6s list arrivals. Underneath, a conversation demo enters on 240ms ease-out and leaves on 160ms ease-in.
Tiers
Each curve was read from the browser while visiting motion.dev. The demo is our own element running the same timing.
text settling in on a spring (WAAPI)
Click the track or Replay.
- Timing
- linear(0 0%, 0.0009 0.5747126436781609%, 0.0036 1.1494252873563218%, 0.0079 1.7241379310344827%, 0.0137 2.2988505747126435%, 0.0208 2.8735632183908044%, 0.0291 3.4482758620689653%, 0.0385 4.022988505747126%, 0.0489 4.597701149425287%, 0.0602 5.172413793103448%, 0.0723 5.74712643678161%, 0.085 6.321839080459771%, 0.0984 6.896551724137932%, 0.1123 7.471264367816094%, 0.1267 8.045977011494255%, 0.1414 8.620689655172416%, 0.1566 9.195402298850578%, 0.172 9.770114942528739%, 0.1876 10.3448275862069%, 0.2034 10.919540229885062%, 0.2194 11.494252873563223%, 0.2354 12.068965517241384%, 0.2515 12.643678160919546%, 0.2677 13.218390804597707%, 0.2838 13.793103448275868%, 0.2999 14.36781609195403%, 0.3159 14.942528735632191%, 0.3319 15.517241379310352%, 0.3477 16.091954022988514%, 0.3635 16.666666666666675%, 0.379 17.241379310344836%, 0.3944 17.816091954022998%, 0.4096 18.39080459770116%, 0.4247 18.96551724137932%, 0.4395 19.54022988505748%, 0.4541 20.114942528735643%, 0.4685 20.689655172413804%, 0.4827 21.264367816091966%, 0.4966 21.839080459770127%, 0.5103 22.41379310344829%, 0.5237 22.98850574712645%, 0.5369 23.56321839080461%, 0.5499 24.137931034482772%, 0.5625 24.712643678160934%, 0.575 25.287356321839095%, 0.5871 25.862068965517256%, 0.599 26.436781609195418%, 0.6107 27.01149425287358%, 0.622 27.58620689655174%, 0.6332 28.1609195402299%, 0.644 28.735632183908063%, 0.6546 29.310344827586224%, 0.665 29.885057471264385%, 0.6751 30.459770114942547%, 0.6849 31.034482758620708%, 0.6945 31.60919540229887%, 0.7039 32.18390804597703%, 0.713 32.75862068965519%, 0.7219 33.33333333333335%, 0.7305 33.90804597701151%, 0.7389 34.48275862068967%, 0.7471 35.057471264367834%, 0.7551 35.632183908045995%, 0.7628 36.20689655172416%, 0.7704 36.78160919540232%, 0.7777 37.35632183908048%, 0.7848 37.93103448275864%, 0.7917 38.5057471264368%, 0.7985 39.08045977011496%, 0.805 39.655172413793125%, 0.8113 40.229885057471286%, 0.8175 40.80459770114945%, 0.8235 41.37931034482761%, 0.8293 41.95402298850577%, 0.8349 42.52873563218393%, 0.8403 43.10344827586209%, 0.8456 43.678160919540254%, 0.8508 44.252873563218415%, 0.8557 44.82758620689658%, 0.8606 45.40229885057474%, 0.8652 45.9770114942529%, 0.8698 46.55172413793106%, 0.8742 47.12643678160922%, 0.8784 47.70114942528738%, 0.8825 48.275862068965544%, 0.8865 48.850574712643706%, 0.8904 49.42528735632187%, 0.8941 50.00000000000003%, 0.8978 50.57471264367819%, 0.9013 51.14942528735635%, 0.9047 51.72413793103451%, 0.9079 52.298850574712674%, 0.9111 52.873563218390835%, 0.9142 53.448275862068996%, 0.9172 54.02298850574716%, 0.92 54.59770114942532%, 0.9228 55.17241379310348%, 0.9255 55.74712643678164%, 0.9281 56.3218390804598%, 0.9306 56.896551724137964%, 0.9331 57.471264367816126%, 0.9354 58.04597701149429%, 0.9377 58.62068965517245%, 0.9399 59.19540229885061%, 0.942 59.77011494252877%, 0.9441 60.34482758620693%, 0.9461 60.919540229885094%, 0.948 61.494252873563255%, 0.9498 62.068965517241416%, 0.9516 62.64367816091958%, 0.9533 63.21839080459774%, 0.955 63.7931034482759%, 0.9566 64.36781609195405%, 0.9582 64.94252873563221%, 0.9597 65.51724137931036%, 0.9611 66.09195402298852%, 0.9625 66.66666666666667%, 0.9639 67.24137931034483%, 0.9652 67.81609195402298%, 0.9664 68.39080459770113%, 0.9676 68.96551724137929%, 0.9688 69.54022988505744%, 0.9699 70.11494252873561%, 0.971 70.68965517241378%, 0.9721 71.26436781609193%, 0.9731 71.83908045977009%, 0.9741 72.41379310344826%, 0.975 72.98850574712642%, 0.9759 73.56321839080458%, 0.9768 74.13793103448273%, 0.9777 74.7126436781609%, 0.9785 75.28735632183907%, 0.9793 75.86206896551722%, 0.98 76.43678160919538%, 0.9808 77.01149425287355%, 0.9815 77.58620689655172%, 0.9822 78.16091954022987%, 0.9828 78.73563218390802%, 0.9835 79.31034482758619%, 0.9841 79.88505747126436%, 0.9847 80.45977011494251%, 0.9852 81.03448275862067%, 0.9858 81.60919540229884%, 0.9863 82.183908045977%, 0.9868 82.75862068965516%, 0.9873 83.33333333333331%, 0.9878 83.90804597701148%, 0.9882 84.48275862068965%, 0.9887 85.0574712643678%, 0.9891 85.63218390804596%, 0.9895 86.20689655172413%, 0.9899 86.7816091954023%, 0.9903 87.35632183908045%, 0.9906 87.9310344827586%, 0.991 88.50574712643677%, 0.9913 89.08045977011494%, 0.9917 89.6551724137931%, 0.992 90.22988505747125%, 0.9923 90.80459770114942%, 0.9926 91.37931034482759%, 0.9928 91.95402298850574%, 0.9931 92.5287356321839%, 0.9934 93.10344827586206%, 0.9936 93.67816091954023%, 0.9939 94.25287356321839%, 0.9941 94.82758620689654%, 0.9943 95.40229885057471%, 0.9945 95.97701149425288%, 0.9947 96.55172413793103%, 0.9949 97.12643678160919%, 1 97.70114942528735%, 1 98.27586206896552%, 1 98.85057471264368%, 1 99.42528735632183%, 1 100%)
- Duration
- 1750ms
- Property
- opacity
- Seen
- Web Animations API, while scrolling, 6×
- On
- span > span
collection items arriving on a spring (WAAPI)
Click the track or Replay.
- Timing
- linear(0 0%, 0.0065 1.694915254237288%, 0.0243 3.389830508474576%, 0.051 5.084745762711864%, 0.0845 6.779661016949152%, 0.1231 8.474576271186441%, 0.1653 10.16949152542373%, 0.21 11.864406779661019%, 0.256 13.559322033898308%, 0.3026 15.254237288135595%, 0.349 16.949152542372882%, 0.3947 18.64406779661017%, 0.4393 20.338983050847457%, 0.4824 22.033898305084744%, 0.5237 23.72881355932203%, 0.5632 25.42372881355932%, 0.6005 27.118644067796605%, 0.6357 28.813559322033893%, 0.6688 30.50847457627118%, 0.6997 32.20338983050847%, 0.7284 33.89830508474576%, 0.755 35.593220338983045%, 0.7797 37.28813559322033%, 0.8023 38.98305084745762%, 0.8232 40.677966101694906%, 0.8422 42.37288135593219%, 0.8596 44.06779661016948%, 0.8754 45.76271186440677%, 0.8898 47.457627118644055%, 0.9027 49.15254237288134%, 0.9145 50.84745762711863%, 0.925 52.54237288135592%, 0.9345 54.237288135593204%, 0.943 55.93220338983049%, 0.9505 57.62711864406778%, 0.9573 59.322033898305065%, 0.9633 61.01694915254235%, 0.9686 62.71186440677964%, 0.9732 64.40677966101693%, 0.9774 66.10169491525421%, 0.981 67.7966101694915%, 0.9841 69.49152542372879%, 0.9869 71.18644067796608%, 0.9893 72.88135593220336%, 0.9913 74.57627118644065%, 0.9931 76.27118644067794%, 0.9947 77.96610169491522%, 0.996 79.66101694915251%, 0.9971 81.3559322033898%, 0.998 83.05084745762709%, 0.9988 84.74576271186437%, 0.9994 86.44067796610166%, 0.9999 88.13559322033895%, 1.0003 89.83050847457623%, 1.0007 91.52542372881354%, 1.001 93.22033898305082%, 1 94.91525423728811%, 1 96.61016949152541%, 1 98.30508474576271%, 1 100%)
- Duration
- 600ms
- Property
- opacity
- Seen
- Web Animations API, while scrolling, 1×
- On
- ul.lnl-collection-row > li
primary button wipe on hover
The site animates clip-path; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.25, 0, 0, 1)
- Duration
- 0.4s
- Property
- clip-path
- Seen
- CSS transition, on hover, 5×
- On
- a.fresh-primary-action.product-nav-plus > span.fresh-primary-action-content.fresh-primary-action-content--hover
conversation turn arriving (WAAPI)
Click the track or Replay.
- Timing
- ease-out
- Duration
- 240ms
- Property
- transform
- Seen
- Web Animations API, while scrolling, 1×
- On
- div.sth-conversation > div.sth-current
play button scale on hover
The site animates scale; the demo shows the same timing as movement.
- Timing
- ease-out
- Duration
- 0.16s
- Property
- scale
- Seen
- CSS transition, on hover, 1×
- On
- div.sth-transport > button.sth-play
conversation turn leaving (WAAPI)
Click the track or Replay.
- Timing
- ease-in
- Duration
- 160ms
- Property
- transform
- Seen
- Web Animations API, while scrolling, 1×
- On
- div.sth-conversation > div.sth-current
Honest notes
- Reduced motion
- Honored
Movement (transform, position, size): 6 events in the normal run, 0 with reduced motion on (0%). All timed CSS and WAAPI motion: 176, then 96 (55%). 20 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 26 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, GSAP, Lenis, ScrollTrigger. 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, 89 transitions move things (transform, opacity) and 107 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.
A WebGL canvas and fifteen videos carry some of the page; they aren't measured. Scripts also include GSAP and Lenis fingerprints.
Notes
- The 1.75s spring is 175 linear() stops and never overshoots. The 0.6s springs peak at 1.001 and 1.0024: a hair of bounce.
- Exits are two thirds of entrances here: 240ms in, 160ms out, ease-out then ease-in.
- Reduced motion removed all 6 movement events and about half the fades.