Jump to content
GreenSock

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

How to Kill and reset a ScrollTrigger Timeline

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 post
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 3
Link to post
Share on other sites

Ah ok, thanks very much - I had thought that killing a timeline did this automatically, but individually clearing the props on each element after killing does the job!

Link to post
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 post
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.

×