Rauno Freiberg
Frames fade in on a 0.35s ease-in-out at load and the minimap tracker changes on a 0.2s ease-in-out with a 0.2s delay. That's all the CSS says; the interesting motion is spring-driven.
The homepage's CSS motion is two fades. The scripts carry Framer Motion and spring physics, which run on requestAnimationFrame and aren't readable from styles, and two of the three hover targets were covered by other elements when the tool reached them.
Tiers
Each curve was read from the browser while visiting rauno.me. The demo is our own element running the same timing.
work frames fading in on load
The site animates a keyframe animation (index_fadeFrames__RAnv2); the demo shows the same timing as movement.
- Timing
- ease-in-out
- Duration
- 0.35s
- Property
- index_fadeFrames__RAnv2
- Seen
- CSS animation, on load, 5×
- On
- div.index_frames__d9hw4 > a.index_frame__XKrH1
minimap tracker opacity
Click the track or Replay.
- Timing
- ease-in-out
- Duration
- 0.2s
- Property
- opacity
- Seen
- CSS transition, in computed style at the end, 4×
- On
- div.c-lesPJm.c-lesPJm-icvxujr-css > a.minimap_tracker__HbSjC
Honest notes
- Reduced motion
- Nothing measured moves
Movement (transform, position, size): 0 events in the normal run, 0 with reduced motion on. All timed CSS and WAAPI motion: 7, then 7 (100%). 0 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 1 time.
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. 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
- material
At rest, 4 transitions move things (transform, opacity) and 8 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as material.
- Coverage
- One load, 3 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.
Notes
- Nothing measured moves position or size, so there was nothing for reduced motion to remove in the CSS.
- The minimap's background and border wait 0.2s before changing; its opacity doesn't wait.