jesthered

Hi OSUblake! I'm sorry if the description is unclear. Basically I want the end result to have the "Heading Text..." sections pinning and animating opacity as they currently do. But when they are triggered I'd like to start animating the split characters inside them and have that animation tied to the same scrollTrigger parameters (start, end, scrub, etc.) I've made a new pen with your code added and it looks as it should, I just don't know if this is the "correct" way to do it since they share scrollTrigger params, but it works a charm, thank you! New fork: https://codepen.io/jesthered/pen/jOBJGWE

Hello GSAP friends! I am having trouble combining some ScrollTrigger and SplitText features in the correct way. I have several sections that use ScrollTrigger to pin when in view and have a timeline that animates their opacity in and out. (section.slide) Of these sections, those that also have the class 'slide-text' are using SplitText to split their H2 content for animation. (section.slide.slide-text h2.animatedcharacters) I'd like the text to also use SplitText's animation feature to animate the text via scrub when its parent section comes into view both onEnter and onEnterBack, with it resetting onLeave and onLeaveBack. I've looked at several demos and have pinned down the SplitText animation I'd like to use (see the comments at the end of my JS). Please see my attached CodePen. I have the pinned sections the way I'd like them, and I also have the text splitting, but I don't know how to integrate the SplitText animation into the existing scrollTrigger params and timeline. Apologies, but this is as far as I've gotten, I can't seem to combine the various demo content I've explored to get the code for my specific case. Many thanks!