ToggleActions not working

[Iryna_web]

I have a simple animation, but I can’t understand why toggleActions doesn’t work as expected.
Could someone explain what I’m doing wrong or point out what I might be missing?
Any advice would be appreciated.

My demo: 

See the Pen ByzKbJw by cqyfddqt-the-reactor (@cqyfddqt-the-reactor) on CodePen.

[Rodrigo]

Hi,

 

That is because you have scrub in your ScrollTrigger config:

ScrollTrigger.create({
  trigger: text,
  start: 'top 80%',
  end: () => `+=${text.offsetHeight * 2}`,
  toggleActions:"play none none reverse",
  animation:tl,
  // Scrub here!
  scrub: 1, 
  markers: true,
});

That basically tells ScrollTrigger to update the progress of the Tween/Timeline to the progress of the ScrollTrigger instance, so as soon as the start point passes the start trigger the animation plays, but, that scrub option tells ScrollTrigger to update the progress of the animation based on it's own progress so that takes over the toggleActions in that case. In the case of the onLeaveBack toggle action is far simpler, that means that when the end point passes the start point when scrolling up, it should reverse the animation. Probably is doing that, the problem is that at that point the animation progress could be zero already (because of the scrub) or the scrubbing overrides the toggle action.

 

I'm afraid that is either one or the other, but not both at the same time, that is either toggleActions or scrub.

 

Hopefully this clear things up

Happy Tweening!