Locomotive
Project images widen on hover over 0.45s on quint-out and shrink back in 0.2s, the preloader logo appears on a 0.9s cubic-out, and the header answers in 0.2s. The big moves are in JavaScript.
Locomotive's scroll and page motion run through Lenis, GSAP, ScrollTrigger, Barba and three.js. None exposed GSAP on window, so the scroll-linked moves aren't readable. The CSS layer below is what the tool could see.
Tiers
Each curve was read from the browser while visiting locomotive.ca. The demo is our own element running the same timing.
preloader logo appearing
The site animates a keyframe animation (preloaderAppear); the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.215, 0.61, 0.355, 1)
- Duration
- 0.9s
- Property
- preloaderAppear
- Seen
- CSS animation, on load, 1×
- On
- div.c-preloader_inner > div.c-preloader_logo
project image widening on hover
The site animates width; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.23, 1, 0.32, 1)
- Duration
- 0.45s
- Property
- width
- Seen
- CSS transition, on hover, 3×
- On
- div.c-featured-links_title > div.c-image.c-featured-links_visual
header shifting on hover
Click the track or Replay.
- Timing
- cubic-bezier(0.215, 0.61, 0.355, 1)
- Duration
- 0.2s
- Property
- transform
- Seen
- CSS transition, on hover, 1×
- On
- header > div.c-header
project image narrowing as the pointer leaves
The site animates width; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.23, 1, 0.32, 1)
- Duration
- 0.2s
- Property
- width
- Seen
- CSS transition, when the pointer left, 3×
- On
- div.c-featured-links_title > div.c-image.c-featured-links_visual
featured list flash
The site animates a keyframe animation (featuredProjectsAllFlash); the demo shows the same timing as movement.
- Timing
- linear
- Duration
- 2s
- Property
- featuredProjectsAllFlash
- Seen
- CSS animation, on load, 1×
- On
- li.c-featured-links_item > div.c-featured-links_title::before
Honest notes
- Reduced motion
- Not honored
Movement (transform, position, size): 16 events in the normal run, 16 with reduced motion on (100%). All timed CSS and WAAPI motion: 20, then 20 (100%). 5 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 0 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 GSAP, ScrollTrigger, Lenis, three.js, Barba. 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, 6 transitions move things (transform, opacity) and 7 change surfaces (colour, shadow, background, filter), and 2 elements loop. 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, 12 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.
The project image animates width, which triggers layout on every frame. Five prefers-reduced-motion queries are in the CSS, but the 16 movement events seen ran the same with reduced motion on.
Notes
- A faster exit, by state: the hover rule says 0.45s and the resting rule says 0.2s, so arriving takes more than twice as long as leaving.
- The two long curves are the usual stand-ins for cubic-out (0.215, 0.61, 0.355, 1) and quint-out (0.23, 1, 0.32, 1).