A developer has successfully recreated Apple’s intricate Vision Pro scrollytelling animation using nothing but CSS, challenging the long-held assumption that such effects require JavaScript. The project, detailed exclusively to our publication, demonstrates that modern CSS can handle multi-layered, responsive scroll animations that were once the domain of heavy JS libraries.
“I’ve been wowed by CSS’s recent scrolling animation capabilities and wondered if I could rebuild one of these animations in just CSS and make it responsive,” said the developer, who asked to remain anonymous. “CSS sure has come a long way since the last attempt in this publication.”
The original Apple animation—seen on the Vision Pro product page—features two major stages: an “exploding” hardware sequence and a flip-up to reveal eyepieces. Until now, such effects relied on JavaScript-driven scroll events and video playback. The CSS-only version, however, uses only CSS scroll-driven animations and background properties to achieve identical visual results.
Background
Apple’s product pages have long set the standard for scrolly teardowns—animations that unfold as the user scrolls. Traditionally, these are built with JavaScript to control element positions, opacity, and video scrubbing. They also often break on smaller screens, forcing Apple to swap to a static image at certain widths.
In recent years, CSS has gained native support for scroll-linked animations via the scroll-timeline and view-timeline specifications. This project proves these new capabilities can replicate even the most polished Apple-level animations—without a single line of JavaScript.
Stage 1: ‘Exploding’ Hardware
The first part of the animation shows three electronic components rising sequentially from the Vision Pro device at the bottom of the page. Each component consists of two images—one in front and one behind—so they appear to wrap around each other like a sub roll around a hot dog bun around a bread stick. Transparent areas in the images let underlying components show through, creating a convincing 3D effect.
Apple originally used six separate images. The CSS-only recreation borrows these same images but places them as background images with background-position: bottom center and background-size: cover. The developer initially tried <img> tags with position: fixed, but that approach was not responsive. “I was banging my head against the wall,” the developer admitted. “Then I went back and looked at how Apple constructed it—they used background images at bottom center. That was key.”
Stage 2: Flip-Up to Eyepieces
The final stage flips the device upward to reveal the eyepieces. Apple accomplishes this with a video that advances as the user scrolls, controlled by JavaScript. The CSS version cheekily uses a CSS animation that responds to scroll position, effectively mimicking the same smooth flip motion without any video element.
“I was able to re-create the flip using a series of background-position transitions driven by animation-timeline: scroll(),” the developer explained. “It maps the scroll progress to the animation’s progress.”
What This Means
This project marks a significant milestone for front-end development. It demonstrates that CSS can now handle complex, multi-stage scroll animations that were previously only possible with JavaScript. For developers, this means less code, better performance, and reduced reliance on third-party libraries.
However, the CSS-only version comes with a notable caveat: it does not work in Firefox at the time of writing. While Apple’s original works across all major browsers, the CSS implementation relies on scroll-driven animation specs that Mozilla has not yet fully implemented. This limits its current production use.
Despite the browser gap, the achievement signals a future where CSS takes on even more interactive tasks. “We’re moving toward a world where CSS can handle the heavy lifting of scroll animations,” said a web standards advocate not involved in the project. “This recreation is a proof of concept that the specs are powerful enough—we just need browsers to catch up.”
For now, developers can inspect the stage 1 and stage 2 source code—shared in the developer’s write-up—to learn how to apply similar techniques to their own projects. The full code is available online (link pending).