Jump to content
Search Community

Kill scrolltriggers by ID

usr1931990 test
Moderator Tag

Recommended Posts

Hi everyone! I'm working on a page where a want an animation to happen when the user navigates to a certain page on my website, but kill it on other pages. I'm running this code when the user navigates to the site where I want the animation to happen:

 

  logoAnimation: (app) => {
    app.logo.hasBeenAnimated = true;

    const paths = document.querySelectorAll("#logo .path");

    paths.forEach((path, i) => {
      const index = i / (paths.length - 1);
      gsap.to(path, {
        scrollTrigger: {
          id: "logoPaths",
          trigger: "body",
          scrub: 7,
          start: `${index * 10}% top`,
          end: `${index * 60 + 60}% bottom`,
        },
        rotate: gsap.utils.random(-25, 25),
        opacity: 7,
        ease: "circ.out",
      });
    });
  },

and this code when a user navigates to another page:

    if (app.logo.hasBeenAnimated) {
      let pathsTrigger = ScrollTrigger.getById("logoPaths");
      pathsTrigger.kill();
    }
  },

And that's not working. The only thing that works is to kill all ScrollTrigger animations, but I just want to destroy this one. How can I do that?

Link to comment
Share on other sites

Hey there!

 

Hard to see without a minimal demo (I'd prefer to be able to log out pathsTrigger to verify what pathsTrigger is) but I think ID is just singular.
 

You've assigned multiple ScrollTriggers to that ID when you loop around

paths.forEach((path, i) => {})


If this doesn't help - maybe you can pop together a minimal demo for us?

Link to comment
Share on other sites

No - I wasn't suggesting you loop around to kill them. I was explaining that you're looping around and creating loads of scrollTriggers with the same ID.

 

Then you're trying to kill them using that ID value. The ID is singular. You can't assign multiple scrollTrigger to that ID.


You also have a delay value in your scrolltrigger object, that's not valid. You're also using different scrub values, and have start and end values stagered - were you trying to stagger the start times of each letter? You can do that in a timeline if so?

You likely just need one ScrollTriggered timeline - like this

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



 

Link to comment
Share on other sites

  • 8 months later...
On 5/16/2022 at 3:54 PM, Cassie said:

No - I wasn't suggesting you loop around to kill them. I was explaining that you're looping around and creating loads of scrollTriggers with the same ID.

 

Then you're trying to kill them using that ID value. The ID is singular. You can't assign multiple scrollTrigger to that ID.


You also have a delay value in your scrolltrigger object, that's not valid. You're also using different scrub values, and have start and end values stagered - were you trying to stagger the start times of each letter? You can do that in a timeline if so?

You likely just need one ScrollTriggered timeline - like this
 

 


 

 

can we also ".refresh()" a scrollTrigger the same way?

 

Link to comment
Share on other sites

I haven't personally tried it but I imagine this is valid yep - it's returning a ScrollTrigger instance, so you should be able to just refresh that particular trigger.
 

// create a timeline with a ScrollTrigger
const tl = gsap.timeline({ scrollTrigger: {id: 'trigger'}});
                          
let trigger = ScrollTrigger.getById("trigger");

//(on just that instance):
trigger.refresh();

// or cause ALL ScrollTrigger instances to refresh using the static method:
ScrollTrigger.refresh();

 

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