Creating Dynamic Scroll-Based Animations with CSS view()

The CSS animation-timeline property can utilize a view() function. This function generates a timeline that reflects how much of an element is visible within the scrollable area of a container, known as a scrollport. Essentially, instead of animations progressing linearly over time, view() drives them based on the animated element’s visibility inside the scrollport.

This functionality can be compared to JavaScript’s Intersection Observer. It enables animations to trigger as an element enters and exits the scrollport.

Consider this example:

In this demonstration, images within a scrollable carousel appear small and blurry at the sides, gradually becoming larger and clearer as they approach the center. Scroll snapping is also incorporated to ensure each image item pauses distinctly. Achieving this effect is straightforward, as it involves applying standard CSS animations to a view timeline rather than a traditional time-based one.

But first, the general layout

The foundation of this example is a `.carousel` element:

<main class="carousel">
  <!-- scroll items -->
</main>

The elements within `.carousel` are arranged in a single row using flexbox. Any content that overflows its space is made scrollable:

.carousel {
  display: flex;
  width: max(480px, 50vw);
  overflow-x: auto;
}

Naturally, the carousel requires individual items, such as image slides, to be scrollable.

<main class="carousel">
  <div class="carousel-slide">
    <!-- (optional) empty bookend slide -->
  </div>
  <div class="carousel-slide">
      <img src="image-1.jpeg" alt="alt text for image 1">
  </div>
  <div class="carousel-slide">
      <img src="image-2.jpeg" alt="alt text for image 2">
  </div>
  <!-- etc -->
  <div class="carousel-slide">
    <!-- (optional) empty bookend slide -->
  </div>
</main>

For styling these items, each one is set to occupy one-third of the available space, allowing three items to be visible simultaneously during scrolling:

.carousel {
  /* same as before */

  .carousel-slide {
    flex-shrink: 0;
    width: calc(100% / 3); /* show three at a time */
    aspect-ratio: .8;
    img {
      width: 100%;
    }
  }
}

Then the scrolling

The `.carousel` element has already been designated as the scroll container by setting `overflow-x`. Scroll snapping can be added to ensure that only one item scrolls into view at a time.

.carousel {
  /* same as before */

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* optional for smooth scrolling */
  scrollbar-width: none; /* optional to hide the scrollbar */
}

To ensure the slides align to the center of the scroll container when they snap into place, additional styling is applied:

.carousel-slide {
  /* etc. */
  scroll-snap-align: center;
}

Next, the animation

An interesting aspect of view timeline animations is their similarity to conventional CSS keyframe animations. In this scenario, keyframes are defined so that carousel items are small and blurry at the animation’s start and end points, becoming larger and clearer when positioned in the middle.

@keyframes slide {
  /* from start to 45%, and to the end (100%) */
  45%, 100% {
    transform: scale(0.5);
    border-radius: 20px;
    filter: blur(6px) brightness(.8);
  }
  /* middle */
  50% {
    transform: scale(1);
    border-radius: 4px;
    filter: none;
  }
}

This structure is likely familiar to anyone experienced with CSS animations. The animation is applied to the target element in the usual manner:

.carousel-slide {
  /* etc. */
  animation: slide; 
}

The key distinction is the desire for the animation to run on a timeline based on the element’s current view() rather than the default timeline. This is where the `animation-timeline` property becomes essential:

.carousel-slide {
  /* etc. */
  animation: slide; 
  animation-timeline: view(inline);
}

While it is technically possible to include the timeline directly within the `animation` shorthand property (like `animation-name`, `animation-delay`, `animation-duration`, etc.), this method is not yet widely supported by browsers. Therefore, declaring `animation-timeline` as a separate property is currently the recommended approach. It is crucial to declare it after the `animation` shorthand to prevent inadvertently overriding the view timeline with the default `auto` value.

This completes the demonstration. Essentially, a CSS animation is configured to execute based on an element’s visibility within the scrollport, rather than a fixed time duration. This distinction defines the core difference between standard and view timelines.

view() vs. scroll()

The `view()` timelines are part of a broader set of features known as CSS Scroll-Driven Animations. The `animation-timeline` property also supports the `scroll()` function.

The `scroll()` function generates a scroll progress timeline linked to a container’s scroll position, whereas `view()` creates a view progress timeline based on an element’s visibility within its container.

Both functions offer distinct advantages. Generally, `view()` is well-suited for item-specific reveal effects. For instance, if the goal is to animate a slide only as that specific slide scrolls into the scrollport, the `view()` function is ideal. This is why it was chosen for the carousel example—to track an element’s position in the scrollport and animate it accordingly.

Inset parameter and animation-range

The `view()` function accepts parameters, which might prompt questions about their purpose. CSS `view()` takes two arguments: axis (block, inline, x, and y) and the inset. The inset parameter defines an offset from the scrollport’s edges, within which the animated element is tracked. The official syntax is as follows:

animation-timeline: view(<axis> <view-timeline-inset>);

This allows for precise control over the specific areas of the scrollport that trigger the animation. For some animations, simply starting and ending the timeline when an element fully enters and exits the scrollport might result in an incomplete effect.

This can lead to a staggered appearance, as items are at different points in the view timeline, rather than fully sliding in when they fully enter the scrollport. This is where the inset parameter becomes crucial. It allows for greater specificity, such as instructing each element to begin its animation when it appears from the bottom of the scrollport.

animation: slide-in linear both;
animation-timeline: view(100% 0%);

The animation-range property functions similarly.

animation-range: entry; /* same as: entry 0 entry 100%; */

The `animation-range` property supports various keywords, including `exit` (when the element leaves the scrollport), `cover` (when the element begins to enter and begins to leave the scrollport), and `contain` (when the element fully enters and then fully leaves the scrollport), among others. Geoff Graham has provided extensive notes and examples detailing each of these.

One last carousel example

Common carousel effects include fading, scaling, and parallax. However, since most CSS properties are animatable, and even those that aren’t can be made so using registered CSS properties (as seen with gradient lines), there are opportunities to explore more creative applications of `view()` for carousels.

An example demonstrates how animating only the background position can create a smooth movement within a carousel.