Hi GSAP champs,
I've been working on an animation in which I draw three SVGs located in one section.
I'm drawing the svgs with scroll-trigger in same timeline and also pinning that section with pinSpacing: true and the once: true is working fine as expected that it kills the timeline on completion.
but the issue is the space that is being added by pinSpacing: true is not removing it self when animation reaches the end.
Please help to achieve this. codePen demo is attached already.
You could add an onComplete to a tween...
.to(".cover-vector-1", {
opacity: 0,
ease: "none",
onComplete() {
console.log("done");
}
})
Or a callback directly after the tween...
.to(".cover-vector-1", {
opacity: 0,
ease: "none"
})
.add(() => console.log("done"))
Just add to true to the progress call in the onLeave so it won't call it again when you disable it.
onLeave: function (self) {
let start = self.start;
self.scroll(self.start);
se