Vaul
One curve, cubic-bezier(0.32, 0.72, 0, 1) at 0.5s, for the whole drawer: it slides up, the page behind shrinks back and rounds its corners, the overlay fades, and it all leaves the same way.
Tiers
Each curve was read from the browser while visiting vaul.emilkowal.ski. The demo is our own element running the same timing.
drawer sliding up from the bottom
The site animates a keyframe animation (slideFromBottom); the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.32, 0.72, 0, 1)
- Duration
- 0.5s
- Property
- slideFromBottom
- Seen
- CSS animation, after clicking a demo button, 1×
- On
- div.bg-gray-100.flex
page behind scaling back
Click the track or Replay.
- Timing
- cubic-bezier(0.32, 0.72, 0, 1)
- Duration
- 0.5s
- Property
- transform
- Seen
- CSS transition, after clicking a demo button, 2×
- On
- div.relative.light
overlay fading in
The site animates a keyframe animation (fadeIn); the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.32, 0.72, 0, 1)
- Duration
- 0.5s
- Property
- fadeIn
- Seen
- CSS animation, after clicking a demo button, 1×
- On
- div.fixed.inset-0
link colour
The site animates color; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.4, 0, 0.2, 1)
- Duration
- 0.15s
- Property
- color
- Seen
- CSS transition, on hover, 1×
- On
- div.flex.justify-center > a.text-center.mt-4
drawer sliding back down
The site animates a keyframe animation (slideToBottom); the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.32, 0.72, 0, 1)
- Duration
- 0.5s
- Property
- slideToBottom
- Seen
- CSS animation, after clicking a demo button, 1×
- On
- div.bg-gray-100.flex
Honest notes
- Reduced motion
- Not honored
Movement (transform, position, size): 4 events in the normal run, 4 with reduced motion on (100%). All timed CSS and WAAPI motion: 16, then 16 (100%). 0 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 1 time.
transition: all- Used
1 element 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. Motion run on requestAnimationFrame isn't readable from styles, so it isn't in the tiers.
- Canvas
- No viewport-sized WebGL canvas
Nothing here was hidden in a canvas.
- Posture
- spatial
At rest, 1 transitions move things (transform, opacity) and 7 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as material. The entry says otherwise because the tell counts what sits at rest, not what moved during the visit.
- Coverage
- One load, 5 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.
Measured with one opt-in click on the page's own Open Drawer button, then Escape, recorded in the raw file. Dragging the drawer (its main trick) wasn't tried; drag motion follows the pointer and has no timing to measure.
Notes
- The exit uses the same 0.5s and the same curve as the entrance. No faster exit tier.
- With reduced motion on, the drawer still slid: 4 movement events in both runs, and no prefers-reduced-motion query in the CSS.