[HN Gopher] Springs and bounces in native CSS
___________________________________________________________________
Springs and bounces in native CSS
Author : feross
Score : 93 points
Date : 2025-10-28 18:01 UTC (2 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).
| 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.
| 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.
| 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!
___________________________________________________________________
(page generated 2025-10-30 23:00 UTC)