Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Wizard of Oz

SplitText animation with scroll trigger and smooth scrolling

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Hello there @Wizard of Oz

 

As the ScrollTrigger docs statescrollTrigger 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

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

 

I hope you have a great day ahead!

  • Like 1
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.
×