jesthered Posted June 17, 2021 Share Posted June 17, 2021 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! See the Pen XWMGKBG by jesthered (@jesthered) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted June 18, 2021 Solution Share Posted June 18, 2021 Hi Jesthered! I'm not sure I fully understand what you want, but if your split text animation has different requirements than your timeline, you could make it have its own scroll trigger. gsap.to(split.chars, { ease: "circ.out", y: 80, stagger: 0.02, scrollTrigger: { ... } }); 1 Link to comment Share on other sites More sharing options...
jesthered Posted June 18, 2021 Author Share Posted June 18, 2021 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: See the Pen jOBJGWE by jesthered (@jesthered) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted June 18, 2021 Share Posted June 18, 2021 If the scroll triggers have the same params, then you should be able use the timeline. tl.to(section, { autoAlpha: 1 }).to( section, { autoAlpha: 0, delay: 0.95 }, 0.05 ); tl.to(split.chars, { duration: tl.duration(), ease: "circ.out", y: 80, stagger: 0.02, }, 0); 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now