How to rewrite this onLeave onEnter and etc with just toggleActions?

[sobakaalkaidi]

Is it possible to rewrite manual trigger functions with just toggleActions?
I don't understand how toggleActions works, don't link documentation, I read it but just can't grasp.

See the Pen oNbEqzJ by sobakaalkaidi (@sobakaalkaidi) on CodePen.

[GreenSock]

Welcome to the forums, @sobakaalkaidi. 

 

I don't understand your question. You can certainly use your own logic inside the onEnter/onLeave/onEnterBack/onLeaveBack callbacks. Absolutely. 

 

The main benefit of using an animation with toggleActions is that the same animation instance is used for everything. Less memory, better performance. But honestly you'd probably never notice any performance difference in real-world applications. 

 

Think of toggleActions as merely what the associated animation is told to do at those toggle spots (onEnter, onLeave, onEnterBack, onLeaveBack...in that order). Sorta like:

let animation = gsap.to(".container", {backgroundColor: "#fff", paused: true});

ScrollTrigger.create({
    trigger: '.wht',
    start: "top center",
    end: "bottom center",
    // toggleActions: "play pause reverse pause",
    onEnter: () => animation.play(),
    onLeave: () => animation.pause(),
    onEnterBack: () => animation.reverse(),
    onLeaveBack: () => animation.pause()
})

Does that help? 

[sobakaalkaidi]

43 minutes ago, GreenSock said:

 

let animation = gsap.to(".container", {backgroundColor: "#fff", paused: true});

ScrollTrigger.create({
    trigger: '.wht',
    start: "top center",
    end: "bottom center",
    // toggleActions: "play pause reverse pause",
    onEnter: () => animation.play(),
    onLeave: () => animation.pause(),
    onEnterBack: () => animation.reverse(),
    onLeaveBack: () => animation.pause()
})

Does that help? 

Oh thank you. When you think about animation.pause(), it becomes more understandable. What I really wanted was toggleActions: "play reverse play reverse"

gsap.to('.container', {
  backgroundColor: '#fff',
  duration: 1,
  scrollTrigger: {
    trigger: '.wht',
    start: "top center",
    end: "bottom center",
    toggleActions: "play reverse play reverse",
    markers: true,
  }
})