Skip to main content
Landon Gavin

Cube Scroll Performance Tests

Test different approaches to find the most responsive scroll-linked animation

CSS Scroll-Driven Animation

Uses native CSS animation-timeline: scroll() - newest API, best performance if supported

/test-cube-1

Wheel Event + React State

Uses onWheel event handler, stores rotation in React state

/test-cube-2

Wheel Event + Direct DOM

Uses wheel event listener, directly updates element.style.transform

/test-cube-3

Scroll + RAF Batching

Uses scroll event with requestAnimationFrame batching

/test-cube-4

CSS Custom Properties

Updates a CSS variable, lets CSS handle the transform

/test-cube-5

Simple 2D Rotation (Baseline)

No 3D transforms - if this is laggy, the issue is scroll events in general

/test-cube-6

Testing Notes:

  • • Tests 1, 4, 5, 6 use page scroll (scroll down to rotate)
  • • Tests 2, 3 use wheel events (scroll/trackpad without page scrolling)
  • • If Test 6 (2D) is smooth but 3D tests lag, the issue is 3D rendering
  • • If all tests lag, the issue is with scroll event handling

New: Full Complexity Tests

These simple tests use basic cubes. For testing with the actual homepage complexity (wireframes, 6 faces, hover states, floating animation):

→ Performance Test Suite