How to Kill and reset a ScrollTrigger Timeline
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 killin
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});
