Jump to content
Search Community

How to Kill and reset a ScrollTrigger Timeline

alexb148 test
Moderator Tag

Recommended Posts

I absolutely love that GSAP now has ScrollTrigger built in - it's a game-changer!

 

However, I'm struggling with one thing - killing and resetting a timeline.

 

I am initialising like this:

var tl = gsap.timeline({
  scrollTrigger: {
    id: "trigger1",
    trigger: "#trigger",
    start: "top bottom",
    end: "top top",
    scrub: true
  }
});

tl.fromTo(
  "#element",
  {
    opacity: 0,
    x: 500
  },
  {
    opacity: 1,
    x: 0
  }
);

First I tried simply killing the timeline, assuming that would also kill the scroll trigger, but this appears to have no effect whatsoever.

tl.kill();

I then read that I should be able to kill a scroll trigger like this, but this throws up an error, and again has no effect:

tl.ScrollTrigger.kill();
tl.kill();

I established that I can do the following, which does kill things, but DOES NOT reset my elements to their original state - it just freezes everything mid-timeline.

ScrollTrigger.getById("trigger1").kill();
tl.kill();

What is the correct process to simply kill and reset everything, as if it was never initialised in the first place? Thanks!

See the Pen abdvXoR by alexb148 (@alexb148) on CodePen

Link to comment
Share on other sites

Hey Alex and welcome to the GreenSock forums.

 

If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true);

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

 

  • Like 4
Link to comment
Share on other sites

2 minutes ago, alexb148 said:

I had thought that killing a timeline did this automatically, but individually clearing the props on each element after killing does the job!

That's not the default for a couple of reasons:

  1. People who don't want to clear the styles wouldn't be able to (i.e. this default is less restrictive).
  2. clearProps: true clears out all inline styles. Sometimes people might have inline styles that aren't part of that tween/timeline. So it makes more sense to let the developer have control of which and when to clear the styles.
  • Like 1
Link to comment
Share on other sites

  • 10 months later...
On 6/9/2020 at 2:47 PM, ZachSaucier said:

Hey Alex and welcome to the GreenSock forums.

 

If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:


tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true);

If you want to remove all inline styles you can use clearProps:


tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

 


Hey Zach, this really helped me thank you. However, it seems to me like the ScrollTrigger.getById should be moved before the tl.kill command, otherwise if the ScrollTrigger was originally initialised within the timeline it will end up and trying to kill 'undefined'.

Am I wrong? Thank you!

Link to comment
Share on other sites

  • 2 weeks later...

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