Jump to content

Ignacio G

Stagger ScrollTrigger for multiple text reveal

Recommended Posts

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

Link to comment
Share on other sites

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





  • Like 2
Link to comment
Share on other sites

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


Link to comment
Share on other sites



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



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.