[Translations] Analyzing Apple Website Animation (1_Scrolling Synchronization)

Original Article Link

---

The official Apple website uses smooth scroll-based animations to highlight its content. In this post, we will analyze and replicate a similar animation to understand its implementation.

---

🎥 Original Apple Website (Video)

---

📜 Reproduced Implementation

1. Scroll Synchronization

• The animation state is calculated in real-time based on the scroll position (scrollY).

2. Bidirectional Animation

• When scrolling down: Text moves upward and fades out, while the video scales down.
• When scrolling up: Text moves downward and reappears, while the video scales up.

3. CSS Property Utilization

• Use transform: translateY and scale values proportional to the scroll position.
• Smooth animation is ensured using requestAnimationFrame.

---

🔧 HTML Structure

The HTML structure consists of a simple layout with text and a background video.

---

📜 Reproduced Implementation

Set up CSS to enable smooth animations based on the scroll position.

/* Text Section */
.text-section {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 2;
}

.video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-video {
  width: 100vw;
  height: auto;
}

---

🎬 JavaScript (Scroll-based Animation)

Calculate the state of the text and video based on the scroll position and update their styles in real-time.

const textSection = document.querySelector(".text-section");
const videoSection = document.querySelector(".video-section");

function handleScroll() {
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;

  const textOpacity = Math.max(0, 1 - scrollY / (windowHeight / 2));
  const textTranslateY = Math.min(scrollY / 2, 100);

  textSection.style.transform = `translateY(-${textTranslateY}px)`;
  textSection.style.opacity = textOpacity;

  const videoScale = Math.max(0.5, 1 - scrollY / (windowHeight * 2));
  videoSection.style.transform = `scale(${videoScale})`;
}

window.addEventListener("scroll", () => {
  requestAnimationFrame(handleScroll);
});

---

🖥️ Key Operation Breakdown

🖥️ Key Functionality Explanation

1. Scroll-based Calculation

• textOpacity: Adjusts the opacity of the text to gradually fade out based on the scroll position.

• textTranslateY: Calculates how far the text moves upward in proportion to the scroll progress.

• videoScale: Adjusts the scaling of the video to shrink proportionally with the scroll position.

1. requestAnimationFrame

• An asynchronous function that enhances animation performance by leveraging the browser's optimized rendering loop for smooth operation.

1. Bidirectional Animation

• Scrolling Down: The text moves upward and fades out, while the video scales down.

• Scrolling Up: The text moves downward and reappears, while the video scales up.