Sorting algorithm visualized, GSAP glitches at some point

[darkshines]

Hello guys,

I have been working on this, as a test for me. I chose to do the animation with gsap because I have been using it for over a year now and it's awesome. My goal is to do this with multiple sorting algorithms, thus I have started with the easiest one, the bubble sort, but it seems that at some point the animation glitches when elements swap. I have tried multiple ways to do this, more timelines, no timelines or just tweens but it looks like it glitches at the same point (as you can see in the demo) even though some elements work fine. In the end the algorithms and DOM elements are sorted, but the animation is the problem.

 

Am I missing something? Codepen here : 

 

Thanks !

See the Pen MWaEGrL by mircea-bratu (@mircea-bratu) on CodePen

[OSUblake]

I dunno. It's a logic problem somewhere, and something I don't have time to look at for you. Animating sorting algorithms can be difficult. I've done it by recursively calling a function instead of doing it in a loop.

 

Here's a tip. You can await gsap animations. Just make sure you return a timeline/tween in your function.

await swapElements(j, j + 1)

 

 

 

[ZachSaucier]

In general, it's best to avoid mixing regular tweens with timelines. I'd try to set it up to have it create the entire timeline at the start and have all animation and sets that you need in that timeline.

 

That approach is used in this other thread from a couple days ago where another person was asking about sorting visualizations: