SplitText animation with scroll trigger and smooth scrolling

[Wizard of Oz]

Hi

 

I am trying to implement a split text animation with scroll trigger and smooth scrolling. For some reason the letters are frozen so the animation does not happen. Would anyone have an idea on why this is happening or how to fix it?

 

TIA

Martin

See the Pen dyzJWaY by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen

[akapowl]

Hello there @Wizard of Oz

 

As the ScrollTrigger docs state, scrollTrigger can be used as either a shorthand for the trigger (described below) or as a configuration object with any of the following properties.

 

In your case, since you want to configure things in more detail, it would have to be an object.

 

  gsap.from(childSplit.lines, {
    scrollTrigger: {
      trigger: title,
      start: 'center center',
      scroller: ".smooth-scroll",
      markers: true
    },
    duration: 3,
    yPercent: 100,
    ease: "power4",
    skewY: 10,
    stagger: 0.1
  });

 

   

Also, for it to work properly with locomotive-scroll, you forgot to add the last lines as seen in the demo on the .scrollerProxy() docs-page

 

// ... add this after the creation of your ScrollTriggers

// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

 

 

This already works better:

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

 

 

 

[Wizard of Oz]

Ahhhh! Of course it's the object! Thanks so much @akapowl 

 

I hope you have a great day ahead!