scroll-timeline-axis

Defines the axis of a scroll container that will drive the progress of a scroll timeline — either block (vertical) or inline (horizontal).

.scroller {
  /* The animation will progress as you scroll vertically */
  scroll-timeline-axis: block;
  scroll-timeline-name: --main-timeline;
}
Initial value
block
Inherited
No
Applies to
scrollContainers
Animation type
notAnimatable

Values

blockinline
Limited availability 80% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

115+
111+
115+
Interop 2026 focus area ? Learn more →
ESC