Can this be done in pure CSS?
CSS has its own easing function customization shorthand notation. So you could just use that.
https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...
My favourite animation trick: exponential smoothing (2023)
241–250 of 390 posts
Re: My favourite animation trick: exponential smoothing (2023)
#242Earlier quoted context omitted.
Me too, agree with you and GP. And I can't keep wondering why this opinion is so unpopular. Today's UIs are bloated with unnecessary animations (which adds latency). But worse than animations is that UIs are horribly inconsistent; took me a while to figure out those toggles should be clicked, not dragged; or: what is even clickable, how do I scroll, ...? I could go on forever, and probably so can you. Why do only old…
> why is our opinion unpopular? I think other people do feel a vague sense of anxiety using modern software from not quite knowing what all the interaction patterns are. When you click that hamburger menu on the website, what will it do, exactly? But most people from outside the software world just blame themselves for “not being very good with computers”. The problem is that it’s not fashionable any more amongst des…
UI has become the domain of marketing and branding.
Re: My favourite animation trick: exponential smoothing (2023)
#243Earlier quoted context omitted.
Amazingly, not in 2024. They put shadows on otherwise flat layers - for gratuitous effect, but also to get back some separation after they've flattenned everything.
The shadow is around flat piece of paper of zero height, levitating off the background, casting shadow 360 degrees all around. No physical lighting set up could produce this effect.
[deleted]
Re: My favourite animation trick: exponential smoothing (2023)
#244The instantaneous one is best.
Re: My favourite animation trick: exponential smoothing (2023)
#245The first toggle button on the page is the nicest to use IMO.
Re: My favourite animation trick: exponential smoothing (2023)
#246You never get there with exponential smoothing. It takes infinite time to asymptotically approach the goal. Also, that page uses 100% of the CPU in Firefox.
Same issue. Android FF just won't handle this "basic modern website". Probably 5+MB of js being loaded in.
Re: My favourite animation trick: exponential smoothing (2023)
#247Earlier quoted context omitted.
Several years ago, the number one complaint you could read on this forum on Firefox was that Chrome felt snappier. Firefox is irrelevant today because the supposedly highly sophisticated users decided based on feel. Smooth animation performance was a major point of iOS over Android for years. I see plenty of evidence of sophisticated users deciding based on the factors you dismiss.
Smooth animations > janky animations, always, but that's not the issue here -- the issue is whether something that doesn't need to be animated should be animated. I prefer programs I perceive as "snappier" -- and to me, a part of "snappiness" is choosing not to animate things unnecessarily.
Some animations can be essential for user experience. One of them is demoed in the page: the page scroll animation.
If you've ever looked at a wall of text or other high entropy information displayed on the screen, especially if it was on a shared screen so the image is all you can see with no hints about the scroll direction, keeping up with the motion can be nigh impossible. You have the whole image jumping up and down several lines or even a full page at a time and you spend all your brain power trying to find an "anchor" reference point to realize what that movement was, instead of focusing on the content.
In such cases even the most subtle of animations that tells me how the image moved is a treasure.
Re: My favourite animation trick: exponential smoothing (2023)
#248> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…
> Like in this case, what exactly is "going on" that requires this visual delay? Nothing. It's a technical demonstration. The delay is also overemphasized to make the difference more apparent. > The this is the fanciness that detracts from solving the major flaw of these sliders: you can't easily tell whether it's off or on That's because they don't represent anything. Toggles don't always represent on or off, either…
> I'm consistently surprised by how quick so many developers are to assume their personal usage habits, osmosis-gained knowledge from projects, and folk wisdom about design trumps the expertise of seasoned credentialed professionals in the field
Spot on. Devs have on average extreme levels of confidence in unrepresentative opinions (space bar heating) and think UI is beneath them.
> FOSS projects (that don't have foundation-funded UI teams like Blender or Mozilla) are used almost exclusively by other developers
Nobody is better at pissing away hard labor like devs. There are these amazing OSS projects with 10ks of man hours invested, that won’t let designers near their cluttered prototype ui, if any. Designers are meme-famous as working for free - harnessing their power in FOSS would be akin to convincing a child to eat ice cream. Yet they’re unable to.
Note this is not only UI, but general theory of mind skills. How many times have you read a README on GitHub where it’s written like the most over-cryptic nonsense, despite being quite general and straight forward projects under the hood? My working theory is UI skills and “explaining things” are fruits from the same tree. Most devs don’t practice it, so they get deep into curse of knowledge territory. Even the smart have blindspots, maybe especially them.
Re: My favourite animation trick: exponential smoothing (2023)
#249I don't see much discussion here of the crucial point, which is that this isn't just another easing curve or smoothstep() between 0 and 1, it's a stateless method that handles pretty much any inputs in a regular way. That's really useful! If you've used CSS transitions you'll have encountered the problem this solves. Okay, my duration is 400ms -- but why 400? Shouldn't it depend on how far it has to move? As others h…
[deleted]
Re: My favourite animation trick: exponential smoothing (2023)
#250I've used this for decades. The sweet spot for ui components seems to be moving 90% of the way to the target every 80 milliseconds.
That's a great rule of thumb, I'll remember that one!