
Resonance NodeGroup: Create complex animated transitions in React - npm_start
https://sghall.github.io/resonance/#/documentation/node-group
======
artursapek
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.

~~~
jszymborski
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...](https://sghall.github.io/resonance/#/redux-
examples/packed-by-age)

~~~
artursapek
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.

------
radley
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).

~~~
npm_start
Have to disagree. If you look at the link on the states bar chart example...
[https://sghall.github.io/resonance/#/redux-
examples/states-b...](https://sghall.github.io/resonance/#/redux-
examples/states-by-age)

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/](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](https://bl.ocks.org/mbostock/3808234)

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

~~~
radley
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.

------
markbnj
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.

------
matthewvincent
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!

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

------
LeoNatan25
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".

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

