Having a problem with GSAP and QuerySelector

[momo12]

Hello guys,

A question. I'm trying to store the even and odd columns with the help of two values (evenRows and oddRows) but it's not working. Can someone please shed light on what I'm doing wrong?

See the Pen oNyMJQQ by emdesigner-or (@emdesigner-or) on CodePen

[GreenSock]

@momo12 I spent a bunch of time writing a custom helper function for you in the other thread you created about this same topic - did you see that?: 

Your demo code has several problems: 

1. You are only checking to see if each iteration through the loop is odd or even, but that has [almost] nothing to do with how those elements are actually being displayed in the grid. Y
2. You're looping through the elements that serve as the column containers, not the boxes themselves. 
3. You're treating columns as if they're rows
4. You're setting a singular variable every time through the loop. So at the end, you'll just have one element rather than an Array of elements. 
5. It looks like you're trying to treat a variable name as a string and feeding it into a tween which will be treated as selector text. In other words, gsap.set("evenColumns", ...) is like telling GSAP to animate the elements document.querySelectorAll("evenColumns") (literally <evenColumns> HTML tags)

None of this is related to GSAP - it's all plain JavaScript and logic issues. 

 

I'd strongly recommend that you just use the helper function I made for you. 

See the Pen BaVOOjv?editors=1010 by GreenSock (@GreenSock) on CodePen

[momo12]

Just now, GreenSock said:

"

 

1 minute ago, GreenSock said:

@momo12 I spent a bunch of time writing a custom helper function for you in the other thread you created about this same topic - did you see that?: 

Your demo code has several problems: 

1. You are only checking to see if each iteration through the loop is odd or even, but that has [almost] nothing to do with how those elements are actually being displayed in the grid. Y
2. You're looping through the elements that serve as the column containers, not the boxes themselves. 
3. You're treating columns as if they're rows
4. You're setting a singular variable every time through the loop. So at the end, you'll just have one element rather than an Array of elements. 
5. It looks like you're trying to treat a variable name as a string and feeding it into a tween which will be treated as selector text. In other words, gsap.set("evenColumns", ...) is like telling GSAP to animate the elements document.querySelectorAll("evenColumns") (literally <evenColumns> HTML tags)

None of this is related to GSAP - it's all plain JavaScript and logic issues. 

 

I'd strongly recommend that you just use the helper function I made for you. 

 

 

Thanks for sharing this. I know. I'm just trying to learn more with different solutions to learn better GSAP.