Stagger ScrollTrigger for multiple text reveal

[Ignacio G]

Hi, I've been trying to create a property I can reuse all around the site with just one class. It works ok, but when multiple elements are on the view port, they are all triggering at the same time and not staggering. I've been scratching my head on how to properly achieve this.

See the Pen MWQYXxx by ignaciogiri (@ignaciogiri) on CodePen

[The Old Designer]

Very new here so may be completely wrong but  have you tried 

ScrollTrigger.batch

 

 

 

[Ignacio G]

I was able to fix it, but now if you scroll super fast or too slow, sometimes the lines won't show up right. And the top section won't repeat the animation either.

 

See the Pen jOZEQxg by ignaciogiri (@ignaciogiri) on CodePen

 

[Cassie]

Heya!

 

First off we really appreciate a minimal demo round here.

This isn't a locomotive question so it would help if you got rid of that stuff first so people don't have to sift through more code!

You could use batch - or you can just handle it in a loop.

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

The animation at the top isn't playing because your top section isn't firing that toggleAction callback again.
Might be worth taking a look at how those work.

 

//onEnter, onLeave, onEnterBack, onLeaveBack
toggleActions: "play pause resume reverse",

See the Pen GREbQXW by GreenSock (@GreenSock) on CodePen