Scroll-driven animations are nice! They’re a strong device that lets builders tie the motion and transformation of components on to the person’s scroll place. This method opens up new methods to create interactive experiences, cuing photos to look, textual content to glide throughout the stage, and backgrounds to subtly shift. Used thoughtfully, scroll-driven animations (SDA) could make your web site really feel extra dynamic, partaking, and responsive.
A couple of weeks again, I used to be enjoying round with scroll-driven animations, simply looking for all kinds of random issues you might do with it. That’s after I got here up with the concept to animate the textual content of the primary heading (h1) and, utilizing SDA, change the heading itself based mostly on the person’s scroll place on the web page. On this article, we’re going to interrupt down that concept and rebuild it step-by-step. That is the final route we’ll be heading in, which appears higher in full display screen and seen in a Chromium browser:
It’s vital to notice that the impact on this instance solely works in browsers that help scroll-driven animations. The place SDA isn’t supported, there’s a correct fallback to static headings. From an accessibility perspective, if the browser has diminished movement enabled or if the web page is being accessed with assistive know-how, the impact is disabled and the person will get all of the content material in a completely semantic and accessible manner.
Only a fast observe: this method does depend on just a few “magic numbers” for the keyframes, which we’ll speak about afterward. Whereas they’re surprisingly responsive, this methodology is absolutely greatest fitted to static content material, and it’s not splendid for extremely dynamic web sites.
Nearer Take a look at the Animation
Earlier than we dive into scroll-driven animations, let’s take a minute to take a look at the textual content animation itself, and the way it really works. That is based mostly on an concept I had just a few years again after I needed to create a typewriter impact. On the time, a lot of the strategies I discovered concerned animating the factor’s width, required utilizing a monospace font, or a strong colour background. None of which actually labored for me. So I appeared for a option to animate the content material itself, and the answer was, because it typically is, in pseudo-elements.
Pseudo-elements have a content material property, and you may (form of) animate that textual content. It’s not precisely animation, however you’ll be able to change the content material dynamically. The cool half is that the one factor that modifications is the textual content itself, no different methods required.
Begin With a Strong Basis
Now that you already know the trick behind the textual content animation, let’s see how one can mix it with a scroll-driven animation, and ensure we have now a strong, accessible fallback as effectively.
We’ll begin with some fundamental semantic markup. I’ll wrap every part in a major factor, with particular person sections inside. Every part will get its personal heading and content material, like textual content and pictures. For this instance, I’ve arrange 4 sections, every with a little bit of textual content and a few photos, all about Major Colours.
The three main colours (crimson, blue, and yellow) type the idea of all different colours on the colour wheel. Mixing them in several combos produces a big selection of hues.
Crimson Energy
Crimson is a daring and vibrant colour, symbolizing power, ardour, and heat. It simply attracts consideration and is commonly linked with robust feelings.
Blue Calm
Blue is a peaceful and funky colour, representing tranquility, stability, and belief. It evokes photos of the sky and sea, making a peaceable temper.
Yellow Pleasure
Yellow is a shiny and cheerful colour, standing for gentle, optimism, and creativity. It's extremely seen and brings a way of happiness and hope.
As for the styling, I’m not doing something particular at this stage, simply the fundamentals. I modified the font and adjusted the textual content and heading sizes, arrange the show for the major and the parts, and stuck the picture sizes with object-fit.
So, at this level, we have now a easy web site with static, semantic, and accessible content material, which is nice. Now the objective is to verify it stays that manner as we begin including our impact.
The Second First Heading
We’ll begin by including one other h1 factor on the high of the major. This new factor will function the placeholder for our animated textual content, updating based on the person’s scroll place. And sure, I do know there’s already an h1 within the first part; that’s superb and we’ll tackle it in a second in order that just one is accessible at a time.
Discover that I’ve added aria-hidden="true" to this heading, so it received’t be picked up by display screen readers. Now I can add a category particularly for display screen readers, .srOnly, to all the opposite headings. This fashion, anybody viewing the content material “usually” will see solely the animated heading, whereas assistive know-how customers will get the common, static semantic headings.
Be aware: The model for the .srOnly class is predicated on “Inclusively Hidden” by Scott O’Hara.
Dealing with Assist
As a lot as accessibility issues, there’s one other concern we want to bear in mind: help. CSS Scroll-Pushed Animations are implausible, however they’re nonetheless not absolutely supported in all places. That’s why it’s vital to supply the static model for browsers that don’t help SDA.
Step one is to cover the animated heading we simply added utilizing show: none. Then, we’ll add a brand new @helps block to examine for SDA help. Inside that block, the place SDA is supported, we are able to change again the show for the heading.
The .srOnly class must also transfer into the @helps block, since we solely need it to use when the impact is lively, not when it’s not supported. This fashion, identical to with assistive know-how, anybody visiting the web page in a browser with out SDA help will nonetheless get the static content material.
.scrollDrivenHeading {
show: none;
}
@helps (animation-timeline: scroll()) {
.scrollDrivenHeading {
show: block;
}
/* Display Readers Solely */
.srOnly {
clip: rect(0 0 0 0);
clip-path: inset(50%);
peak: 1px;
overflow: hidden;
place: absolute;
white-space: nowrap;
width: 1px;
}
}Get Sticky
The following factor we have to do is deal with the stickiness of the heading. To verify the heading at all times stays on display screen, we’ll set its place to sticky with high: 0 so it sticks to the highest of the viewport.
Whereas we’re at it, let’s add some fundamental styling, together with a background so the textual content doesn’t mix with no matter’s behind the heading, a little bit of padding for spacing, and white-space: nowrap to maintain the heading on a single line.
/* contained in the @helps block */
.scrollDrivenHeading {
show: block;
place: sticky;
high: 0;
background-image: linear-gradient(0deg, clear, black 1em);
padding: 0.5em 0.25em;
white-space: nowrap;
}Now every part’s arrange: in regular situations, we’ll see a single sticky heading on the high of the web page. And if somebody makes use of assistive know-how or a browser that doesn’t help SDA, they’ll nonetheless get the common static content material.
Now we’re prepared to start out animating the textual content. Nearly…
The Magic Numbers
To construct the textual content animation, we have to know precisely the place the textual content ought to change. With SDA, scrolling principally turns into our timeline, and we have now to find out the precise factors on that timeline to set off the animation.
To make this simpler, and that will help you pinpoint these positions, I’ve ready the next script:
@property --scroll-position {
syntax: "";
inherits: false;
initial-value: 0;
}
physique::after {
counter-reset: sp var(--scroll-position);
content material: counter(sp) "%";
place: fastened;
high: 0;
left: 0;
padding: 1em;
background-color: maroon;
animation: scrollPosition steps(100);
animation-timeline: scroll();
}
@keyframes scrollPosition {
0% { --scroll-position: 0; }
100% { --scroll-position: 100; }
} I don’t need to get too deep into this code, however the concept is to take the identical scroll timeline we’ll use subsequent to animate the textual content, and use it to animate a customized property (--scroll-position) from 0 to 100 based mostly on the scroll progress, and show that worth within the content material.
If we’ll add this firstly of our code, we’ll see a small crimson sq. within the top-left nook of the display screen, displaying the present scroll place as a share (to match the keyframes). This fashion, you'll be able to scroll to any part you need and simply mark the share the place every heading ought to start.
With this methodology and a little bit of trial and error, I discovered that I need the headings to alter at 30%, 60%, and 90%. So, how will we really do it? Let’s begin animating.
Animating Textual content
First, we’ll filter the content material contained in the .scrollDrivenHeading factor so it’s empty and prepared for dynamic content material. Within the CSS, I’ll add a pseudo-element to the heading, which we’ll use to animate the textual content. We’ll give it empty content material, arrange the animation-name, and naturally, assign the animation-timeline to scroll().
And since I’m animating the content material property, which is a discrete kind, it doesn’t transition easily between values. It simply jumps from one to the subsequent. By setting the animation-timing-function property to step-end, I be sure that every change occurs precisely on the keyframe I outline, so the textual content switches exactly the place I need it to, as an alternative of someplace in between.
.scrollDrivenHeading {
/* model */
&::after {
content material: '';
animation-name: headingContent;
animation-timing-function: step-end;
animation-timeline: scroll();
}
}As for the keyframes, this half is fairly easy (for now). We’ll set the primary body (0%) to the primary heading, and assign the opposite headings to the odds we discovered earlier.
@keyframes headingContent {
0% { content material: 'Major Colours'}
30% { content material: 'Crimson Energy'}
60% { content material: 'Blue Calm'}
90%, 100% { content material: 'Yellow Pleasure'}
}So, now we’ve bought a web site with a sticky heading that updates as you scroll.
However wait, proper now it simply switches immediately. The place’s the animation?! Right here’s the place it will get attention-grabbing. Since we’re not utilizing JavaScript or any string manipulation, we have now to put in writing the keyframes ourselves. The most effective method is to start out from the goal heading you need to attain, and construct backwards. So, if you wish to animate between the primary and second heading, it could appear to be this:
@keyframes headingContent {
0% { content material: 'Major Colours'}
9% { content material: 'Major Shade'}
10% { content material: 'Major Colo'}
11% { content material: 'Major Col'}
12% { content material: 'Major Co'}
13% { content material: 'Major C'}
14% { content material: 'Major '}
15% { content material: 'Major'}
16% { content material: 'Primar'}
17% { content material: 'Prima'}
18% { content material: 'Prim'}
19% { content material: 'Pri'}
20% { content material: 'Pr'}
21% { content material: 'P'}
22% { content material: 'R'}
23% { content material: 'Re'}
24% { content material: 'Crimson'}
25% { content material: 'Crimson '}
26% { content material: 'Crimson P'}
27% { content material: 'Crimson Po'}
28%{ content material: 'Crimson Pow'}
29% { content material: 'Crimson Powe'}
30% { content material: 'Crimson Energy'}
60% { content material: 'Blue Calm'}
90%, 100% { content material: 'Yellow Pleasure'}
}I merely went again by 1% every time, eradicating or including a letter as wanted. Be aware that in different circumstances, you may need to use a unique step measurement, and never at all times 1%. For instance, on longer headings with extra phrases, you’ll most likely need smaller steps.
If we repeat this course of for all the opposite headings, we’ll find yourself with a completely animated heading.
Consumer Preferences
We talked earlier than about accessibility and ensuring the content material works effectively with assistive know-how, however there’s another factor it's best to remember: prefers-reduced-motion. Though this isn’t a strict WCAG requirement for this type of animation, it will probably make a giant distinction for individuals with vestibular sensitivities, so it’s a good suggestion to supply a option to present the content material with out animations.
If you wish to present a non-animated various, all it is advisable to do is wrap your @helps block with a prefers-reduced-motion question:
@media display screen and (prefers-reduced-motion: no-preference) {
@helps (animation-timeline: scroll()) {
/* model */
}
}Leveling Up
Let’s speak about variations. Within the earlier instance, we animated all the heading textual content, however we don’t have to do this. You'll be able to animate simply the half you need, and use further animations to boost the impact and make issues extra attention-grabbing. For instance, right here I stored the textual content “Major Shade” fastened, and added a span after it that handles the animated textual content.
And since I now have a separate span, I may also animate its colour to match every worth.
Within the subsequent instance, I stored the textual content animation on the span, however as an alternative of fixing the textual content colour, I added one other scroll-driven animation on the heading itself to alter its background colour. This fashion, you'll be able to add as many animations as you need and alter no matter you want.
Your Flip!
CSS Scroll-Pushed Animations are greater than only a cool trick; they’re a game-changer that opens the door to an entire new world of internet design. With only a little bit of creativity, you'll be able to flip even probably the most extraordinary pages into one thing interactive, memorable, and actually partaking. The chances actually are countless, from delicate results that improve the person expertise, to wild, animated transitions that make your web site stand out.
So, what would you construct with scroll-driven animations? What would you create with this new superpower? Attempt it out, experiment, and in case you provide you with one thing cool, have some concepts, wild experiments, and even bizarre failures, I’d love to listen to about them. I’m at all times excited to see what others provide you with, so be at liberty to share your work, questions, or suggestions under.
Particular because of Cristian Díaz for reviewing the examples, ensuring every part is accessible, and contributing invaluable recommendation and enhancements.
