Text Reveal On Scroll (ScrollTrigger)

[Matthew Meaklim]

Hello,

 

I managed to create a nice text reveal on scroll in a pinned section which I then wanted to recreate in a normal (not pinned) section. I thought it'd be fairly handy but I'm missing something.

 

I've created a minimal demo here; .

 

The above does show each text element as I scroll to it, but I can't find a way to then get it to loop through each word. I thought a loop inside a loop would do the trick, but I wasn't able to get it to work. The only other way I managed ended up showing all text elements as soon as the first target was reached.

 

As always, any help appreciated.

 

Thanks,

 

Matthew

 

See the Pen NWEpwLy by ilimitadostudio (@ilimitadostudio) on CodePen

Edited June 28, 2023 by Matthew Meaklim

[Rodrigo]

Hi,

 

I'm a bit confused about what's the issue here. I see that every word is showing when it reaches certain point in the screen so I can't get what's the problem you're describing here:

4 hours ago, Matthew Meaklim said:

The above does show each text element as I scroll to it, but I can't find a way to then get it to loop through each word

That is exactly what the code you have in place is doing. Unless I'm missing something here 🤷‍♂️

 

I forked your codepen and changed the start point and add markers (always use markers in development and when debugging) to make it more obvious:

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

 

Finally you can explore ScrollTrigger Batch:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Happy Tweening!

[Matthew Meaklim]

Apologies for my poor explanation - posted late in the day.

 

In it's most simple terms, the issue is that my code only shows the first word in each element, I need a way to reveal all words - ideally in a staggered fashion.

[mvaneijgen]

Hi @Matthew Meaklim there is a bug in your javascript that splits the words (I think) it only does this for just the first word, this isn't really a GSAP problemen and I don't have time to debug this for you. We have a plugin called SplitText docs which does this for you, with a lot of powerful features. You could roll your own, but that requires a lot of debugging as you are experiencing now.

 

In editions to @Rodrigo point of enabling markers which is allows you do see what is happening, would I advies to remove ScrollTrigger all together. This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

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

[Matthew Meaklim]

Hi @mvaneijgen. The JavaScript works grand for me - see attached screenshot. The animation is all good, but I want to achieve it on scroll, hence why I'm using ScrollTrigger. If you go here, you'll see the animation working on load, and then here, you'll see it hooked to a pinned section - so this is simply the last thing I'd like to do.

 

Edited June 29, 2023 by Matthew Meaklim

[mvaneijgen]

Ah! I see now. instead of document.qeurySelectorAll() you did document.querySelector() on line 20, which only gets you the first item it finds. 

 

6 minutes ago, Matthew Meaklim said:

but I want to achieve it on scroll, hence why I'm using ScrollTrigger

Of course! but if your animation isn't a 100% correct your ScrollTrigger will be never correct, so instead of trying to run (before you can walk) the advise I would give is to remove ScrollTrigger and take things one at a time, this makes debugging so much easier! 

 

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

[Matthew Meaklim]

Hi again @mvaneijgen. Thanks for your advice. I think I've got it. If you guys can think of a more elegant solution, feel free to advise. Thanks again.

 

Edited June 29, 2023 by Matthew Meaklim

[Rodrigo]

Hi,

 

I think it looks good, just keep in mind that creating a bullet proof approach to split a string into words is a bit hard, that's exactly what SplitText does.

 

Now if the code that you have in place, works the way you intend, then just apply the good ol' "If it ain't broken, don't fix it" approach.

 

Happy Tweening!