Smooth 3D Scroll-Driven Reveal

This is a Smooth 3D Scroll-Driven Reveal. It replaces the native scroll behavior with a custom, momentum-based scrolling engine that orchestrates complex 3D transforms. Its function is to create a gallery experience where images feel weightless, tilting and translating in 3D space based on their velocity and position relative to the viewport.

Specs

• Weight: ~12 KB (JS + CSS).
• Performance: High. Uses requestAnimationFrame and GPU-accelerated transforms (translate3d, rotate3d) to minimize layout thrashing.

Anatomy

The architecture is class-based, separating the scroll engine from the item logic.

• HTML (The Skeleton): A standard list of .content__item elements wrapped in a .content container. The images are set as background images within a dedicated wrapper to facilitate masking and overflow effects.
• CSS (The Skin): Sets up the perspective on the parent containers to enable 3D depth. Variables like --overflow control the extent of the parallax translation.
• JS (The Nervous System): A SmoothScroll class hijacks the native scroll, calculating momentum and inertia. An Item class is instantiated for each element, observing its intersection and applying per-frame transforms based on scroll velocity and position.

Logic

The core mechanism is the linear interpolation (Lerp) of scroll values combined with randomized 3D rotation.

this.renderedStyles[key].current = this.renderedStyles[key].setValue();
this.renderedStyles[key].previous = MathUtils.lerp(
  this.renderedStyles[key].previous,
  this.renderedStyles[key].current,
  this.renderedStyles[key].ease
);

This “Glyph-logic” ensures that the visual position (previous) always lags slightly behind the actual scroll position (current), creating a fluid, weight-based movement. The random ry and rz values assigned in the constructor give each item a unique “tumble” trajectory, preventing the layout from feeling robotic.

Feel

Floaty and immersive. The content doesn’t just slide up; it drifts. The subtle 3D tilt gives the images a card-like physicality, as if they are suspended in a viscous fluid. The momentum-based scrolling disconnects the content from the rigid 1:1 mouse wheel mapping, making the navigation feel more like flying than scrolling.