alexb148 Posted June 9, 2020 Share Posted June 9, 2020 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 More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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}); 4 Link to comment Share on other sites More sharing options...
alexb148 Posted June 9, 2020 Author Share Posted June 9, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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: People who don't want to clear the styles wouldn't be able to (i.e. this default is less restrictive). 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. 1 Link to comment Share on other sites More sharing options...
kiboko Posted April 14, 2021 Share Posted April 14, 2021 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 More sharing options...
GreenSock Posted April 14, 2021 Share Posted April 14, 2021 Yeah, in recent versions of GSAP, if you kill() an animation that has a ScrollTrigger attached to it, it'll automatically kill() the ScrollTrigger too. 👍 3 Link to comment Share on other sites More sharing options...
Léo VERBEKE Posted April 28, 2021 Share Posted April 28, 2021 To kill all triggers : let Alltrigger = ScrollTrigger.getAll() for (let i = 0; i < Alltrigger.length; i++) { Alltrigger[i].kill(true) } 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now