Scroll-Linked Image Reveals With Zero Libraries

You have seen it on every high-end studio site: text scrolls on the right, and a stack of images on the left slides to match. It reads as 'expensive JavaScript.' It is not.

The layout

A two-column CSS grid. The left column is position: sticky. Inside it, absolutely-positioned image layers stacked with increasing z-index.

The mechanic

Each image layer sits at translateY(100%) until its matching text section becomes active, then slides to translateY(0) — covering the previous one like a curtain.

layers.forEach((layer, i) => {
  layer.style.transform =
    `translateY(${i <= active ? "0" : "100%"})`;
});

The trigger

An IntersectionObserver with a tight rootMargin fires when a section hits the viewport center. No scroll listeners, no layout thrash, buttery on mobile.

The whole effect is one transform property and one observer. GSAP is a great library you did not need here.

• No dependencies, ~2KB of JS
• Respects reduced-motion with a media query
• Degrades to a plain list if JS fails