scrollTrigger : Applying an animation forEach : stagger not working

[charlesb]

Hello everyone 😄

I'm new to GSAP and to JS. I've been trying to solve this by myself but I'm unable to do it.

Thanks in advance for your help and your knowledge.

 

Quote

• I have 3 sections with the same elements : 2 lines and one box
• A scrollTrigger plays a timeline where elements are animated
• The 1st line (black) width must go to 300px
• Then the 2nd (green) width must go to 300px
• Then the blue box goes right and rotates

 

It kind of work but I don't seem to make the stagger work : only on line is animating.

Is it related to the way I use querySelector for the .line class ? It looks like only the first line of each section is selected.

 

Note : I'm reading the "common mistakes" article and also looking at example with the use of forEach. Maybe it's better to use event listeners ? The logic would be to play the timeline onEnter ?

 

 

EDIT:

I played with examples I found in the forum (from Zach I think). (I got rid of the scrolling stuff to focus on the stagger).

With the Pokemon example I get the same problems. But I know the way I use the querySelector is wrong. But I don't understand. Since I use forEach, shouldn't it select all the .box related each container ? Maybe I need gsap.utils.toArray : forEach Pokemon, create and array and list all the .box

See the Pen gOMjooQ by charlesbail_ (@charlesbail_) on CodePen

 

See the Pen rNLrMvj by charlesbail_ (@charlesbail_) on CodePen

[ZachSaucier]

Hey Charles and welcome to the GreenSock forums.

 

staggerTo is deprecated, just use the stagger property instead. Lite/Max stuff is also deprecated. We also recommend putting the duration in the vars parameter instead of as the second parameter. It seems you're learning from some old resources somewhere  See the GSAP 3 migration guide for more info about old vs new.

 

If you want to select multiple elements you need to use .querySelectorAll():

See the Pen WNxKzWY?editors=0010 by GreenSock (@GreenSock) on CodePen

[charlesb]

Zach thank you for your time.

I do learn GSAP typing "GSAP ....." on google to quickly go trough examples and doc but you are right some may be old.

I'll focus on the new doc and clean my code.

 

Thanks for the .querySelectorAll(), it indeed fixed everything and I'm happy because I was close to the solution.

 

Charles