6 ms·
Springs and bounces in native CSS
- SweetSoftPillow 11mo agoI'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 11mo agoBtw: the design of the webpage with all the animations and beautifully crafted info-boxes is top-notch.
- rosslh 11mo agoYet another banger from Josh Comeau. Dude does not miss!
- spankalee 11mo agoI 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 11mo agoI'm not a web guy. Why would you want that in CSS when you have Javascript?
- paulhebert 11mo agoJS 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 11mo agoOff 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__ 11mo agoCSS animations run in the compositor thread, so they are isolated from jank due to concurrently running JS.
- deleted 11mo ago[deleted]
- alt187 11mo agoAnother 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 11mo agoFor performance reasons we always prefer HTML, then CSS, and only then JS as a last resort.
- tkiolp4 11mo agoNice website. I got the newsletter popup, but it was cute, not annoying like they usually are.
- dmitrygr 11mo ago> 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 11mo agoIt’s a timing function.
- tshaddox 11mo agoIt’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 Bézier curves.
- dmitrygr 11mo agoEvery thing you add is another step away from making building another browser engine a possibility.
- alt187 11mo agoI'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 11mo agoIndeed. I suspect that generally the older a web feature is, the more difficult it would be for a new browser lot implement.
- 11mo ago
- slig 11mo agoI'm doing his latest course on whimsical animations. So. Freaking. Good.
- madethemcry 11mo agoThat 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 https://robertpenner.com/easing/penner_easing_as1.txt [2] https://robertpenner.com/easing/ https://robertpenner.com/easing/
- jasonjmcghee 11mo agoI 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 11mo agoThere is a modifiable curve after many fixed-shape examples. It's not easy to come up with something that feels realistic though!
- _greim_ 11mo agoSince 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 11mo agoThe 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.
- deleted 11mo ago[deleted]
- petralithic 11mo agoBoth paragraphs are addressed in the article.
- Theodores 11mo ago"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 11mo agoCSS is so stupid, this stuff was so easy with Flash. Just look at this mess.
- culebron21 11mo agoWhy 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 11mo agoCounterpoint: 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 11mo agoIt'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 https://apple.fandom.com/wiki/The_Grouch
- watersb 11mo agoOn a Mac IIci with a reasonable amount of RAM, I has users run out of System memory when the "Grouch" extension was loaded. The audio was uncompressed PCM, and it took about 200KB. 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..
- JodieBenitez 11mo agoThere 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.
- deleted 11mo ago[deleted]
- lerp-io 11mo agoonce 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/ https://motion.dev/ for this
- maybewhenthesun 11mo agoa 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 11mo agoThese 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 11mo agoGood thing that's exactly what the article suggests!
- afandian 11mo agoI 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 11mo agoWhy 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.