Course Outline (Part 34)

Welcome to Part 34 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Custom Scroll-Driven Animations.

Historically, tying page animations (like reading progress indicators or fade-in items) to scroll position required JavaScript scroll event listeners, which caused performance issues and paint lag. Modern CSS introduces native scroll-driven animations, binding @keyframes directly to a scrollbar’s progress or the visibility of an element within the viewport.

Chapter 176: Introduction to Scroll-Driven Animations

Scroll-driven animations shift the animation timeline from time-based (seconds or milliseconds) to scroll-based (percentage scrolled).

[1] Time vs. Scroll Timelines

In standard animations, progress goes from 0s to 3s. In scroll animations, progress goes from 0% (start of scroll container) to 100% (end of scroll container).

@keyframes fill-progress {
  from { width: 0%; }
  to { width: 100%; }
}

.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #3b82f6;
  width: 0;
  /* Link animation to the document scroll */
  animation: fill-progress auto linear;
  animation-timeline: scroll(root);
}

Chapter 177: Scroll Progress Timelines (scroll())

The scroll() function binds the animation timeline to the scroll position of a ancestor container.

[2] Scroll Timeline Parameters

The scroll() function takes two optional arguments:

  • Scroll Container Source: nearest (default), root (document root), or self.
  • Scroll Axis: block (default - vertical scroll), inline (horizontal scroll), y, or x.
/* Custom Scroll Container Animation */
.timeline-container {
  overflow-y: scroll;
  scroll-timeline-name: --my-scroll-timeline; /* Declare custom scroll timeline name */
  scroll-timeline-axis: block;
}

.timeline-item {
  animation: fade-in auto linear;
  animation-timeline: --my-scroll-timeline; /* Connect child animation to parent scroll */
}

Chapter 178: View Progress Timelines (view())

While scroll() tracks the entire scroll track, view() tracks an element as it enters and leaves the scroll viewport. This is perfect for fade-in animations.

[3] View Timelines and Threshold Ranges

The view() function tracks the target element. You can define where the animation starts and ends using animation-range:

@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-section {
  animation: slide-up-fade auto linear;
  animation-timeline: view();
  /* Starts when the element enters from the bottom, ends when it is 30% up the screen */
  animation-range: entry 0% entry 30%;
}

[4] Supported Range Keywords

  • entry: The element begins entering the scrollport.
  • exit: The element begins exiting the scrollport.
  • contain: The element is fully inside the scrollport.

Chapter 179: Scroll Animation Practice & Self-Check

[1] Practice Exercises

  1. Exercise 1: Scroll-Linked Logo Shrink: Build a header with a logo that shrinks from large size to small size as the user scrolls down from the top of the page.

[2] Self-Check Questions

  1. What replaces duration values in scroll-driven animations?
    • Answer: The animation timeline, specified by animation-timeline.
  2. Which function binds an animation to the scrolling of a container?
    • Answer: scroll().
  3. What scroll container sources are supported by scroll()?
    • Answer: nearest, root, and self.
  4. Which axis represents vertical scroll by default?
    • Answer: block (or y).
  5. What is the purpose of the view() timeline?
    • Answer: It animations an element based on its intersection visibility within the scrollable viewport.
  6. What CSS property specifies when a view-driven animation starts and ends?
    • Answer: animation-range.
  7. What range values denote the start and exit of an element crossing the screen viewport?
    • Answer: entry and exit.
  8. Must scroll timelines run at a linear rate?
    • Answer: Yes, they should use linear timing functions to ensure animation frames map 1:1 with scroll travel distances.
  9. What is scroll-timeline-name used for?
    • Answer: It registers a custom named scroll timeline on a parent scrollable block so any descendant element can hook into it.
  10. Are scroll-driven animations supported natively in all older browsers?
    • Answer: No, they are a modern CSS standard, so older browsers will ignore the rules and fall back to static layouts without crashing.

Discussion

Loading comments...