Jump to content
GreenSock

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

Kill scrolltriggers by ID

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

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

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