ScrollTrigger - toggleActions - Delay Not Working On Reverse

[andrewycode]

Hello,

 

I have a scrollTrigger animation with a delay and toggleActions set to "play reverse play reverse".

Everything works perfectly onEnter and onEnterBack (including the delay), however onLeave and onLeaveBack, the delay is ignored and instead the reverse animation runs immediately.

Any ideas on how I can get the delay to work in all instances? 

Please see attached codepen.

 

Thank you!

See the Pen KKeWByp by andrewycode (@andrewycode) on CodePen

[Rodrigo]

Hi @andrewycode and welcome to the GreenSock forums!

 

Everything is working as expected. Delays in a GSAP instance are considered only at the start not at the end, so when you reverse both your animations it's logical that they reverse at the same time.

 

There are at least two alternatives I can think of.

 

One option is to create a dummy tween at the end of the timeline that you want to delay:

theAnimation.to(elem, {
  rotate: '360DEG',
  ease: 'none',
  duration: 0.5,
  delay: 0.5,
})
  .to({},{ duration: 0.5 });// adds extra time at the end of the timeline

Another option is to set the leave and leave back actions to none and use the callbacks instead with a Delayed Call that waits for 0.5 seconds and then reverses the animation:

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

ScrollTrigger.create({
  trigger: ".animationTrigger",
  animation: theanimation2,
  start: "top bottom-=20%",
  end: "bottom 20%",
  toggleActions: "play none play none",
  onLeave: () => gsap.delayedCall(0.5, () => theanimation2.reverse()),
  onLeaveBack: () => gsap.delayedCall(0.5, () => theanimation2.reverse()),
});

 

Let us know if you have more questions

 

Happy Tweening!

[andrewycode]

Hey @Rodrigo - thanks so much for your quick and detailed response!!

I ended up going with the solution that uses gsap.delayedCall with onLeave and onLeaveBack and it worked perfectly!

Thanks again!