Slide By way of Limitless Dimensions With CSS Scroll Timelines

The creator of CSS has mentioned he initially envisaged CSS as the primary internet expertise to manage habits on internet pages, with scripting as a fallback when issues weren’t attainable declaratively in CSS. The rationale for a CSS-first strategy was that “scripting is programming and programming is difficult.” Since introducing the :hover pseudo-class, CSS has been standardizing patterns builders create in JavaScript and “harvesting” them into CSS requirements. When you concentrate on it like that, it’s virtually as if JavaScript is the hack and CSS is the official method.

We are able to, due to this fact, really feel much less soiled implementing script-like habits with CSS, and we shouldn’t be shocked that one thing like the brand new scroll-timeline function has appeared with fairly good browser assist. Too many builders carried out intelligent parallax scrolling web sites, which has summoned the CSS function genie we can’t put again in its bottle. If you happen to don’t need janky main-thread animations in your subsequent parallax-scrolling web site, you will need to now come to the darkish facet of hacking CSS. Simply kidding, there’s additionally a brand new JavaScript API for scroll-linked animations if crucial programming higher suits your use case.

Migrating a JavaScript pattern to CSS

It was satisfyingly easy to fork Chris Coyier’s pre-scroll-timeline instance of a scroll-linked animation by changing the CSS Chris was utilizing to manage the animations with simply one line of CSS and fully deleting the JavaScript!

physique, .progress, .dice {
  animation-timeline: scroll();
}

Utilizing the scroll() perform with out parameters units up an “nameless scroll progress timeline” which means the browser will base the animation on the closest ancestor that may scroll vertically if our writing mode is English. Sadly, it appears we will solely select to animate primarily based on scrolling alongside the x or y-axis of a selected component however not each, which might be helpful. Being a perform, we will cross parameters to scroll(), which offers extra management over how we would like scrolling to run our animation.

Experimenting with a number of dimensions

Even higher is the scroll-scope property. Making use of that to a container component means we will animate properties on any chosen ancestor component primarily based on any scrollable component that has the identical assigned scope. That obtained me pondering… Since CSS Houdini lets us register animation-friendly, inheritable properties in CSS, we will mix animations on the identical component primarily based on a number of scrollable areas on the web page. That opens the door for attention-grabbing educational design prospects comparable to my experiment beneath.

Scrolling the horizontal narrative on the sunshine inexperienced card rotates the 3D NES console horizontally and scrolling the vertical narrative on the darkish inexperienced card rotates the NES console vertically. In my earlier article, I famous that my previous CSS hacks have at all times boiled all the way down to hiding and exhibiting finite prospects utilizing CSS. What pursuits me about this scroll-based experiment is the combinatorial explosion of mixed vertical and horizontal rotations. Animation timelines present an interactivity in pure CSS that hasn’t been attainable prior to now.

The implementation particulars are much less vital than the timeline-scope utilization and the {custom} properties. We register two {custom} angle properties:

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

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

Then, we “borrow” the NES 3D mannequin from the samples in Julian Garner’s wonderful CSS 3D modeling app. We replace the .scene class for the 3D to base the rotation on our new variables like this:

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

Subsequent, we give the <physique> component a timeline-scope with two custom-named scopes.

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

I haven’t seen something formally documented about passing in a number of scopes, nevertheless it does work in Google Chrome and Edge. If it’s not a formally supported function, I hope it can change into a part of the usual as a result of it’s ridiculously useful.

Subsequent, we outline the named timelines for the 2 scrollable playing cards and the axes we wish to set off 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;
  }
}

For the reason that 3D mannequin inherits the x and y angles from the doc physique, scrolling the playing cards now rotates the mannequin in mixtures of vertical and horizontal angle adjustments.

Consumer-controlled animations past scrollbars

When you concentrate on it, this habits isn’t simply helpful for scroll-driven animations. Within the above experiment, we’re utilizing the scrollable areas extra like sliders that management the properties of our 3D mannequin. After getting it working, I went for a stroll and was daydreaming about how cool it might be if precise vary inputs might management animation timelines. Then I discovered they will! At least in Chrome. Pure CSS CMS anybody?

Whereas we’re commandeering 3D fashions from Julian Garner, let’s see if we will use vary inputs to manage his X-wing mannequin.

It’s mind-boggling that we will obtain this with simply CSS, and we might do it with an arbitrary variety of properties. It doesn’t go far sufficient for me. I’d like to see different enter controls that may manipulate animation timelines. Think about textual content fields progressing animations as you fill them out, or buttons capable of play or reverse animations. The latter will be considerably achieved by combining the :energetic pseudo-class with the animation-play-state property. However in my expertise once you attempt to use that to animate a number of {custom} properties, the browser can get confused. Against this, animation timelines have been carried out with this use case in thoughts and due to this fact work easily and precisely as I anticipated.

I’m not the one one who has observed the potential for hacking this emergent CSS function. Somebody has already carried out this intelligent Doom clone by combining scroll-timeline with checkbox hacks. The issue I’ve is it nonetheless doesn’t go far sufficient. Now we have sufficient in Chrome to implement avatar builders utilizing scrollbars and vary inputs as recreation controls. I’m excited to experiment with unpredictable, subtle experiences which can be unprecedented within the period earlier than the scroll-timeline function. In any case, in the event you needed to clarify the definition of a online game to an alien, wouldn’t you say it’s only a hyper-interactive animation?