Jump to content
Search Community

Optimizing ScrollTrigger with 100+ triggers

Ascor test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts



I'm currently trying to build a little portfolio page with React + GSAP + ScrollTrigger.

One of the ideas I've had is quite simple (It might sound nonsensical but I am planning to imitate a Buffer Overflow where the inserted text is quite commonly just a lot of A's):

When the user scrolls down, A's are added to my name until I reach the edge of the screen. I then plan to proceed from there but I've not gotten any further.

I've implemented the functionality as best as I knew how, however, when I launch and load the webpage, it takes quite a while until it finishes loading, with Firefox even warning me that the page is slowing down my browser.

I can't help but think that this is related to the amount of ScrollTriggers I'm using (about 125~ on my monitor) and I'm wondering if I'm just doing it in a very inefficient way. I'm quite new to both react and gsap so any pointers would be appreciated.


Thank you for your help.


Here is the stackblitz (You might have to edit the code by inserting a variable on a random line [let a = 'a'] to get stackblitz to refresh if it only shows you one trigger. You can also force it by changing overflowCounter on line 106 to, say, 200.):


Link to comment
Share on other sites

About an hour after posting this, it dawned on me that I was more than likely going about this in a very convoluted way.

Your solution is brilliant, simple, and elegant. I'm sure I can make this work with some fiddling.


Thank you so much, this is exactly what I'm looking for!

  • Like 2
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.
  • Create New...