Scroll lens

The idea

A small monochrome window opens into a full-colour landscape as you scroll. Instead of watching an animation play, you control its position directly. Scroll backwards and the lens closes again.

Let scroll become time

CSS scroll-driven animations replace a time-based animation timeline with scroll progress. This demo uses a named timeline on its own scrolling frame. A sticky image stays in place while its clip and greyscale filter change.

.frame {  height: 400px;  overflow: auto;  scroll-timeline-name: --lens;  scroll-timeline-axis: block;}
.photo {  animation: reveal linear both;  animation-timeline: --lens;}
@keyframes reveal {  from {    clip-path: circle(12% at 50% 50%);    filter: grayscale(1);  }  to {    clip-path: circle(74% at 50% 50%);    filter: grayscale(0);  }}

The order matters: put animation-timeline after the animation shorthand, which otherwise resets it. The frame is excluded from the site's Lenis handling so the browser owns its native scroll position.

Try this

Scroll inside the photograph, use touch, or focus the frame and press the arrow keys. Switch to manual control to inspect a particular lens opening without scrolling.

Support and restraint

A feature check enables a slider when scroll timelines are unavailable. Reduced motion shows the full photograph in scroll mode. Manual control remains available. There are no JavaScript scroll listeners in this study.

Animating a clip or filter can still cost rendering time. This demo confines the work to one modestly sized image; native syntax is not a guarantee of free rendering.

Further reading

• CSS scroll-driven animations — MDN