DEV Community

easyoon
easyoon

Posted on • Edited on • Originally published at devblogeasyoon.xyz

[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.

Image description


📜 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;
}
Enter fullscreen mode Exit fullscreen mode

🎬 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);
});
Enter fullscreen mode Exit fullscreen mode

🖥️ 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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)