Note: This experiment is based on examples found in this CSS Tricks article
While the benefits of such enhancements are open to discussion, there are instances where web animation can add an element of delight with minimal negative impact. One such instance is animating number counters. With a spare couple of hours to play with I decided to look into what it would take to create a version of these counters with fallbacks.
One example utilising the @property CSS function appeared the most lightweight to work with, but is only supported by Chromium browsers. Though I develop primarily within Firefox, I know it’s user-base is small and so adopting something like this that’s unsupported in some browsers would be fine on the assumption it could be tweaked to provide a fallback for older browsers.
In addition to this I wanted to be able to simplify the CSS so it would be usable over multiple counters, as well as for those counters to be able to be placed further down the page and not start animating before coming into view.
To view the animation above you will need to use a supported browser
Beyond the original code example, I’ve added the following:
Though playing with new toys can be fun, it’s not always obvious what they do when copying other people’s examples. When digging into the details of the @property feature it appears that this is necessary because, by default, custom properties have a string type. For us to be able to animate the number as an integer we require the @property feature to be able to define the type of the custom property correctly.
As yet I’ve not been able to fully test the impact of this code on accessibility and assistive technologies. Brief screen reader testing suggests the number displayed before the animation starts is what is output to the user. This means for full supportive browsers, like Chrome, users will hear 0, whilst on older browsers they’ll get the actual number.
I believe duplicating the number and utilising aria-attributes may be the best way to provide an accessible fallback in this instance.
As yet I’ve not tested this on a live website, so it may not be suitable for your particular use case… if it works at all.
Let us know if you have any success using the code on your website, or if you have any ideas for improving it further.
Like what you’ve read, then why not tell others about it... they might enjoy it too
If you think Bronco has the skills to take your business forward then what are you waiting for?Get in Touch Today!