Jump to content
Search Community

Stop ScrollTrigger when ScrollTo is activated

MadCat test
Moderator Tag

Recommended Posts

Hi all!

I'm new to GreenSock and I haven't been able to find a similar issue in the forum.

Does anyone know if it's possible to stop Scroll Trigger when ScrollTo is actively scrolling?

 

I have navigation links which use `ScrollTo` to navigate to specific sections. I also have a section which I want to pin and show an animation inside.

I'm looking for a way to pause `ScrollTrigger` when the user clicks a navigation link that utilizes `ScrollTo` - but have `ScrollTrigger` activated when the user is scrolling the page.

 

Thank in advance for all the help :)

 

See the Pen wvMLVEM by nfrank (@nfrank) on CodePen

Link to comment
Share on other sites

Hey MadCat and welcome to the GreenSock forums.

 

Sure, you can do this by disabling the ScrollTriggers before you animate and enabling them after the animation is complete:

See the Pen dyGxGvq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However, this likely has effects that are not desired with pinned animations because when you disable a ScrollTrigger with pinning, it removes the extra space. And when you enable it, it adds the space back. Logically you either have an animation controlled by the scroll position or you don't, you can't have it both ways. As a work around for this, you could add your own custom blank space after the pinned element and set pinSpacing: false. Exactly what you should do depends on the effect that you want.

  • Like 4
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...