Jump to content
Search Community

ScrollTrigger scrub once is not working correctly.

Muhammad Abdullah test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 demo . 

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 :)
 

Link to comment
Share on other sites

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);
}

 

  • Like 3
Link to comment
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.
×
×
  • Create New...