Native Scroll Animations & Anchor Positioning: Browser APIs Replace Thousands of Lines of JS

1. Scroll Progress Handed to Timelines

The core API is animation-timeline: animations no longer bind to time but to scroll position. The scroll() function targets the nearest scroll container, while scroll(root block) targets the document scroller. For element-in-viewport scenarios, view() is used.

.progress {
  animation: grow linear;
  animation-timeline: scroll(root block);
  animation-range: 0% 100%;
}
@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

animation-range

supports cover, contain, entry, exit keywords combined with percentages to define precise trigger ranges. Parallax and sticky headers use the same pattern, only adjusting the translate magnitude.

Timelines can be named and shared across nesting levels via timeline-scope, scroll-timeline-name, and scroll-timeline-axis:

.page { timeline-scope: --page; }
.scroller { scroll-timeline-name: --page; scroll-timeline-axis: block; }
.bar { animation-timeline: --page; }

The key difference lies in execution location: scroll-driven animation progress advances on the compositor thread, so animations remain smooth even when the main thread is blocked by long tasks. Traditional scroll listeners cannot achieve this; once a callback queues behind a long task, visual jank appears.

Two caveats: the performance advantage only applies to compositable properties like transform and opacity; switching to width, height, or box-shadow forfeits the benefit. A fallback for reduced motion must be manually added — when the animation is disabled, the element should settle at its end state, otherwise content stays invisible.

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; opacity: 1; transform: none; }
}

2. Floating Layer Position Handed to Anchors

Anchor positioning declares a trigger element as an anchor, then lets the floating layer declare its relative position.

.trigger { anchor-name: --menu; }
.menu {
  position: absolute;
  position-anchor: --menu;
  position-area: bottom span-right;
  margin-top: 8px;
}

position-area

divides the anchor's surroundings into a 3x3 grid; bottom span-right places the menu below, spanning horizontally. When the anchor scrolls out of view, the floating layer can auto-dismiss via position-visibility: anchors-visible.

.menu {
  position-visibility: anchors-visible;
}

Flip logic when space is insufficient moves from JavaScript calculations to a set of candidate declarations:

.menu {
  position-try-fallbacks: --flip-block;
}
@position-try --flip-block {
  position-area: top span-right;
  margin-bottom: 8px;
}

To align to a specific edge, use the anchor() function; for size following, use anchor-size():

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  left: anchor(left);
  bottom: anchor(top);
  width: anchor-size(width);
}

Combining with the popover attribute is the most common use case: popover handles show/hide and dismiss logic, anchor positioning handles placement, and flip/boundary checks are delegated to the browser. Previously this required a positioning library; the basic form can now run natively first.

Both capabilities share the same principle: returning positioning and progress calculations to the browser. Reduced code size is the direct outcome; the more practical value is that these interactions no longer participate in main-thread queuing.