Jump to content
Search Community

how to only kill scrolltriggers within a certain container

digital_designer test
Moderator Tag

Recommended Posts

Hi there,

 

This is my first post and my first project with GSAP. I'm using it in conjunction with Barba.js. As barba js basically creates a single page app, im having to kill and reinitialise my scrolltriggers on each page load so that they dont keep getting initialised on top of each other. Im doing this with this code:

 

ScrollTrigger.getAll().forEach(t => t.kill());

 

This is working. However i also have some scrolltriggers that are outside of my barba container (eg, inside the footer that remains constant and does not reload). These are also being killed within the above code and i need them not to be.

 

So i believe that what i need to do is only kill the scrolltriggers contained within my barba container but not the ones outside of the barba container. Can i do this by targeting all scrolltriggers within a container div that has an id?

 

thanks for any help

Link to comment
Share on other sites

hi @Visual-Q

 

thanks for the response. However, i have multiple dynamic triggers in my file using the following code

 

gsap.utils.toArray('.first .content__item').forEach(project => {

var tl = gsap.timeline({

scrollTrigger: {

trigger: project,

start: 'top bottom', 

//markers: true,

},

});

 

tl.from(project, {

scale: 0.8,

});

});

 

As such i dont have individual triggers with their own id. 

Link to comment
Share on other sites

41 minutes ago, digital_designer said:

As such i don't have individual triggers with their own id. 

Sure, you could do something like: 

var triggers = [];
gsap.utils.toArray('.first .content__item').forEach(project => {
  var tl = gsap.timeline({
        scrollTrigger: {
          trigger: project,
          start: 'top bottom', 
          //markers: true,
        }
      });
  tl.from(project, { scale: 0.8 });
  triggers.push(tl.scrollTrigger);
});

A "scrollTrigger" property is added to the Timeline or Tween if it has a ScrollTrigger. 

 

Also, it's fine to use a timeline like that, but if you're just adding one tween to it there's really no reason. You could make your code more concise by just skipping the timeline altogether. Here's a more concise version: 

var triggers = [];
gsap.utils.toArray('.first .content__item').forEach(project => {
  triggers.push(
    gsap.from(project, { 
      scale: 0.8,
      scrollTrigger: {
        trigger: project,
        start: 'top bottom', 
        //markers: true,
      }
    }).scrollTrigger
  );
});

Another alternative is to use ScrollTrigger.create() and feed in your animation. This does exactly the same thing...

var triggers = [];
gsap.utils.toArray('.first .content__item').forEach(project => {
  var tween = gsap.from(project, { scale: 0.8 });
  var trigger = ScrollTrigger.create({
    animation: tween,
    trigger: project,
    start: 'top bottom', 
    //markers: true,
  });
  triggers.push(trigger);
});

So basically you can keep an Array of the ScrollTrigger instances that you want to kill (or persist) and handle them accordingly. 

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

I think where im getting a little stuck is that i have my the create script in one file and then the kill script in another file.

 

Therefore, i think what i am needing is a way to search for triggers within a certain container element and kill them all. Not on an individual basis and not based on a variable that may have been set in a separate file.

Link to comment
Share on other sites

You just need to make sure there's some reference that you can access that has them in it. Are you using a framework that uses modules? If so then you need to research how to pass variables between modules in that framework. If you're not, then you could have a globally scoped variable with the references in it.

 

The only alternative is walking up the DOM tree looking to see if they are contained in the container that you're looking for and kill them if so which is more computationally expensive but not terribly so if your DOM tree is small. 

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