Jump to content
GreenSock

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

Can't kill ScrollTrigger

Recommended Posts

Hi guys,

I am using ScrollTrigger batch like this: 

gsap.set(".column", {opacity: .5, y: 20})
var scroll = ScrollTrigger.batch(".column", {
  batchMax: 6,
  interval: .3,
  onEnter: batch => {
    gsap.to(batch, {
      opacity: 1,
      stagger: .3,
      duration: .5,
      y: 0,
      overwrite: true,
    });
  },
  onLeaveBack: batch => {
    gsap.to(batch, {
      opacity: 0.5,
      duration: .3,
      y: 20,
      overwrite: true
    });
  },
  start: "center bottom",
  end: "center top",
});

scroll.getAll().kill();

And I tried to kill it like in example above, but it doesn't work.

I am trying to be able to overwrite ScrollTrigger instance that I created - say that this code exists in my base.js file, now I am wondering if there is a way of overwriting all of those animations or simply get rid of them in my project.js file? 

Link to comment
Share on other sites

It's hard to say without a working demo. I'd wonder if your scroll var isn't scoped globally (if you're calling it from a different file).


NOTE: UPDATED FOR ACCURACY - per Zach's response below.
 

Also have you tried: ScrollTrigger.getAll().forEach(st => st.kill(););?

 

What version of GSAP/ScrollTrigger are you using?

  • Thanks 1
Link to comment
Share on other sites

.getAll() is a static method (not an instance method), meaning it must be used like ScrollTrigger.getAll(). And you cannot use .kill() on an array of ScrollTrigger instances, you need to loop through and kill each element in the array (because it is an instance method):

ScrollTrigger.getAll().forEach(st => st.kill())
console.log(ScrollTrigger.getAll()); // []

 

  • Like 2
Link to comment
Share on other sites

@ZachSaucier thanks, it is working for killing with getAll() method, but then with getById shouldn't it work like this:

ScrollTrigger.getById('myId').kill(); - since it is not an array anymore? 

This doesn't throw any errors, but doesn't also kill the ScrollTrigger

Link to comment
Share on other sites

It should work like that. There are no IDs in your pen so that code wouldn't work there. Please make a complete example of what you're expecting to work if you would like help getting it working.

  • Like 1
Link to comment
Share on other sites

Sorry for not updating code pen - I already updated it (previous post) - it looks like it kills only the last '.item' inside ScrollTrigger batch

Link to comment
Share on other sites

ScrollTrigger.getAll('myID').forEach(st => st.kill(););

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