GSAP ScrollTrigger + Split Text on multiple elements

[lukestoked]

Hi,

 

I'm trying to add this SplitText feature to my site but I'm having trouble getting individual timelines for each of the p tags in my codepen (this will be changed to a class in future) 

I ideally want the first paragraph to start as it is scroller in to view but currently that triggers the one lower done the page to start at the same time.

 

Some pointers would be greatly appreciated.

 

Thanks,

Luke

See the Pen GRPmPEP by luke-stoked (@luke-stoked) on CodePen

[mvaneijgen]

I heard you liked .forEach() loops, so I put .forEach() loops inside your  .forEach() loops.

 

This is just a scoping issue and getting all the p elements on the page first and then do all the logic in the forEach fixes this. Hope it helps and happy tweening! 

 

See the Pen xxmPPQB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[lukestoked]

Thank you @mvaneijgen I can see where I was going wrong now. 

 

Have a nice rest of your week.