scrollTrigger and staggered paragraph animation help

[tnavarra]

hi,

 

The codepen attached has the desired effect once you start scrolling. What I can't seem to figure out is how to make the paragraphs that are in view when you land on the page stagger on instead of all animating at once. I was able to make the paragraphs animate in a stagger but then the entering into view when scroll effect is lost if you wait too long to scroll. I tried playing with .batch() but was hopelessly lost. Any help is appreciated!

See the Pen BajZeOw?editors=1010 by tnavarra (@tnavarra) on CodePen

[ZachSaucier]

Hey tnavarra and welcome.

 

You're right, .batch() is the way to go. Your situation is a little bit tricky because you want the sections to be staggered as well as the paragraphs within each section. To do that you should probably iterate through the array passed to the batch callback.

 

I'd set it up along the lines of this:

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

 

Side note: Your ease was invalid so I changed it to a valid one.

[tnavarra]

thank you so much! I was going to be happy with just the paragraphs, but having the option for line by line is even better, the AD will love that