ScrollTrigger scrub once is not working correctly.

[Muhammad Abdullah]

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.

Thanks in Advance
 

See the Pen dyZVGVj?editors=0010 by abdullah-rafique (@abdullah-rafique) on CodePen.

[OSUblake]

Hi Muhammad,

 

Check out the threads linked to here.

 

 

[Muhammad Abdullah]

11 hours ago, OSUblake said:

Hi Muhammad,

 

Check out the threads linked to here.

 

 

Hi Blake,

Thanks for the kind response. 

I tried this solution and killed it on leave and it works correctly only for this section and unfortunately the rest of the animations of my page got destroyed due to the space removed on this section.

how could I resolve that ?

Thanks

[OSUblake]

Can you update your demo showing what you did and what isn't working? Thanks!

 

 

 

[Muhammad Abdullah]

2 hours ago, OSUblake said:

Can you update your demo showing what you did and what isn't working? Thanks!

 

 

 

Hi Blake, 

it feels so awesome when I receive notification too quickly from GSAP and you champs <3.

well, I've updated the

See the Pen dyZVGVj?editors=0010 by abdullah-rafique (@abdullah-rafique) on CodePen.

 . 

Initially I've commented the code suggested in above threads you shared earlier.

commented code : line # 45

 onLeave: function (self) {
        self.scroll(self.start);
        self.disable();
        self.animation.progress(1);
      } 

 

and I've added the a little tween with scrollTrigger on section-2 heading  and everything is working fine but once you uncomment the code I mentioned above then it doesn't work correctly.

Please have a look on this and let me know what I'm missing.

and yes I'm tweening happily ? .

Thanks
 

[OSUblake]

Thanks for the kind words, Muhammad!

 

And sorry about the delay in getting back to you, but see if this is the behavior you're looking for.

 

See the Pen gOXXbmB by GreenSock (@GreenSock) on CodePen.

[Muhammad Abdullah]

Yeaaaaah, Thanks Blake It really helped me out.

Thanks for your support 

always fan of GSAP forum ❤️

[Muhammad Abdullah]

Blake,

I got one more question here, 
Is there any way that I can see if any of the tweens added to a timeline has reached the end so that I can call a function.

thanks

[OSUblake]

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);
  self.disable();
  
  // add true
  self.animation.progress(1, true);
  ScrollTrigger.refresh();
  window.scrollTo(0, start);
}

 

[Muhammad Abdullah]

this really helped me.

Thank you so much Blake.