Kill scrolltriggers by ID

[usr1931990 1 Likes (Newbie)]

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?

[Cassie 5,658 Likes (Superhero)]

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?

[usr1931990 1 Likes (Newbie)]

@Cassie hi! So that doesnt work, if i console.log paths i only get one scrolltrigger. See example here:

See the Pen jOGEdEB by helleholmsen (@helleholmsen) on CodePen

[Cassie 5,658 Likes (Superhero)]

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

 

[Cassie 5,658 Likes (Superhero)]

Here's an article on the position parameter - it may help you wrap your head around working with timelines
 

[Abhishek Animates 1 Likes (Newbie)]

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?

 

[Cassie 5,658 Likes (Superhero)]

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();