Jump to content


GSAP Scrolltrigger animation firing in wrong order

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi there, 

I have set up a basic codepen showing the effect I am trying to achieve (it's best opened up in a new tab for the height reasons). It essentially works how I want it to, except for one thing: the second black 'square' appears directly after the first one, even though it shouldn't appear until its starting trigger reaches the correct position. When scrolling to the second starting point, it works correctly, but then fires the first square again. 

The two 'colorWipe's work perfectly. 

I am sure it's something to do with how I've set up the forEach part, but I am not sure where to go from here. I have tried placing the 'const square' part outside of the loop as well, but that ends up the same. I have also tried just using the 'document.querySelector' rather than the gsap code, but that also shows the same error. 

Thanks in advance for any help.

See the Pen poLabLO by smashly (@smashly) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @AshBrightYellow welcome to the forum!


Everything you had setup was setup correctly and also nice work of adding comments to your code, makes it a breeze to figure out what is going on!


The only bug you had what was tripping you up is getting all the .square's in each loop. 


// Gets every sqaure on the page
const square = gsap.utils.toArray(".squareReveal .square")

// Gets only the squares in the current loop container 
const square = gsap.utils.toArray(container.querySelectorAll(".square"));

Normally you do a document.querySelectorAll, but you can change document to some other variable you've defined to scope it to a specific element on the page. So that is what I've done right here.  Hope it helps and happy tweening! 


See the Pen rNKdLzz?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

Just a little tip: 

// long 
const square = gsap.utils.toArray(container.querySelectorAll(".square"));

// short
const square = gsap.utils.toArray(".square", container);


  • Like 1
  • Haha 1
Link to comment
Share on other sites

Thank you so much @mvaneijgen ! I really appreciate the explanation of your answer as well, that helps a lot. I am very new to GSAP (and Javascript in general) so the comments in my code really help me when I am getting stuck! Thanks again, it works perfectly. 

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.