Interupted flips causing gittering

[Sooova]

Hey all!

 

I'm trying to make a sort of unscramble effect, where the images are in a grid formation, and on load are randomized in position, but then unscrambled into position. And i've used flip to animate the unscrambling, but i'm running into an issue.

The issue is that because of the way the code works, child nodes are swapped into their correct position, but during this time one of the nodes that is merely being swapped for the other node to be in the correct place, might get called to swap position and it causes it to jitter and jerk around. I was wondering if there was something i could do to fix it. Although you cannot see the images in the codepen, the placeholder image should still show the issue i'm having.

I'm sorry if the javascript is a little difficult to read, i'm still learning!

See the Pen YzEaGWq by sooova (@sooova) on CodePen

[GreenSock]

Welcome to the forums, @Sooova.

 

Would you please provide just a minimal demo that more clearly demonstrates the issue? I'm pretty lost when I look at that demo, especially with all the missing images. You can just use simple colored <div> elements instead maybe. It shouldn't take 100+ lines of code to show the issue. There are a lot of setTimeouts/Promises and delays and stacked up strings of logic - perhaps you could just eliminate any randomization, isolate a single state change of one or two elements, and only focus on that in your demo(?) 

 

And please keep in mind that these forums aren't really for general troubleshooting of logic issues, but we're happy to answer any GSAP/Flip questions. 

 

A few quick comments: 

1. I assume this was a mistake: 

   // BAD
   onComplete: isComplete(), // <- executes immediately and assigns whatever isComplete returns to the onComplete.
     
   // GOOD
   onComplete: isComplete,

    

2. And this:

   // BAD
   overwrite: "false",
     
   // GOOD
   overwrite: false,

    

3. You can use gsap.utils.random() instead of your getRandomInt() function. 

[Sooova]

Thanks for the reply @GreenSock!

Thats my mistake about the large codepen, although i think your two comments have sent me in the right direction!!! I'll keep at it. Thanks for the help!!! If i'm still a bit lost, i'll dumb everything down to a simple example and show it!!