Animations can be a great way to create a sense of dynamism to a website. But it has to be very subtle, and done right. I sense most people’s knee-jerk reaction is to hate these, and I can understand why. I think the trick is to not break any expected UI conventions. So many flashy web experiences hijack the scroll, or create mystery buttons that aren’t clearly clickable. Harking back to Steve Krug’s mantra, “don’t make me think.” The best web design is so clear and intuitive, it rarely draws attention to itself. It’s like iOS animations, when closing an app, and seeing the app get sucked into it’s icon. It’s so quick and subtle, you barely notice it.
Kudos to the reduced motion advice at the end of the article, for better accessibility. I didn’t know this.
> “It’s like iOS animations, when closing an app, and seeing the app get sucked into it’s icon. It’s so quick and subtle, you barely notice it.”
it’s decidedly not quick and subtle. ios animations are blocking, so anytime i try to do things faster than the animation can finish, i very much notice it (particularly acutely when typing in my passcode). i hate that i have a “supercomputer” in my pocket and yet i can outpace it on a keyboard because of poor programming/user experience.
with that said, i agree that non-blocking and subtle animations do help us better intuit the user interface if done thoughtfully.
most web pages already have lots of 'animated entrances' in the form of the entire page hopping around all over the place as elements are loaded via client side rendering, flashes of unstyled text, etc. for example, here's what this css-tricks webpage looks like when the page loads [0]. any CSS page loading animation you add to this page would have to 'compete' with the unsightly effects of the page trying to go through several steps to render itself.
i think it's always such a relief when i click on a link to any site, and the page loads, and there's no animated anything whatsoever.
> a relief when i click on a link to any site, and the page loads, and there's no animated anything whatsoever
I've recently disabled CSS animations globally in Firefox's userContent.css and my Web experience has indeed improved considerably. (Annoyingly this particular page content still jumps a little because of some deferred image loading.)
When using animation delays, it's probably better to make the class include how long the delay is instead of just using 'animation-delay-1'. For example, Tailwind does this with transition delays, and it would definitely make the code clearer, imo.
12 comments
[ 2.2 ms ] story [ 53.6 ms ] threadWhat if ... no, thank you, get your 0.5 second delay and shove it where the sun don't shine?
Kudos to the reduced motion advice at the end of the article, for better accessibility. I didn’t know this.
it’s decidedly not quick and subtle. ios animations are blocking, so anytime i try to do things faster than the animation can finish, i very much notice it (particularly acutely when typing in my passcode). i hate that i have a “supercomputer” in my pocket and yet i can outpace it on a keyboard because of poor programming/user experience.
with that said, i agree that non-blocking and subtle animations do help us better intuit the user interface if done thoughtfully.
i think it's always such a relief when i click on a link to any site, and the page loads, and there's no animated anything whatsoever.
[0] http://telnet.asia/n20fns.gif
I've recently disabled CSS animations globally in Firefox's userContent.css and my Web experience has indeed improved considerably. (Annoyingly this particular page content still jumps a little because of some deferred image loading.)
This obviously does not affect scripted animations.It would be nice if sites respected the prefers-reduced-motion browser media feature.
.delay-contents:nth-child(1) { animation-delay: 0.6s; } etc
https://tailwindcss.com/docs/transition-delay