Better understanding JS animation and the 'real-time' constraint

1

As a bit of an exercise yesterday I sat down to play/gain some practice with a number of concepts including traditional sort algorithms, CSS Grid, and dynamic CSS class creation.

For the most part this is working fine.

However, I’d really like to dynamically animate the update of the bars in the chart so one can ‘see’ the sort process happening.

In other languages for me this would be pretty straight forward-- But I’m still not quite ‘getting it’ as to how best to get this operation to work in JS even with say JQuery.

My code is here: https://codepen.io/abalducci/pen/OzbWvx

And the bar chart update procedure is under the ‘/* Update graph */’ section.

The issue seems to be that since it is ‘in the loop’, and the calculations themselves take but trivial time to complete, even adding .fadeOut/.fadeIn properties, all the updates happen at once thus so do the animations.

I’d like to get a ‘correct’ sense of the best way to go about this task, rather than artificially introducing say a time/date stamp delay or a setInterval counter/timer…

I mean there must be a more elegant way to queue/stagger animations, no ?

Any thoughts ?

2

Don’t run them at the same time. Once an animation is complete, it fires an event. You can listen for that and fire the next event etc etc. Eg you could add a CSS class to the first, wait until the animation competes, remove, add to next, etc. But if you want sequenced animations, use gsap, or animejs unless you really like writing boilerplate code. The Web Animation API does a lot of what those two do, but is still experimental.

1 Like
3

Dear Dan,

Okay, thanks for that I will look into those. I also figure I could place the animations on a queue and pull set interval from them that way popping each animation off. In my mind its actually nice that animations can occur concurrently, or non blocking, just trying to get a better sense of how to handle the requisite event timing for the desired effect.