Building Apple’s Vision Pro Scrolly Animation with Pure CSS

By ● min read

<h2>Introduction</h2><p>Apple’s product pages are renowned for their captivating scroll-driven animations, often referred to as scrolly teardowns. These animations traditionally rely on JavaScript and other technologies, and they aren’t always responsive—Apple frequently switches to a static image on smaller screens. However, recent advancements in CSS have introduced native scrolling animation capabilities, sparking the question: can one of these sophisticated animations be rebuilt using only CSS, and can it be fully responsive? This article explores the recreation of the stunning <strong>Vision Pro</strong> component animation, which reveals the device’s internal hardware through a multi-stage scrolling effect.</p><figure style="margin:20px 0"><img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/03/apple-vision-pro.webp" alt="Building Apple’s Vision Pro Scrolly Animation with Pure CSS" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: css-tricks.com</figcaption></figure><h2>The Original Animation</h2><p>On the Vision Pro product page, after scrolling past the hero section, users encounter a black background with an immersive animation. The animation unfolds in <strong>two distinct stages</strong>, each designed to showcase the device’s intricate layers and final form.</p><h3>Stage 1: The “Exploding” Hardware</h3><p>Three electronic components rise sequentially from the base of the screen, each comprised of layered images that create a 3D depth effect. The outermost component acts as both the frontmost and hindmost layer, wrapping around the middle component, which in turn envelops the innermost piece. This clever use of transparency and layering gives the illusion of components floating and interlocking.</p><ul><li><strong>Outer layer (sub roll):</strong> Appears both in front of and behind the middle layer.</li><li><strong>Middle layer (hot dog bun):</strong> Wraps around the third component, adding depth.</li><li><strong>Inner layer (bread stick):</strong> The central piece, visible through transparent areas of the outer layers.</li></ul><h3>Stage 2: Flip-Up to Eyepieces</h3><p>Once the hardware finishes exploding, the entire device flips upward in a smooth motion to reveal the eyepieces. Apple implements this part using a video, where scrolling controls the video timeline via JavaScript.</p><h2>Recreating with Pure CSS</h2><p>The goal was to replicate both stages using only CSS, making the animation responsive across devices. The original approach leaned heavily on JavaScript and fixed positioning, but a CSS-only solution required rethinking layout and scroll interaction.</p><h3>Approach and Techniques</h3><p>Apple’s images were used directly—six <code>background-image</code> layers, each positioned at <code>background-position: bottom center</code>. This avoids the pitfalls of <code>&lt;img&gt;</code> tags and allows easy scaling. The key breakthrough was using <code>background-size: cover</code> or <code>contain</code> to ensure responsiveness.</p><ol><li><strong>Fixed positioning dropped:</strong> Instead of <code>position: fixed</code> (which caused images to overflow on narrow screens), a combination of <code>position: sticky</code> and viewport-relative units kept the images anchored without breaking the scroll flow.</li><li><strong>Scroll-driven animation:</strong> CSS <code>animation</code> tied to <code>scroll()</code> triggers (using the <code>animation-timeline</code> property) controlled the sequential appearance of each component.</li><li><strong>Layering order:</strong> A <code>z-index</code> stacking technique recreated the “sub roll” effect, with each layer partially transparent to show layers beneath.</li></ol><h3>Challenges and Solutions</h3><p>The main hurdles were responsiveness and browser compatibility. Initially, using <code>position: fixed</code> made the images escape the viewport on narrow screens. The fix involved switching to a sticky container that stays at the bottom until triggered by scroll, while using <code>background-size: cover</code> to maintain aspect ratio. Additionally, the video-based flip-up stage was replaced by a CSS animation that shifts the device’s transform (rotateX) based on scroll progress.</p><p>At the time of writing, this CSS-only approach works in Chrome and Safari but <strong>not in Firefox</strong>, due to partial support for <code>animation-timeline: scroll()</code>. In Firefox, users will see a static fallback image.</p><h3>Implementation Summary</h3><p>The final code uses:<ul><li><strong>Scroll containers</strong> with <code>position: sticky</code> to keep the animation zone fixed while scrolling.</li><li><strong>Multiple background layers</strong> on a single element, animated via <code>@scroll-timeline</code> and <code>animation</code>.</li><li><strong>Keyframes</strong> that control opacity, scale, and translation of each component to mimic the rising and flipping effects.</li></ul></p><h2>Conclusion</h2><p>Recreating Apple’s intricate scroll animation with pure CSS is not only possible but also yields a responsive, lightweight implementation. While browser support remains a limitation, the approach demonstrates how far CSS has come in handling complex interactions once reserved for JavaScript. As browser vendors continue to adopt scroll-driven animations, such CSS-only techniques will become more robust and widely compatible.</p><p>For a live demo, check the original project on CodePen (link placeholder). The code is open-source and adaptable for other product pages wanting to emulate Apple’s visual storytelling without heavy JavaScript dependencies.</p>