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:
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.
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.
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
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.
> 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?
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:
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.
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/
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.
Btw: the design of the webpage with all the animations and beautifully crafted info-boxes is top-notch.
Agreed. And wow, try to turn dark/light theme on and off (hint: speakers on).
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
There is a modifiable curve after many fixed-shape examples. It's not easy to come up with something that feels realistic though!
Nice website. I got the newsletter popup, but it was cute, not annoying like they usually are.
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.
I'm not a web guy. Why would you want that in CSS when you have Javascript?
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.
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.
CSS animations run in the compositor thread, so they are isolated from jank due to concurrently running JS.
I'm doing his latest course on whimsical animations. So. Freaking. Good.
Yet another banger from Josh Comeau. Dude does not miss!
> 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?
It’s a timing function.