Springs and Bounces in Native CSS
Posted2 months agoActive2 months ago
joshwcomeau.comTechstory
excitedpositive
Debate
40/100
CSSAnimationWeb Development
Key topics
CSS
Animation
Web Development
The article discusses using native CSS to create spring and bounce animations, sparking a lively discussion about the potential and limitations of CSS animations.
Snapshot generated from the HN discussion
Discussion Activity
Active discussionFirst comment
2d
Peak period
19
48-54h
Avg / period
8.2
Comment distribution41 data points
Loading chart...
Based on 41 loaded comments
Key moments
- 01Story posted
Oct 28, 2025 at 2:01 PM EDT
2 months ago
Step 01 - 02First comment
Oct 30, 2025 at 4:21 PM EDT
2d after posting
Step 02 - 03Peak activity
19 comments in 48-54h
Hottest window of the conversation
Step 03 - 04Latest activity
Oct 31, 2025 at 9:04 PM EDT
2 months ago
Step 04
Generating AI Summary...
Analyzing up to 500 comments to identify key contributors and discussion patterns
ID: 45736461Type: storyLast synced: 11/20/2025, 3:41:08 PM
Want the full context?
Jump to the original sources
Read the primary article or dive into the live Hacker News thread when you're ready.
- 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.
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.
* 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.
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?
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:
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?
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.
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
It was a nice tech support call, in the sense that removing the extension fixed all the weird crashes and reboots.
But some folks were really sad to let the Grouch go..
> 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.
Browsers should just refuse to honor any animation declarations when the preference is enabled, with websites none the wiser.
Edit: it seems it's caused by autoplay of Easing Wizard's video.
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.
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.
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.
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/