ScrollTrigger with SplitText on multiple items

[kodralex]

Hi,

 

I'm using ScrollTrigger with SplitText across many titles down a page. I've read the documentation and can see a section related to this in the "Most Common ScrollTrigger Mistakes" section. I see I need to create a toArray. I'm just a little unsure how to apply this code to the SplitText code I'm using. Can anyone point me in the right direction please?

 

Thanks

See the Pen VwMWyXQ by alexkodr (@alexkodr) on CodePen

[PointC]

Hi @kodralex 

 

Here's a fork of your demo that should work for you. I switched the ease to none as I find that a bit better with scrub and I boosted the stagger just to make it obvious that everything was working. 

 

See the Pen 5e391b2175d6cd57b6dbfd9a870de42e by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

 

 

[kodralex]

Hi Craig,

 

I can now see how you incorporated the array into the initial code I had. Thank you for taking time out to look, it's much appreciated. This will help greatly going forward.

 

Thanks

[kennyopr]

Ive been trying to do the same but cannot get my code to work at all.. 

See the Pen wvjeXmw by kenneth-brian-flores (@kenneth-brian-flores) on CodePen

.. Anyone know what would I be doing wrong? 

[Trapti]

Code can be written even better but this I did in a short time. In your code one problem was below line, you are applying the mouse over only the first element. 

const element = document.querySelector('.wtg');

See the Pen XWqgBpB?editors=0010 by tripti1410 (@tripti1410) on CodePen