Resonance NodeGroup: Create complex animated transitions in React | Hacker News Reader

Resonance NodeGroup: Create complex animated transitions in React

sghall.github.io

115 pointsnpm_start20 comments

I used to have a bad rep at my last job for always being a negative nancy about animations in our UI. In my opinion it's extremely easy for people to get overzealous with them and abuse them, which just makes an interface feel sluggish. It's especially annoying when a common action is animated and I'm sitting there waiting for the animation to finish over and over.

Animations can be useful to prevent disorientation during a transformation of the UI - hinting at something disappearing or perhaps showing the difference between two states when that difference in important. But I find all too often people simply put them in because they can and I feel like I'm back in 4th grade watching my classmates' Powerpoint 2003 presentations.

I agree with your general point but I will say that the "State Circle Pack" demo is actually a great use of animation; particularly when you slow down the animation to ~2sec.

You can see which groups resize or drop out, and which groups take there place. Much more illustrative than most animated pie charts or bar graphs you'd normally would see for the same info.

https://sghall.github.io/resonance/#/redux-examples/packed-b...

Yep, I'm not trying to talk down this library (some of the examples do look nice). And React's core is a UI diffing engine so it lends itself nicely to the useful types of animation I was trying to describe.

You're correct - animations should be used to convey some information, such as letting the user know something is happening if there's a high latency operation loading, but animations purely for visuals are incredibly annoying and a waste of time and resources.

Jump cuts in UI can be very disorienting however. I think animations are at their best when they're short and help tell the spatial model. Otherwise only used when the UI will take a while anyway such as loading in new content, or as small cue to get the user's attention. Agree that many people use it gratitously for no good reason however.

I completely agree with you. This principle is why I'm so opposed to the trend of using labels as form input placeholders, and animating them into place when the input takes focus. What information is that supposed to communicate to the user?

I wish more people were vocal about gratuitous (and especially slow!) transitions. For example, the animations at https://getfinal.com (for the Final credit card) are very annoying. You can't even select the "Sign In" option until the "fade in" has finished.

Dear god that's awful

A couple of animation that feel good to me are:

* fading the screen around a popup or other notification that must be acknowledged. I think this serves well to direct the attention.

* moving/shooting a message out of the screen to show it's being send somewhere. Apple Mail does that as well.

* Highlighting a part of a list that was changed by an action. Fading it out after a single row has been deleted for example.

None of this should ever take more than about 0.5-1 seconds, with the exception of the send-notification maybe, that signals/celebrates the end of a longer task.

It doesn't have to be one way or the other; there's a CSS feature that enables the user to tell a browser that they don't want to see motion - prefers-reduced-motion. https://css-tricks.com/introduction-reduced-motion-media-que...

I saw that Stripe is using that now, but it's meant to be used as an accessibility option:

> ... to disable motion effects for those with vestibular disorders

I'm complaining about tasteless/pointless animation, not animation in general. Several other people in this thread point out good use cases for it.

Respectfully, these animations are more gratuitous than beautiful. Animations are meant to add to the information and demonstrate relationships over time and place.

For the Simple bar charts, the animations should only show growth and decay, not fly around the screen nor flash through 16 decimal points of precision if the final value only needs 3.

The Pie Chart handles growth / decay very well, but it's only half-complete by starting with visible text markers around a pie that's not there.

Alphabet and State Bar Chart are simply bad, but I did enjoy the States Circle Pack animations. Curiously, I found the Circle Pack can't really display more than a dozen states at a time (at that size), and showing fewer is equally incomplete. So does it actually need a count slider?

Finally, the duration slider in the State Circle Pack doesn't add much to the information since all animations are slowed down, including fade out / in. It might work better if it simply paused on the informative steps (all old states, remaining states, all new states).

Have to disagree. If you look at the link on the states bar chart example... https://sghall.github.io/resonance/#/redux-examples/states-b...

That's a recreation of an example done by Mike Bostock which is really part of the canon on object constancy... https://bost.ocks.org/mike/constancy/

Same with the alphabet example. It's considered a reference example on the enter, update and exit pattern... https://bl.ocks.org/mbostock/3808234

The "bounce" animation is, in my mind, just a bit of fun.

I'll concede they're accepted patterns, I just don't find they add much value since there's a lot of information flying around the screen at the same time. If the change in values are important enough to animate, steps w/ overlapping action would be stronger.

Your examples are certainly stronger than the Resonance pack. The General Update Pattern uses color to add anticipation to the changes.

I'm fine with bounce animations when whimsy is appropriate the the audience. I also appreciate that Resonance uses ease functions.

I'll just add the 12 principles of animation:

http://minyos.its.rmit.edu.au/aim/a_notes/anim_principles.ht...

Data doesn't need all 12 methods all of the time, but anticipation, pose to pose, overlapping action, ease, and timing are pretty essential.

Maybe animations are a good idea, maybe they're not. It depends on the use case, obviously. But this is still a nice bit of work, and we ought to just recognize it for that. After all, if practicality were a strict prerequisite half the world's hackery would be disqualified.

Demos look good, and at first glance this might be the most easy to grok animation api I've seen for react. Excited to try this out!

Opened the URL on my phone.. noticed that the HTML demo content is misaligned on the right side..closed the page

When will it be enough with the "Beautiful" nonsense in webdev titles? It seems "beautiful" has become clickbait for the webdevs. Anything is "beautiful". Please set the title to something a lot less click bait, such as "Animations in React".

It's just part of the trend for every tool to come with a sales pitch

Reply on news.ycombinator.com