Anyone want to try replicating YouTube's upvote counter fly-in animation?
Time-Based CSS Animations
21–30 of 49 posts
Re: Time-Based CSS Animations
#22Earlier quoted context omitted.
Most CSS animations aren't hardware accelerated. Only a few values like opacity and transform. Updating the DOM (as in innerHTML) is always expensive because it triggers layout. This is true whether you're doing it from JS or a CSS trick like on this page. Finally this approach is using CSS custom properties. These are slow - slower than JS for most things. If you stop all animations on this page and profile it via C…
Just one nitpick: the DOM is not updated by CSS here, only the value of the CSS variable is. (It will indeed cause style recalc and paint though, and result in poor performance as we can see with the demos.)
Yeah true tho I’m referring to the counter being set via the content style, which doesn’t update the DOM as such but does/can change layout
Re: Time-Based CSS Animations
#23I also recommend using negative animation delay values if you want to control the progress via JS. e.g. animation-delay: -1500ms will begin the animation immediately but jump to 1.5s into the animation. Controlling this value with JS lets you effectively scrub through CSS animations via JS, making every animation compatible with game-engine style compute-update-render tick loops. https://developer.mozilla.org/en-US/d…
That should also enable iOS style, scroll-offset bound animations, right?
Scroll linked animations are the best way to do that:
https://web.dev/shows/http-203/Qf5wdXOxW3E
Sadly no Safari support yet.
(attaching an active JS event listener to scroll is considered bad because it means your scroll movement gets tied up in the JS event loop. On a fast device it’ll probably be fine but on a slower one things can start getting choppy pretty easily)
Re: Time-Based CSS Animations
#24CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers i…
> Why do we need all this when we have JavaScript? In practice, mostly so google can still invade the privacy of users after they disable javascript. No user ever asked for this.
No user ever asked for any of these APIs or technologies, but that doesn't mean they can't be useful to developers.
Re: Time-Based CSS Animations
#25CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers i…
> Why do we need all this when we have JavaScript? In practice, mostly so google can still invade the privacy of users after they disable javascript. No user ever asked for this.
How can CSS be abused to invade our privacy?
Re: Time-Based CSS Animations
#26Earlier quoted context omitted.
> Why do we need all this when we have JavaScript? In practice, mostly so google can still invade the privacy of users after they disable javascript. No user ever asked for this.
How can CSS be abused to invade our privacy?
I can think of a few ways, but here is an example where CSS triggers a request to track a user: https://underjord.io/is-this-evil.html
Re: Time-Based CSS Animations
#27CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers i…
Regardless of anything else, JS is a single thread (mostly, there are workers of course) so anything you can do to offload work somewhere else is a good thing for keeping the UI running at a solid frame rate.
This doesn’t offload work to another thread though. And it’s actually more costly as it trigger style recalculations throughout the tree even when it no-ops.
Re: Time-Based CSS Animations
#28Earlier quoted context omitted.
How can CSS be abused to invade our privacy?
I can think of a few ways, but here is an example where CSS triggers a request to track a user: https://underjord.io/is-this-evil.html
The reason the server can track who is hovering over links is the browser apparently requests the background image only when the interaction happens. I certainly didn't expect that!
This seems to be an example of browser optimization leaking private information. There's an obvious way to fix that: deoptimize. Instead of lazily downloading resources as they are needed, request all the linked resources when the page loads, and do it only once. Now they can't tell whether the requests were due to user interaction or just normal browser behavior.
I wonder if uBlock Origin can deal with this. I know it's got a lot of options for blocking weird information leaks like this, webfonts being an example. Firefox also has fingerprinting resistance, I wonder if it resists this.
Re: Time-Based CSS Animations
#29CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers i…
One thing that comes to mind is separation of application logic and presentation. It's easier to read your fetch logic if it doesn't include loader DOM element geometry progress logic (calculating rotation degrees and applying inline styles etc.). I know it isn't popular to keep the chocolate separate from the peanut butter these days, but conventions like this draw hard lines that make it easier to reason about where code will be found and where to put it.
Re: Time-Based CSS Animations
#30For anything more advanced than a simple easing function or some basic keyframes on one or two channels you'll quickly run into the limitations of this approach.
I've been using Theatre.js the last few years and really loving it. It's a library divided into two parts; one is a studio UI with a timeline for editing keyframes and bezier curves, and the other is a runtime for taking those keyframes and interpolating values in relation to a timeline. Try it for anything that requires coordinated animations.