Jump to content
Search Community

GSAP 3 - autoKill not working with ScrollTo Plugin

Christopher DuCharme test
Moderator Tag

Recommended Posts

I'm building a pharmaceutical banner and trying out GSAP 3 for the first time.

 

Most pharmaceutical banners have an Important Safety Information and I have been using the scrollTo plugin to auto scroll the legal copy.

 

With v2 the behavior has been that the auto scroll gets killed when the user attempts to interact with the scrolling copy.  

 

With v3 I'm finding I can not manual scroll the legal copy until the scrollTo animation has completed.  It just keeps jumping back to where it was and continuing the scroll.

 

To troubleshoot I have attempted to set the autoKillThreshold to 1

ScrollToPlugin.autoKillThreshold = 1;

 

I have also attempted to add autoKill:ture to my animation code.

 

This is the code I'm using to trigger the scroll of the Important Safety Information copy.

tl.to(isiCopy, 400, {scrollTo:"#scrollEnd", autoKill:true, ease: Power0.easeNone}, 15);

 

As you can see the animation is rather long, 400 seconds.  Legal requires it to scroll slow enough where as the user can keep up with the scroll while reading the copy.  During these 400 seconds the user is unable to manual scroll.  I'm seeing this issue globally across all browsers.  

 

I'm unable to post a full code sample as the banner it self is covered under a NDA.

 

Reverting back to GSAP v2 resolves this issue and I get the desired effect with the scrollTo Plugin. But I would like to figure out how to get this to work with v3.

 

 

 

Link to comment
Share on other sites

Hey Christopher, sorry you're having some trouble here.

 

1 hour ago, Christopher DuCharme said:

I'm unable to post a full code sample as the banner it self is covered under a NDA.

Can you please recreate the situation? I am unable to reproduce the error that you're having. Maybe it's because autokill: true should be inside of the scrollTo object? like: scrollTo: {y: "max", autoKill: true}.

 

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

Link to comment
Share on other sites

Thanks for the reply Zach,

 

Using your example I was able to reproduce the issue:

See the Pen rNNPGrb by hhcc (@hhcc) on CodePen

 

I sped it up to 40 seconds as 400 seconds is a long time to wait to be able to see that you can scroll once the animation is over. The autoKill was something I added after the bug was happening.  I think you might be on to something with it being outside the object though.

 

I was also able to resolve the issue using your example by reformatting my code to look like this:

ScrollToPlugin.autoKillThreshold = 1;


tl.to("#isiCopy", {
      duration: 400, 
      scrollTo: {y:"max", autoKill: true}, 
      ease: "none"
    }, 15);

 

Thanks,

 

Chris

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Yea, there does seem to be a bug when killing the scroll when scrolling to a particular element @GreenSock. Demo:

Hm, the only problem I'm seeing is a typo in your demo, @ZachSaucier :)  It's autoKill, not autokill. Once I corrected that, it seems to work fine but please tell me if I'm missing something. 

  • Like 2
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Hm, the only problem I'm seeing is a typo in your demo, @ZachSaucier :)  It's autoKill, not autokill. Once I corrected that, it seems to work fine but please tell me if I'm missing something. 

It looks like not defining autoKill as true though triggers the same bug.

 

Previous behavior defaulted to autoKill being true.

Link to comment
Share on other sites

5 minutes ago, GreenSock said:

By the way, we did change the default autoKill behavior to false in v3 so that developers are more aware and need to opt-in to that behavior rather than being surprised by it. I made a note of that in the release notes?

Oh, thanks for the release notes link.

 

I was still referencing https://greensock.com/docs/v3/Plugins/ScrollToPlugin when troubleshooting.  Which doesn't appear to have been updated yet to reflect this.

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...