Jump to content


Interupted flips causing gittering

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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. 
  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.