ScrollTrigger toggle actions on leave speed up animation gsap.timeScale()

[AkhilRaja]

i created a very simple scroll trigger animation, and i want to use gsap scrollTrigger "Rich callback system"  onLeave: () => action.timeScale(2).reverse(),  to speed up the reverse animation on leaving the the div

See the Pen RwVGQxg?editors=1010 by AkhilRaja (@AkhilRaja) on CodePen

[OSUblake]

Hi Akhil!

 

action isn't defined. Callbacks pass in the scroll trigger instance, which has a reference to the animation.  

 

And if you change the timeScale on leave, you would need to reset when it enters. TimeScale when reversed should be negative. So try using this callback instead.

onToggle: ({ animation }) => {
  let timeScale = animation.reversed() ? -2 : 1;
  animation.timeScale(timeScale);
},

 

[AkhilRaja]

29 minutes ago, OSUblake said:

onToggle: ({ animation }) => { let timeScale = animation.reversed() -2 : 1; animation.timeScale(timeScale); },

i use this code (copy paste) and it didn't work 

[AkhilRaja]

then i do this and its also not work

 

onEnter: () => HomePageScrollTrigger.play().timeScale(1),

            onLeave: () => HomePageScrollTrigger.reverse().timeScale(5),

            onEnterBack: () => HomePageScrollTrigger.play().timeScale(1),

            onLeaveBack: () => HomePageScrollTrigger.reverse().timeScale(5),

[AkhilRaja]

onEnter: () => HomePageScrollTrigger.play().timeScale(-5),

            onLeave: () => HomePageScrollTrigger.reverse().timeScale(5),

            onEnterBack: () => HomePageScrollTrigger.play().timeScale(-5),

            onLeaveBack: () => HomePageScrollTrigger.reverse().timeScale(5),

 

 

this also didn't work

[AkhilRaja]

54 minutes ago, AkhilRaja said:

i created a very simple scroll trigger animation, and i want to use gsap scrollTrigger "Rich callback system"  onLeave: () => action.timeScale(2).reverse(),  to speed up the reverse animation on leaving the the div

@OSUblake  can you add codes here and test it thank you!

[GreenSock]

I think you meant something like:

onToggle: self => self.animation.timeScale(self.isActive ? 1 : -2)

Right?

[OSUblake]

5 hours ago, AkhilRaja said:

i use this code (copy paste) and it didn't work 

 

Sorry, I forgot to add the ? to the ternary.

onToggle: ({ animation }) => {
  let timeScale = animation.reversed() ? -2 : 1;
  animation.timeScale(timeScale);
},

 

[AkhilRaja]

14 hours ago, GreenSock said:

I think you meant something like:

onToggle: self => self.animation.timeScale(self.isActive ? 1 : -2)

Right?

Thank you so much for helping me its worked 😊

[AkhilRaja]

12 hours ago, OSUblake said:

 

Sorry, I forgot to add the ? to the ternary.

onToggle: ({ animation }) => {
  let timeScale = animation.reversed() ? -2 : 1;
  animation.timeScale(timeScale);
},

 

Yes this work now thank you for always helping me 😊