5 ms·

> The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them. Animating the details element is tricky. By the spec, brow

by maxloh 10mo ago

> The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them. Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block.

qudat 10mo ago
Animating accordions is almost always a bad idea because the content length can make it unbearable. In general I find animations on the web overused and unnecessary
- xp84 10mo ago
  Seriously. As a user I can count on zero hands the number of times I’ve said “Oh great, I’m sure glad this UI is animated!” - and likewise zero times have I missed it when animation isn’t used. Animation is a way to light small units of your users’ precious time on fire, for zero benefit.
  - normie3000 10mo ago
    Animations are also a way to explain causal relationships between interactions and their results, and to help build mental models of software behaviour.
    - TeMPOraL 10mo ago
      Being related to neither software behavior nor the structure of the underlying problem, animations tend to obscure the causal relationships and make it harder for user to build a correct mental model.
      - kaoD 10mo ago
        I see where you're coming from: animations are overused and even when they make sense they are made too slow and flashy (because otherwise how would the implementors feel like they did something if it's barely noticeable?) Animations are like bass in music: most people notice them only when they're missing or bad.
  - deleted 10mo ago
    [deleted]
  - ozlikethewizard 10mo ago
    As the other user alluded to, Animations are not actually there for people who are comfortable using a computer. The vast majority of users are borderlines in capable of using the internet these days. Animations are supposed to be there to really help guide these users into understanding what the scary machine is doing when they click it. Can they be overused, absolutely, but i think have an accordion fold out animated is a reasonable case. You gotta remember your average user isnt paying any fucking attention, so drawing their attention to important changes on screen is not only good but necessary. I'd prefer no animations ever, but i also dont own an iphone while the majority of the world either does or wants to.
    - ben_w 10mo ago
      That's the positive interpretation, but none of the discussions I've had with UI designers or managers have been about adding animation for accessibility, and the zeitgeist of the last decade has been that skeuomorphism (of which intuitive animations are a subset) is passé. So far as I can tell, all that the stakeholders want from the UI, animations included, is pizzazz.
    - xp84 10mo ago
      If it is for those people who barely grasp the slightest thing about what’s going on on-screen, I could grant them that, if they’d let me turn it off. In the days before jailbreak became basically impossible, setting the animation duration to zero was a blessed, incredibly satisfying thing. It’s exactly what I want. Just do the transition in zero seconds. My iPhone 15 can’t even catch my first 1-2 keystrokes on the keyboard, multiple times a day, but boy howdy does it have the time and the cycles to animate that f*%ker into view. The disrespect for my time and my needs is so obvious.
  - deleted 10mo ago
    [deleted]
deleted 10mo ago
[deleted]
computerfriend 10mo ago
You can put a transition on details > summary.
jakelazaroff 10mo ago
That is no longer true! You can do it in CSS with a combination of `@starting-style` and `transition-behavior: allow-discrete`. [1] Another gotcha you'll run into is animating the height. A couple other new features (`interpolate-size: allow-keywords` and `::details-content`) will let you get around that. [2] Modern CSS is awesome. [1] https://developer.chrome.com/blog/entry-exit-animations https://developer.chrome.com/blog/entry-exit-animations [2] https://nerdy.dev/open-and-close-transitions-for-the-details-element https://nerdy.dev/open-and-close-transitions-for-the-details...
- llmslave2 10mo ago
  @starting-style Has less than 90% browser support making it a non-starter for the time being at least.
  - jakelazaroff 10mo ago
    It'll just degrade gracefully into not animating the element's entry, so unless the animation is somehow crucial you should still be fine to use it. If you really need to detect whether it's supported there are hacky methods: https://www.bram.us/2024/07/11/feature-detect-css-starting-style-support/ https://www.bram.us/2024/07/11/feature-detect-css-starting-s...
    - bryanrasmussen 10mo ago
      I agree, but must also observe that I have never met a designer who was willing to admit without a knock-down drag-out fight that any animation they put in was not somehow crucial.
      - mikedelfino 10mo ago
        The trick is they'll see it working for themselves. :)
      - sfn42 10mo ago
        I've never met a designer who wasn't completely fine with my suggestions for more pragmatic solutions. Like just styling a default scrollbar instead of implementing my own scrollbar to make it exactly like the design. Using a default drop-down menu instead of rolling my own just so I can round the corners of the selects. The designers I've worked with are fine with these things. We have more important things to work on than small style details. We can go back and change these things later if anyone actually cares, but generally nobody ever does.
lelanthran 10mo ago
> Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block. Very hot take; then don't animate them! Animation in a UI is great - you draw the user's attention to a widget that changed because they might not necessarily notice it otherwise. This improves the UX. With a details/summary, the animation is not needed and can only make a negative change to the UX. There is no positive change to the UX that animating the details/summary elements would bring. When it is opened it is obvious. If you really really need to animate the details, instead of animating open/close, instead animate the summary background/text color to indicate that the element has just changed state. Would I like easy animation of open/close? Sure. Does it improve the UX? Nope.
stephenr 10mo ago
> browsers don’t natively support transitions between display: none and display: block. You say that like it's a bad thing.
danw1979 10mo ago
Does it need animating ?

