Slide Through Unlimited Dimensions With CSS Scroll Timelines

The inventor of CSS has said He originally envisioned CSS as the primary web technology for controlling behavior on web pages, with scripting as a fallback when things couldn’t be done declaratively in CSS. The rationale for a CSS-first approach was: “Scripting is programming and programming is hard.” Since its introduction The :hover PseudoclassCSS has standardized patterns that developers create in JavaScript and “harvested” them into CSS standards. When you think about it, it almost seems like JavaScript is the hack and CSS is the official way.

We can therefore feel less dirty about implementing script-like behavior with CSS, and we shouldn’t be surprised that something like the new scroll-timeline The feature has appeared with pretty good browser support. Too many developers implemented Clever parallax scrolling Websites that have summoned the CSS functional genie that we can no longer put in its bottle. If you don’t want funky main thread animations for your next parallax scrolling website, you need to enter the dark side of CSS hacking now. Just kiddingthere is also a new one JavaScript API for scroll link animations if imperative programming better suits your use case.

Migrate a JavaScript sample to CSS

It was satisfyingly easy to share Chris Coyier’s pre-scroll-timeline Example a scroll linked animation by replacing the CSS that Chris used to control the animations with just one CSS line and completely deleting the JavaScript!

body, .progress, .cube {
  animation-timeline: scroll();
}

With the scroll() Function without parameters sets up an “anonymous scrolling progress timeline”, which means the browser will base the animation on the nearest ancestor that can scroll vertically if our writing mode is English. Unfortunately, it seems that we can only select the animation based on scrolling along the x or y axis of a given element, but not based on both, which would be useful. Since we are a function, we can do this Pass parameters To scroll()which provides more control over how we want to perform our animation while scrolling.

Experimenting with multiple dimensions

That’s even better scroll-scope Property. If we apply this to a container element, we can animate properties for each selected predecessor element based on each scrollable element that has the same allocated area. That got me thinking… Ever since CSS Houdini allows us to register animation-friendly, inheritable properties in CSS. We can combine animations on the same element based on multiple scrollable areas on the page. This opens the door to interesting teaching possibilities, such as my experiment below.

Scrolling through the horizontal narrative on the light green map will rotate the 3D NES console horizontally, and scrolling through the vertical narrative on the dark green map will rotate the NES console vertically. In mine previous articleI found that my previous CSS hacks always boiled down to hiding and showing finite possibilities using CSS. What interests me about this scroll-based experiment is the combinatorial explosion of combined vertical and horizontal rotations. Animation timelines provide interactivity in pure CSS that wasn’t possible in the past.

The implementation details are less important than that timeline-scope Usage and custom properties. We register two custom angle properties:

@property --my-y-angle {
  syntax: "";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "";
  inherits: true;
  initial-value: -35deg;
}

Then we “borrow” the NES 3D model from the examples in Julian Garner’s “Amazing.” CSS 3D modeling app. We’re updating that .scene Class for the 3D to base the rotation on our new variables like this:

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

Next we give the Element a timeline-scope with two custom areas.

body {
  timeline-scope: --myScroller,--myScroller2; 
}

I haven’t seen anything officially documented about passing multiple scopes, but it works in Google Chrome and Edge. If it’s not an officially supported feature, I hope it becomes part of the standard because it’s incredibly convenient.

Next, we define the named timelines for the two scrollable maps and the axes that will trigger our animations.

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

And add the animations to the scene:

.scene {
  animation: rotateHorizontal,rotateVertical;
  animation-timeline: --myScroller,--myScroller2;
}

@keyframes rotateHorizontal {
  to {
    --my-y-angle: 360deg;
  }
}

@keyframes rotateVertical {
  to {
    --my-x-angle: 360deg;
  }
}

Because the 3D model inherits the x and y angles from the document body, scrolling through the maps now rotates the model in a combination of vertical and horizontal angle changes.

User-controlled animations beyond scrollbars

If you think about it, this behavior isn’t just useful for scroll-driven animations. In the experiment above, we use the scrollable areas more like sliders that control the properties of our 3D model. After I got it working, I went for a walk and dreamed about how cool it would be if actual range inputs could control the animation timelines. Then I found out they can! At At least in Chrome. Does anyone have a pure CSS CMS?

While we’re taking 3D models from Julian Garner, let’s see if we can use range inputs to control his X-Wing model.

It’s amazing that we can only achieve this with CSS, and with any number of properties. It doesn’t go far enough for me. I’d like to see other input controls that can manipulate animation timelines. Imagine text boxes that have animations that progress as they are filled, or buttons that can play or reverse animations. The latter can be achieved by combining the :active Pseudoclass with that animation-play-state Property. But in my experience, trying to use it to animate multiple custom properties can cause confusion in the browser. In contrast, animation timelines were implemented specifically for this use case and therefore work smoothly and exactly as I expected.

I’m not the only one who saw the potential for hacking this new CSS feature. Someone has already implemented this clever Doom clone by combining scroll-timeline with Checkbox hacks. The problem I have is that it still doesn’t go far enough. We have enough in Chrome to implement avatar builders that use scrollbars and pane inputs as game controls. I’m excited to experiment with unpredictable, challenging experiences that were unprecedented in the days before the scrolling timeline feature. If you had to explain the definition of a video game to an alien, wouldn’t you say it’s just a hyper-interactive animation?