ScrollTrigger Reverse after morphing using another timeline

[hamsa@thoughtput.in]

Hello folks!

 

I have a mostly simple setup here: timeline TL1 is triggered via ScrollTrigger which also displays a button. Clicking the button morphs the graphic to another shape via timeline TL2. Now I have onLeaveBack under ScrollTrigger's toggleAction set to reverse, and since I'm morphing using a variable, I'd image reverse works on the current shape. However what I'm seeing is onLeaveback revert to the previous shape right before reversing. I even tried to refresh() the ScrollTrigger, but to no avail. What am I missing here? Or is the only way out to use onLeaveBack to trigger a third timeline altogether?

 

Thanks for all the great work y'all are doing out here! 🙂

 

See the Pen eYZmEMm by ashwinuae (@ashwinuae) on CodePen

[mikel]

Hey @hamsa@thoughtput.in,

 

You could e.g. use a function with the relevant params.
This can then be called with the corresponding callbacks (onEnter, onLeave, onEnterBack, onLeaveBack, ...) - and also for the click func.

 

See the Pen bGpNYoR by mikeK (@mikeK) on CodePen

 

Happy switching ...

Mikel

 

EdiT: I also changed the SVG: you might like the morph

[hamsa@thoughtput.in]

Thanks Mikel! (extra thanks for the sweet morph! 😀)

 

This implementation looks clean and makes sense. It definitely helps a bunch. Cheers!