In the last article, we created a CSS-only star score element utilizing the CSS masks and border-image properties, in addition to the newly enhanced attr() perform. We ended with CSS code that we are able to simply modify to create element variations, together with a coronary heart score and quantity management.
This second article will research a unique strategy that offers us extra flexibility. As a substitute of the border-image trick we used within the first article, we are going to depend on scroll-driven animations!
Right here is identical star score element with the brand new implementation. And since we’re treading in experimental territory, you’ll need to view this in Chrome 115+ whereas we look forward to Safari and Firefox help:
Do you see the distinction between this and the ultimate demo within the first article? This time, I’m updating the colour of the celebrities based mostly on what number of of them are chosen — one thing we can’t do utilizing the border-image trick!
I extremely advocate you learn the primary article earlier than leaping into this second half in the event you missed it, as I can be referring to ideas and strategies that we explored over there.
Yet one more time: On the time of writing, solely Chrome 115+ and Edge 115+ totally help the options we can be utilizing on this article, so please use both a type of as you observe alongside.
Why scroll-driven animations?
You is likely to be questioning why we’re speaking about scroll-driven animation when there’s nothing to scroll to within the star score element. Scrolling? Animation? However we’ve got nothing to scroll or animate! It’s much more complicated once you learn the MDN explainer for scroll-driven animations:
It lets you animate property values based mostly on a development alongside a scroll-based timeline as a substitute of the default time-based doc timeline. This implies you can animate a component by scrolling a scrollable ingredient, slightly than simply by the passing of time.
However in the event you preserve studying you will note that we’ve got two sorts of scroll-based timelines: scroll progress timelines and view progress timelines. In our case, we’re going to use the second; a view progress timeline, and right here is how MDN describes it:
You progress this timeline based mostly on the change in visibility of a component (referred to as the topic) inside a scroller. The visibility of the topic contained in the scroller is tracked as a share of progress — by default, the timeline is at 0% when the topic is first seen at one fringe of the scroller, and 100% when it reaches the other edge.
You’ll be able to take a look at the CSS-Tricks almanac definition for view-timeline-name whilst you’re at it for one more rationalization.
Issues begin to make extra sense if we contemplate the thumb ingredient as the topic and the enter ingredient as the scroller. In spite of everything, the thumb strikes inside the enter space, so its visibility modifications. We will monitor that motion as a share of progress and convert it to a worth we are able to use to fashion the enter ingredient. We’re primarily going to implement the equal of doc.querySelector("enter").worth in JavaScript however with vanilla CSS!
The implementation
Now that we’ve got an thought of how this works, let’s see how every part interprets into code.
@property --val {
syntax: "<quantity>";
inherits: true;
initial-value: 0;
}
enter[type="range"] {
--min: attr(min kind(<quantity>));
--max: attr(max kind(<quantity>));
timeline-scope: --val;
animation: --val linear each;
animation-timeline: --val;
animation-range: entry 100% exit 0%;
overflow: hidden;
}
@keyframes --val {
0% { --val: var(--max) }
100% { --val: var(--min) }
}
enter[type="range"]::thumb {
view-timeline: --val inline;
}I do know, it is a lot of unusual syntax! However we are going to dissect every line and you will note that it’s not all that complicated on the finish of the day.
The topic and the scroller
We begin by defining the topic, i.e. the thumb ingredient, and for this we use the view-timeline shorthand property. From the MDN page, we are able to learn:
The
view-timelineCSS shorthand property is used to outline a named view progress timeline, which is progressed by means of based mostly on the change in visibility of a component (referred to as the topic) inside a scrollable ingredient (scroller).view-timelineis about on the topic.
I feel it’s self-explanatory. The view timeline title is --val and the axis is inline since we’re working alongside the horizontal x-axis.
Subsequent, we outline the scroller, i.e. the enter ingredient, and for this, we use overflow: hidden (or overflow: auto). This half is the best but in addition the one you’ll overlook probably the most so let me insist on this: don’t overlook to outline overflow on the scroller!
I insist on this as a result of your code will work superb with out defining overflow, however the values received’t be good. The reason being that the scroller exists however can be outlined by the browser (relying in your web page construction and your CSS) and more often than not it’s not the one you need. So let me repeat it one other time: keep in mind the overflow property!
The animation
Subsequent up, we create an animation that animates the --val variable between the enter’s min and max values. Like we did within the first article, we’re utilizing the newly-enhanced attr() perform to get these values. See that? The “animation” a part of the scroll-driven animation, an animation we hyperlink to the view timeline we outlined on the topic utilizing animation-timeline. And to have the ability to animate a variable we register it utilizing @property.
Notice using timeline-scope which is one other tough function that’s simple to miss. By default, named view timelines are scoped to the ingredient the place they’re outlined and its descendant. In our case, the enter is a guardian ingredient of the thumb so it can’t entry the named view timeline. To beat this, we enhance the scope utilizing timeline-scope. Once more, from MDN:
timeline-scopeis given the title of a timeline outlined on a descendant ingredient; this causes the scope of the timeline to be elevated to the ingredient thattimeline-scopeis about on and any of its descendants. In different phrases, that ingredient and any of its descendant parts can now be managed utilizing that timeline.
Always remember about this! Typically every part is accurately outlined however nothing is working since you overlook in regards to the scope.
There’s one thing else you is likely to be questioning:
Why are the keyframes values inverted? Why is the
minis about to100%and themaxset to0%?
To grasp this, let’s first take the next instance the place you’ll be able to scroll the container horizontally to disclose a crimson circle inside it.
Initially, the crimson circle is hidden on the fitting aspect. As soon as we begin scrolling, it seems from the fitting aspect, then disappears to the left as you proceed scrolling in the direction of the fitting. We scroll from left to proper however our precise motion is from proper to left.
In our case, we don’t have any scrolling since our topic (the thumb) is not going to overflow the scroller (the enter) however the principle logic is identical. The place to begin is the fitting aspect and the ending level is the left aspect. In different phrases, the animation begins when the thumb is on the fitting aspect (the enter’s max worth) and can finish when it’s on the left aspect (the enter’s min worth).
The animation vary
The final piece of the puzzle is the next vital line of code:
animation-range: entry 100% exit 0%;By default, the animation begins when the topic begins to enter the scroller from the fitting and ends when the topic has fully exited the scroller from the left. This isn’t good as a result of, as we stated, the thumb is not going to overflow the scroller, so it would by no means attain the beginning and the top of the animation.
To rectify this we use the animation-range property to make the beginning of the animation when the topic has fully entered the scroller from the fitting (entry 100%) and the top of the animation when the topic begins to exit the scroller from the left (exit 0%).
To summarize, the thumb ingredient will transfer inside enter’s space and that motion is used to manage the progress of an animation that animates a variable between the enter’s min and max attribute values. We’ve our substitute for doc.querySelector("enter").worth in JavaScript!
What’s happening with all of the
--valcases in every single place? Is it the identical factor every time?
I’m intentionally utilizing the identical --val in every single place to confuse you a bit and push you to attempt to perceive what’s going on. We often use the dashed ident (--) notation to outline customized properties (additionally referred to as CSS variables) that we later name with var(). That is nonetheless true however that very same notation can be utilized to call different issues as nicely.
In our examples we’ve got three various things named --val:
- The variable that’s animated and registered utilizing
@property. It incorporates the chosen worth and is used to fashion the enter. - The named view timeline outlined by
view-timelineand utilized byanimation-timeline. - The keyframes named
--valand referred to as byanimation.
Right here is identical code written with totally different names for extra readability:
@property --val {
syntax: "<quantity>";
inherits: true;
initial-value: 0;
}
enter[type="range"] {
--min: attr(min kind(<quantity>));
--max: attr(max kind(<quantity>));
timeline-scope: --timeline;
animation: value_update linear each;
animation-timeline: --timeline;
animation-range: entry 100% exit 0%;
overflow: hidden;
}
@keyframes value_update {
0% { --val: var(--max) }
100% { --val: var(--min) }
}
enter[type="range"]::thumb {
view-timeline: --timeine inline;
}The star score element
All that we’ve got finished thus far is get the chosen worth of the enter vary — which is actually about 90% of the work we have to do. What stays is a few fundamental types and code taken from what we made within the first article.
If we omit the code from the earlier part and the code from the earlier article here’s what we’re left with:
enter[type="range"] {
background:
linear-gradient(90deg,
hsl(calc(30 + 4 * var(--val)) 100% 56%) calc(var(--val) * 100% / var(--max)),
#7b7b7b 0
);
}
enter[type="range"]::thumb {
opacity: 0;
}We make the thumb invisible and we outline a gradient on the principle ingredient to paint within the stars. No shock right here, however the gradient makes use of the identical --val variable that incorporates the chosen worth to tell how a lot is coloured in.
When, for instance, you choose three stars, the --val variable will equal 3 and the colour cease of the primary colour will equal 3*100%/5 , or 60%, which means three stars are coloured in. That very same colour can be dynamic as I’m utilizing the hsl() perform the place the primary argument (the hue) is a perform of --val as nicely.
Right here is the total demo, which it would be best to open in Chrome 115+ on the time I’m scripting this:
And guess what? This implementation works with half stars as nicely with out the necessity to change the CSS. All you must do is replace the enter’s attributes to work in half increments. Bear in mind, we’re yanking these values out of HTML into CSS utilizing attr(), which reads the attributes and returns them to us.
<enter kind="vary" min=".5" step=".5" max="5">That’s it! We’ve our score star element you can simply management by adjusting the attributes.
So, ought to I take advantage of border-image or a scroll-driven animation?
If we glance previous the browser help issue, I contemplate this model higher than the border-image strategy we used within the first article. The border-image model is less complicated and does the job fairly nicely, nevertheless it’s restricted in what it will possibly do. Whereas our purpose is to create a star score element, it’s good to have the ability to do extra and be capable of fashion an enter vary as you need.
With scroll-driven animations, we’ve got extra flexibility because the thought is to first get the worth of the enter after which use it to fashion the ingredient. I do know it’s not simple to know however don’t fear about that. You’ll face scroll-driven animations extra usually sooner or later and it’ll turn into extra aware of time. This instance will look simple to you in good time.
Value noting, that the code used to get the worth is a generic code you can simply reuse even if you’re not going to fashion the enter itself. Getting the worth of the enter is unbiased of styling it.
Here’s a demo the place I’m including a tooltip to a range slider to show its value:
Many strategies are concerned to create that demo and certainly one of them is utilizing scroll-driven animations to get the enter worth and present it contained in the tooltip!
Right here is one other demo utilizing the identical method the place different range sliders are controlling different variables on the page.
And why not a wavy vary slider?
This one is a bit loopy nevertheless it illustrates how far we go along with styling an enter vary! So, even when your purpose is to not create a star score element, there are loads of use instances the place such a method may be actually helpful.
Conclusion
I hope you loved this temporary two-part collection. Along with a star score element made with minimal code, we’ve got explored loads of cool and fashionable options, together with the attr() perform, CSS masks, and scroll-driven animations. It’s nonetheless early to undertake all of those options in manufacturing due to browser help, nevertheless it’s a great time to discover them and see what may be finished quickly utilizing solely CSS.
