4 ms·

Animation is usually the biggest pain point with frameworks like this -- and it usually feels like a complete afterthought for framework designers. Of course yo

by thurn 4y ago

Animation is usually the biggest pain point with frameworks like this -- and it usually feels like a complete afterthought for framework designers. Of course you always have the simple CSS-style stuff (here's a list of properties you can attach transitions to) but as soon as you get into anything more complicated it all falls apart.

infogulch 4y ago
CSS is pretty flexible. What kind of animations would you expect to be difficult to express?
- webmaven 4y ago
  > CSS is pretty flexible. What kind of animations would you expect to be difficult to express? Interpolations of anything beyond basic properties such as size, orientation, opacity, color, stroke, and fill; vector shapes, particle systems, and generative textures come to mind. There are intermediate possibilities. In theory you could "compile" the animation of a skeletal system with inverse kinematics to CSS, but I'm not aware of anyone going to the trouble.
  - infogulch 4y ago
    If you're going all the way to skeletons, kinematics, particle systems, etc maybe you just need a game renderer. Say, Bevy, if you want a rust flavor.
    - webmaven 4y ago
      No need to go that far. If you're just looking for the edge of where the capabilities of CSS animation fails, consider the pseudo-physics of various direct manipulations in touch UIs: eg. the bounce when you swipe to scroll and reach the last item, or swipe down again to refresh, or swipe to fling cards aside left or right, or pinch to zoom past the last zoom level, etc. In some cases you could get a good-enough result by animating from arbitrary (ie. user controlled) starting point to one or more fixed end-states (eg. Three "flick right" animations, one each for flick up and to the right, right, or down and to the right), but at that point you might as well just use an animation library.
      - webmaven 4y ago
        To restate things from a bit more mathematical perspective, interpolating position (even with control over easing etc.) only gets you so far. Ideally you would be able to set and interpolate higher derivatives of position over time (speed, acceleration, etc.) as well, without resorting to JS.
wtetzner 4y ago
How important are animations in a UI? I typically find them annoying (because you have to wait for them).
- chriskrycho 4y ago
  Poor animation design has exactly the problem you describe. Animation in general is a very useful affordance, though: it allows you to convey the relationships between the various nodes and modes in your UI. That ranges from being able to do more than hard toggles on colors of buttons for different modes to actually being able to do push/pop on “stacks” within the UI, which is a concept mobile UIs in particular make heavy use of. Overuse of animation can be an accessibility problem, but having no animations or transitions can actually also be an accessibility problem because it can make it hard for people to build a mental model of what happened when navigation occurred.
  - berkes 4y ago
    I'd go so far as to state that anyone who 'hates animations' uses them daily. The ones you don't notice are most often good - yet they are there. You'll notice degrading UX when they aren't. The ones you notice are quite likely bad, but that doesn't make the majority of aniation bad. Anything, from a blinking cursor, to the highlight effect on your smartphone keyboard to the check-uncheck of a checkbox is animated. Subtle, but crucial.
    - wtetzner 4y ago
      I don't think these are the kinds of animations being referred to. They're instantaneous state changes. E.g., for the highlight effect you can just change the key image on press. It doesn't need multiple frames of animation. So while it is technically an animation, I don't think it really requires any special GUI toolkit support to implement.
- ativzzz 4y ago
  Simple sliding animations for going back/forward in mobile screens add so much more confirmation to what exactly is happening when you click an element. Or when you tap a button. That feedback you get when you interact with an element is often some kind of animation.
chriskrycho 4y ago
CSS transitions are fairly restricted, but animation in CSS is substantially more capable than transitions if you’re using the animations API instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animati...
grayrest 4y ago
> Animation is usually the biggest pain point with frameworks like this -- and it usually feels like a complete afterthought for framework designers. It tends to be. The only (popular) JS framework where it's a first class concept is with Svelte. There's a basic set of transitions and the framework handles the post-out-transition removal (which is annoying in a lot of frameworks) but there's also custom CSS animations where a JS-defined curve is rendered into CSS [1], semi-automated FLIP animations for non-transitioning nodes [2], and deferred transitions where the outro of one element is sync'd with the intro of another [3]. There's a few other things like springs and whatnot but I consider the package as a whole to be a significant advancement in the state of the art. [1] https://svelte.dev/tutorial/custom-css-transitions https://svelte.dev/tutorial/custom-css-transitions [2] https://svelte.dev/tutorial/animate https://svelte.dev/tutorial/animate [3] https://svelte.dev/tutorial/deferred-transitions https://svelte.dev/tutorial/deferred-transitions The only other framework I know of that's tackled it in core is Inferno but I haven't read through their implementation in detail.
- IshKebab 4y ago
  Flutter is also very good at animation. I suspect that a significant part of the motivation for Flutter was Android developers getting frustrated with the repeated unsatisfactory attempts at an animation API for Java Android. I think there are like 4 different animation APIs in Java Android now.
  - ink404 4y ago
    The compose APIs for animation are quite nice on Android now

by thurn 4y ago

infogulch 4y ago

CSS is pretty flexible. What kind of animations would you expect to be difficult to express?

webmaven 4y ago
> CSS is pretty flexible. What kind of animations would you expect to be difficult to express? Interpolations of anything beyond basic properties such as size, orientation, opacity, color, stroke, and fill; vector shapes, particle systems, and generative textures come to mind. There are intermediate possibilities. In theory you could "compile" the animation of a skeletal system with inverse kinematics to CSS, but I'm not aware of anyone going to the trouble.
- infogulch 4y ago
  If you're going all the way to skeletons, kinematics, particle systems, etc maybe you just need a game renderer. Say, Bevy, if you want a rust flavor.
  - webmaven 4y ago
    No need to go that far. If you're just looking for the edge of where the capabilities of CSS animation fails, consider the pseudo-physics of various direct manipulations in touch UIs: eg. the bounce when you swipe to scroll and reach the last item, or swipe down again to refresh, or swipe to fling cards aside left or right, or pinch to zoom past the last zoom level, etc. In some cases you could get a good-enough result by animating from arbitrary (ie. user controlled) starting point to one or more fixed end-states (eg. Three "flick right" animations, one each for flick up and to the right, right, or down and to the right), but at that point you might as well just use an animation library.
    - webmaven 4y ago
      To restate things from a bit more mathematical perspective, interpolating position (even with control over easing etc.) only gets you so far. Ideally you would be able to set and interpolate higher derivatives of position over time (speed, acceleration, etc.) as well, without resorting to JS.

wtetzner 4y ago

How important are animations in a UI? I typically find them annoying (because you have to wait for them).

chriskrycho 4y ago
Poor animation design has exactly the problem you describe. Animation in general is a very useful affordance, though: it allows you to convey the relationships between the various nodes and modes in your UI. That ranges from being able to do more than hard toggles on colors of buttons for different modes to actually being able to do push/pop on “stacks” within the UI, which is a concept mobile UIs in particular make heavy use of. Overuse of animation can be an accessibility problem, but having no animations or transitions can actually also be an accessibility problem because it can make it hard for people to build a mental model of what happened when navigation occurred.
- berkes 4y ago
  I'd go so far as to state that anyone who 'hates animations' uses them daily. The ones you don't notice are most often good - yet they are there. You'll notice degrading UX when they aren't. The ones you notice are quite likely bad, but that doesn't make the majority of aniation bad. Anything, from a blinking cursor, to the highlight effect on your smartphone keyboard to the check-uncheck of a checkbox is animated. Subtle, but crucial.
  - wtetzner 4y ago
    I don't think these are the kinds of animations being referred to. They're instantaneous state changes. E.g., for the highlight effect you can just change the key image on press. It doesn't need multiple frames of animation. So while it is technically an animation, I don't think it really requires any special GUI toolkit support to implement.
ativzzz 4y ago
Simple sliding animations for going back/forward in mobile screens add so much more confirmation to what exactly is happening when you click an element. Or when you tap a button. That feedback you get when you interact with an element is often some kind of animation.

chriskrycho 4y ago

CSS transitions are fairly restricted, but animation in CSS is substantially more capable than transitions if you’re using the animations API instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animati...

grayrest 4y ago

> Animation is usually the biggest pain point with frameworks like this -- and it usually feels like a complete afterthought for framework designers. It tends to be. The only (popular) JS framework where it's a first class concept is with Svelte. There's a basic set of transitions and the framework handles the post-out-transition removal (which is annoying in a lot of frameworks) but there's also custom CSS animations where a JS-defined curve is rendered into CSS [1], semi-automated FLIP animations for non-transitioning nodes [2], and deferred transitions where the outro of one element is sync'd with the intro of another [3]. There's a few other things like springs and whatnot but I consider the package as a whole to be a significant advancement in the state of the art. [1] https://svelte.dev/tutorial/custom-css-transitions https://svelte.dev/tutorial/custom-css-transitions [2] https://svelte.dev/tutorial/animate https://svelte.dev/tutorial/animate [3] https://svelte.dev/tutorial/deferred-transitions https://svelte.dev/tutorial/deferred-transitions The only other framework I know of that's tackled it in core is Inferno but I haven't read through their implementation in detail.

IshKebab 4y ago
Flutter is also very good at animation. I suspect that a significant part of the motivation for Flutter was Android developers getting frustrated with the repeated unsatisfactory attempts at an animation API for Java Android. I think there are like 4 different animation APIs in Java Android now.
- ink404 4y ago
  The compose APIs for animation are quite nice on Android now