Hey,
I'm trying to animate multiple text elements on a page using ScrollTrigger and the SplitType library (https://github.com/lukePeavey/SplitType). I have got it work when animating the full text block itself (so I know the scroll trigger part is working), but I want to animate and stagger in the individual characters in a fluid motion - I have this working for the hero sections of the website on page load, but am stuck when looping through all the text elements on a page and targeting the text characters within the forEach() loop. The initial load works, but every element after that either isn't appearing at all, or is appearing but in the final animated state. I've tried assigning variables to the element.chars that is specified in the SplitType library to insert into the gsap.from tween but still not luck. I feel I am close but missing that last 10%... any ideas where I am going wrong?
Simple codpen here - https://codepen.io/JonQuayle/pen/abEMKXX
Thanks