Jump to content
Search Community

Scrolltrigger + SplitText -- pinned sections with SplitText triggered when in view

jesthered test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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: {
    ...
  }
});

 

  • Like 1
Link to comment
Share on other sites

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

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);

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...