Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hargy

Trigger SplitText tweens from Horizontal ScrollTrigger

Recommended Posts

Hi there,

 

I have been working on a horizontal scrolling page with ScrollTrigger.  Within this we want to be able to animate text headings as they come into view.  

 

In the pen there are 5 slides with Slide 2 and Slide 4 both with headers that we want to animate.  Ive nearly got it working but :

  1. Slide 4 starts in its completed state and doesn't animate until it hits the Start point.  So it is sitting on the left and then it jumps to the from point and animates. 
  2. I think Im doing it in a very inefficient way and that maybe the ScrollTrigger needs to be with the SplitText tween but I went down that path and got myself in a mess! 

 

Any assistance would be hugely appreciated! 

 

Cheers,

Mike

See the Pen YzqMWwz by mikeallteams (@mikeallteams) on CodePen

Link to post
Share on other sites

 

Hey @Hargy - welcome to the forums.

 

You would have to set up the splitText inside of that forEach-function you have for your

 

var headSelectors=document.querySelectorAll("section.white");

 

so the animation only adresses the text in that one section it is supposed to adress each time.

 

 

I set it up like this

 

// Split Text Triggers 

var headSelectors = document.querySelectorAll("section.white");

headSelectors.forEach((header, index) => {
  
  // Split Text 
  
  const splitThis = header.querySelector(".slide-content");
  
  const split = new SplitText(splitThis);
  
  // Animation
  
  var anim = gsap.from(
    split.chars,
    {
      x: "700",
      y: "40vh",
      ease: "power2.inOut",
      stagger: 0.08,
      // repeat: -1,
      paused:true
    }
  );
  
  console.log("hs " + header.offsetLeft + " index " +index);
  
  ScrollTrigger.create({
    animation: anim,
    start: () => header.offsetLeft - 1000,
    end: () => header.offsetLeft - 200,
    toggleActions:"play none none reverse",
    scrub: 1,
    id:"startheader",
    markers: true
  });
  
});	

 

 

Note, that I removed the duration from your tween because a) you had it setup twice (once per old and once per new syntax) and b) duration on scrubbing-ScrollTriggers does behave different from duration on regular tweens/timelines - thus it might do something different, than you thought it did.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

 

Also on that splitText-ScrollTrigger I changed scrub true to scrub: 1, so it appears more fluently (and not so choppy) in 'sync' with the translation of your horizontal section - which also have a scrub: 1 applied - but that's just a suggestion :)

 

Is this what you had in mind?

 

 

 

See the Pen BaKERXz by akapowl (@akapowl) on CodePen

 

 

 

Cheers

Paul

 

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Perfect! 

 

Thank you so much Paul @akapowl , besides fixing my issue, your answer made some things click in my head about how GSAP works.  Im super excited to explore more! 

 

This forum is outstanding.  

 

Have a great day! 

  • Like 1
Link to post
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.

×