3 ms·
Respectfully, these animations are more gratuitous than beautiful. Animations are meant to add to the information and demonstrate relationships over time and pl
by radley 9y ago
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 9y agoHave to disagree. If you look at the link on the states bar chart example... https://sghall.github.io/resonance/#/redux-examples/states-by-age 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/ 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 9y agoI'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.
- radley 9y agoI'll just add the 12 principles of animation: http://minyos.its.rmit.edu.au/aim/a_notes/anim_principles.html 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.