Version selector

This demo has several versions:

  1. CSS scroll-timeline
  2. JavaScript WAAPI + ScrollTimeline

About this demo

This demos sports section that scrolls horizontally as you scroll down.

Original demo by Cameron Knight:

The Code

<section id="sectionPin">
	<div class="pin-wrap-sticky">
		<div class="pin-wrap">…</div>
const $sectionPin = document.querySelector('#sectionPin');
const $pinWrapSticky = document.querySelector('.pin-wrap-sticky');
const $pinWrap = document.querySelector('.pin-wrap');

/* Stretch it out, so that we create room for the horizontal scroll animation */
$ = '500vh';
$ = 'visible'; // To make position sticky work …

/* Stick to Top */
$ = '100vh';
$ = '100vw';
$ = 'sticky';
$ = '0';
$ = 'hidden';

/* Stretch out pinwrap */
$ = '100vh';
$ = '250vmax';

// Scroll-Linked Animation
		transform: [ ``, `translateX(calc(-100% + 100vw))`],
		timeline: new ViewTimeline({
			subject: $sectionPin,
			axis: 'block',
		fill: 'forwards',
		rangeStart: `contain 0%`,
		rangeEnd: `contain 100%`,


By stretching out #sectionPin to a height of 500vh, more scroll estate is created. A ViewTimeline is attached to that element, tracking it as it crosses the scrollport.

The intermediary element .pin-wrap-sticky is made sticky, and it’s the .pin-wrap that gets animated on the ViewTimeline.

The start position of the horizontal strip .pin-wrap is at 0,0 within its parent. Its end position is a horizontal translation of -100% to which the viewport width is added. If the viewport width were not taken into account, the element would be entirely out of view.

⚠️ Your browser does not support Scroll-driven Animations. Please use Chrome 115 or newer.

Horizontal scroll section

With CSS view-timeline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Created by Bramus.

Adapted from the original by Cameron Knight.