by maxloh 10mo ago

qudat 10mo ago

Animating accordions is almost always a bad idea because the content length can make it unbearable. In general I find animations on the web overused and unnecessary

xp84 10mo ago
Seriously. As a user I can count on zero hands the number of times I’ve said “Oh great, I’m sure glad this UI is animated!” - and likewise zero times have I missed it when animation isn’t used. Animation is a way to light small units of your users’ precious time on fire, for zero benefit.
- normie3000 10mo ago
  Animations are also a way to explain causal relationships between interactions and their results, and to help build mental models of software behaviour.
  - TeMPOraL 10mo ago
    Being related to neither software behavior nor the structure of the underlying problem, animations tend to obscure the causal relationships and make it harder for user to build a correct mental model.
    - kaoD 10mo ago
      I see where you're coming from: animations are overused and even when they make sense they are made too slow and flashy (because otherwise how would the implementors feel like they did something if it's barely noticeable?) Animations are like bass in music: most people notice them only when they're missing or bad.
- deleted 10mo ago
  [deleted]
- ozlikethewizard 10mo ago
  As the other user alluded to, Animations are not actually there for people who are comfortable using a computer. The vast majority of users are borderlines in capable of using the internet these days. Animations are supposed to be there to really help guide these users into understanding what the scary machine is doing when they click it. Can they be overused, absolutely, but i think have an accordion fold out animated is a reasonable case. You gotta remember your average user isnt paying any fucking attention, so drawing their attention to important changes on screen is not only good but necessary. I'd prefer no animations ever, but i also dont own an iphone while the majority of the world either does or wants to.
  - ben_w 10mo ago
    That's the positive interpretation, but none of the discussions I've had with UI designers or managers have been about adding animation for accessibility, and the zeitgeist of the last decade has been that skeuomorphism (of which intuitive animations are a subset) is passé. So far as I can tell, all that the stakeholders want from the UI, animations included, is pizzazz.
  - xp84 10mo ago
    If it is for those people who barely grasp the slightest thing about what’s going on on-screen, I could grant them that, if they’d let me turn it off. In the days before jailbreak became basically impossible, setting the animation duration to zero was a blessed, incredibly satisfying thing. It’s exactly what I want. Just do the transition in zero seconds. My iPhone 15 can’t even catch my first 1-2 keystrokes on the keyboard, multiple times a day, but boy howdy does it have the time and the cycles to animate that f*%ker into view. The disrespect for my time and my needs is so obvious.
- deleted 10mo ago
  [deleted]

deleted 10mo ago

[deleted]

computerfriend 10mo ago

You can put a transition on details > summary.

jakelazaroff 10mo ago

That is no longer true! You can do it in CSS with a combination of `@starting-style` and `transition-behavior: allow-discrete`. [1] Another gotcha you'll run into is animating the height. A couple other new features (`interpolate-size: allow-keywords` and `::details-content`) will let you get around that. [2] Modern CSS is awesome. [1] https://developer.chrome.com/blog/entry-exit-animations https://developer.chrome.com/blog/entry-exit-animations [2] https://nerdy.dev/open-and-close-transitions-for-the-details-element https://nerdy.dev/open-and-close-transitions-for-the-details...

llmslave2 10mo ago
@starting-style Has less than 90% browser support making it a non-starter for the time being at least.
- jakelazaroff 10mo ago
  It'll just degrade gracefully into not animating the element's entry, so unless the animation is somehow crucial you should still be fine to use it. If you really need to detect whether it's supported there are hacky methods: https://www.bram.us/2024/07/11/feature-detect-css-starting-style-support/ https://www.bram.us/2024/07/11/feature-detect-css-starting-s...
  - bryanrasmussen 10mo ago
    I agree, but must also observe that I have never met a designer who was willing to admit without a knock-down drag-out fight that any animation they put in was not somehow crucial.
    - mikedelfino 10mo ago
      The trick is they'll see it working for themselves. :)
    - sfn42 10mo ago
      I've never met a designer who wasn't completely fine with my suggestions for more pragmatic solutions. Like just styling a default scrollbar instead of implementing my own scrollbar to make it exactly like the design. Using a default drop-down menu instead of rolling my own just so I can round the corners of the selects. The designers I've worked with are fine with these things. We have more important things to work on than small style details. We can go back and change these things later if anyone actually cares, but generally nobody ever does.

lelanthran 10mo ago

> Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block. Very hot take; then don't animate them! Animation in a UI is great - you draw the user's attention to a widget that changed because they might not necessarily notice it otherwise. This improves the UX. With a details/summary, the animation is not needed and can only make a negative change to the UX. There is no positive change to the UX that animating the details/summary elements would bring. When it is opened it is obvious. If you really really need to animate the details, instead of animating open/close, instead animate the summary background/text color to indicate that the element has just changed state. Would I like easy animation of open/close? Sure. Does it improve the UX? Nope.

stephenr 10mo ago

> browsers don’t natively support transitions between display: none and display: block. You say that like it's a bad thing.

danw1979 10mo ago

Does it need animating ?