Recreating Apple Vision Pro Scroll Animations with Modern CSS

Recreating Apple’s Vision Pro Animation in CSS | CSS-Tricks

John Rhea demonstrates a pure CSS recreation of the Apple Vision Pro hardware teardown animation. The original Apple implementation utilizes JavaScript to advance video frames, while this method leverages native browser scrolling APIs.

Why This Matters

While high-end product sites often rely on JavaScript-heavy video manipulation for scroll-based storytelling, modern CSS features allow developers to achieve similar results with less imperative code. This transition to CSS-driven timelines improves responsiveness and leverages the browser’s optimized animation engine, though it highlights current cross-browser limitations such as the lack of support in Firefox and the heavy asset overhead required to simulate video through discrete image sequences.

Key Insights

• CSS View Timelines (2023) allow animations to be mapped to an element’s visibility within the viewport, replacing brittle scroll percentage estimates.
• Responsive aspect ratio preservation is achieved by calculating dynamic heights using calc(min(100vw, 960px) * 608 / 960) to maintain visual consistency across viewports.
• The ‘CSS Video’ technique uses @keyframes to swap background-image URLs, though it requires preloading 60+ individual assets to avoid scroll choppiness.
• CSS Grid provides a superior alternative to absolute positioning for overlapping layers by assigning multiple elements to the same grid-area: 1 / 1 / 2 / 2.

Working Examples

Using CSS Grid to stack hardware components without pulling them out of the document flow.

.visionpro {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.part {
  grid-area: 1 / 1 / 2 / 2;
}

Responsive height calculation to ensure components translate correctly regardless of viewport size.

:root {
  --stage2-height: calc(min(100vw, 960px) * 608 / 960);
}
@media screen and (max-height: 608px) {
  :root {
    --stage2-height: 100vh;
  }
}

Fine-tuning animation start and end points relative to the element’s position in the viewport.

.part {
  animation-range: contain cover;
}
.stage2 {
  animation-range: cover 10% contain;
}

Practical Applications

• Use case: Utilizing position: sticky within a container to pin complex hardware teardown visuals while the user scrolls through animation stages. Pitfall: Over-reliance on discrete image swaps for video effects can lead to high server requests and performance lag without .
• Use case: Implementing animation-range: contain to ensure product components only begin ‘exploding’ once the entire device is visible. Pitfall: Using viewport units (vh) on iOS can lead to inconsistent height calculations due to dynamic browser chrome.

References:

• https://css-tricks.com/recreating-apples-vision-pro-animation-in-css/