[HN Gopher] Springs and bounces in native CSS
___________________________________________________________________
Springs and bounces in native CSS
Author : feross
Score : 257 points
Date : 2025-10-28 18:01 UTC (3 days ago)
(HTM) web link (www.joshwcomeau.com)
(TXT) w3m dump (www.joshwcomeau.com)
| SweetSoftPillow wrote:
| I've encountered a strange bug (using Chrome for Android). When I
| have this CSS demo page open and scroll about halfway down, the
| volume of my background audio (e.g., a Twitch App stream) drops
| by about 50%. Closing the tab immediately restores the audio to
| its normal volume. I can reproduce this issue consistently. Does
| anyone have any idea what might be causing this behavior?
|
| Edit: it seems it's caused by autoplay of Easing Wizard's video.
| xnavra50 wrote:
| Btw: the design of the webpage with all the animations and
| beautifully crafted info-boxes is top-notch.
| rossant wrote:
| Agreed. And wow, try to turn dark/light theme on and off (hint:
| speakers on).
| broof wrote:
| His stuff is so incredibly high quality. Really stands out in
| an AI slop filled internet
| rosslh wrote:
| Yet another banger from Josh Comeau. Dude does not miss!
| spankalee wrote:
| I wish CSS had two related things
|
| - A function similar to linear() that supports control points so
| we can make multi-point Bezier paths.
|
| - calc() support as an easing function so you could combine
| sin(), etc., and do oscillation with damping.
|
| - A spring() function that remembers the current velocity for
| when parameters change.
| magicalhippo wrote:
| I'm not a web guy. Why would you want that in CSS when you have
| Javascript?
| paulhebert wrote:
| JS tends to be slower to load, parse and run than CSS.
|
| Additionally, animations are often tightly linked to your
| page styles which are set in CSS. It's easier to reason about
| them if they're all in the same file and language instead of
| split across CSS and JS.
| mminer237 wrote:
| Off the top of my head:
|
| * It's easier to write without pulling in dependencies.
|
| * Being simpler syntax means smaller page sizes.
|
| * In theory, CSS animations can be faster.
|
| * You don't have to worry about attaching listeners to
| dynamic content.
|
| * Styling with JS violates Separation of Concerns.
|
| * `prefers-reduced-motion` is only available in CSS, so JS
| has to run a CSS query anyway.
| Sesse__ wrote:
| CSS animations run in the compositor thread, so they are
| isolated from jank due to concurrently running JS.
| alt187 wrote:
| Another argument, this time for performance: JavaScript is
| single-threaded, so while you wait for your hyper-detailed
| spring animation to play out, the JS engine does literally
| nothing else.
| SweetSoftPillow wrote:
| For performance reasons we always prefer HTML, then CSS, and
| only then JS as a last resort.
| tkiolp4 wrote:
| Nice website. I got the newsletter popup, but it was cute, not
| annoying like they usually are.
| dmitrygr wrote:
| > There is an open proposal(opens in new tab) to add a spring()
| timing function to CSS. Unlike linear(), this would actually be a
| true spring physics implementation! It wouldn't have any of the
| limitations we've discussed here.
|
| Uh huh... How long till a proper implementation of CSS requires a
| proper emulator of relativistic physics and quantum effects? Have
| we learned _nothing_ from modern browsers already becoming de-
| facto poorly-specced and poorer-yet implemented JS-based
| operating systems / malware delivery vehicles?
| afavour wrote:
| It's a timing function.
| tshaddox wrote:
| It's just spring physics, hardly a slippery slope to a
| Newtonian physics engine let alone a relativistic or quantum
| physics engine. I wouldn't describe the math as significantly
| more complex than Bezier curves.
| dmitrygr wrote:
| Every thing you add is another step away from making building
| another browser engine a possibility.
| alt187 wrote:
| I'm not absolutely certain the spring() function would be
| in the top 1500 of things that are hard to implement in a
| grassroots browser engine.
| tshaddox wrote:
| Indeed. I suspect that generally the older a web feature
| is, the more difficult it would be for a new browser lot
| implement.
| slig wrote:
| I'm doing his latest course on whimsical animations. So.
| Freaking. Good.
| madethemcry wrote:
| That gives me a quite literal flashback.
|
| Back in the Macromedia Flash 5 days (25 years ago!), Robert
| Penner popularized the easing concept. I can't imagine the void
| we had before that. I clearly remember me starring at the
| formulas in ActionScript 1.0 (see [1]) without any chance of
| understanding them - but usage was clear, easy and fun!
|
| Those formulas basically generated the required tweening numbers
| mathematical (comparable to the Bezier approach mentioned in the
| article). That's a much different concept to the linear
| interpolation described in the linked blog article where you pass
| in a static list of numbers. The more complex your curve the more
| numbers you need. That's when the author links to the external
| tool "Linear() Easing Generator" by Jake Archibald and Adam
| Argyle. It was a fresh and nice reading even though animations
| are less a topic for me then it was back with Flash.
|
| Here an example of an easing function from the linked source
| file. The tween executing function would pass in time (t) and
| other parameters I can't name to calculate the resulting value
| continuously. Math.easeInOutBack = function (t,
| b, c, d, s) { if (s == undefined) s = 1.70158;
| if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
| return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; };
|
| If you want to dig deeper, visit roberpenner's easing overview
| [2] with some resources. Surprisingly all of those links are
| still working.
|
| [1] https://robertpenner.com/easing/penner_easing_as1.txt [2]
| https://robertpenner.com/easing/
| jasonjmcghee wrote:
| I really wanted to change the easing curves. They are
| interactive, but not modifiable. If you're reading this
| @joshwcomeau - i would play with the curves if you made them
| modifiable lol
| nine_k wrote:
| There is a modifiable curve after many fixed-shape examples.
| It's not easy to come up with something that feels realistic
| though!
| _greim_ wrote:
| Since the goal is to create an illusion of real physics, I wonder
| when they'll just cut to the chase and start using actual physics
| engines.
|
| Reason I mention it is neither this nor bezier curves deal with
| the target changing mid-animation very well. CSS just starts over
| from the current position, which breaks the illusion. A physics
| engine would maintain the illusion, and could be simpler to
| specify: transition: physics(system=gravity,
| force=10, bounce=on, dampening=3) transition:
| physics(system=spring, force=5, bounce=off, dampening=5)
| tshaddox wrote:
| The article mentions spring animations, which is essentially a
| basic physics simulation. They're very commonly used in higher
| level JavaScript animation frameworks, but not supported in
| native CSS.
| petralithic wrote:
| Both paragraphs are addressed in the article.
| Theodores wrote:
| "Marge, I'm pulling an all-nighter for my little girl. Put on a
| pot of coffee! Drink it, and start making burgers"
|
| I love articles like this one, that inspire me to want to get
| coding as if it was the most exciting thing to do in the world.
|
| I did subscribe to the newsletter, I bookmarked the page, and I
| am going back right now to see what else there is to learn from
| the website. Some of it is in the details, if you subscribe, then
| you get a sound played. For the last two decades or so, playing
| sounds without asking the user has been strictly forbidden, but
| here the rules are known and broken, which I like, as it means I
| can experiment with this myself and stop being so boring.
| dyauspitr wrote:
| CSS is so stupid, this stuff was so easy with Flash. Just look at
| this mess.
| culebron21 wrote:
| Why do we need, essentially checkboxes, to have a whole
| simulation? How many people would even notice the switches have a
| transition at all?
|
| I was fascinated with building websites ~25 years ago, but
| looking back, we were doing just printing press on screens --
| e.g. the obsession with text-align:justify, and some people not
| satisfied with that, made punctuation marks stick out. All that
| "rubber" <div>s insanity... and now this: every little flip
| switch needs a whole animation process. Who will care if they
| have no transitions whatsoever?
| jdthedisciple wrote:
| Counterpoint:
|
| A smoothly animated switch is calming to our vegetative nervous
| system resulting in reduced systemic bodily inflammation,
| thereby facilitating healing from almost any health condition
| imaginable.
|
| Bit like a wholesome, warm asparagus soup before bed.
| afandian wrote:
| It's like we never learn from history.
|
| Remember "The Grouch" Mac OS extension, and the parents who
| found that their children had deleted precious files because
| they enjoyed the little song?
|
| https://apple.fandom.com/wiki/The_Grouch
| JodieBenitez wrote:
| There are people like him. And then there are people like me,
| looking for the option in my window manager _not_ to draw the
| content when a window is moved.
| srean wrote:
| Two of a kind then. This would be the first thing I would set
| in my fvwm window manager.
| lerp-io wrote:
| once u mess with it enough u will realize that u need physics
| math that relies on a function that uses the previous state to
| interpolate between different states. u can use great libraries
| such as https://motion.dev/ for this
| maybewhenthesun wrote:
| a revisit of the <blink> tag :-P
|
| The article is nice. The website is very nicely done. It's
| interesting in a 'because you can' sort of way.
|
| But I shudder when I imagine a web where all page elements move
| with bouncyness.
|
| edit: which is not to say you should _never_ use it of course.
| Even the <blink> had some uses.
| afandian wrote:
| These are fun decorations. Maybe there's a practical benefit. But
| please, if someone has set 'prefer reduced motion' then just
| don't animate anything.
| muspimerol wrote:
| Good thing that's exactly what the article suggests!
| afandian wrote:
| I wasn't clear from the article if it was entirely disabled.
| It says:
|
| > Like with all animations, we should make sure to respect
| user motion preferences.
|
| I'm out of date with modern CSS, so I wasn't sure from the
| syntax if the code snippet out-and-out prevented it, or just
| reduced it.
| pwdisswordfishy wrote:
| Why is it even something that websites have to explicitly
| design for?
|
| Browsers should just refuse to honor any animation declarations
| when the preference is enabled, with websites none the wiser.
___________________________________________________________________
(page generated 2025-10-31 23:02 UTC)