Adapting Observer to Trigger Click Events

[pietM]

Hi everyone, 

I'm trying to adapt GSAP's Observer to trigger both "prev" and "next" click behaviors, but the "up" and "down" events don't match "click" events -- even when I set draggable to "false". Any thoughts? 

 

See the Pen NWmNdKj by evryali (@evryali) on CodePen

[mvaneijgen]

First of I would not trigger a click event on something else that then in turn does some logic. I would recommend abstracting out the thing you want to happen and then make the click event and the Observer use that abstracted out function. 

 

If you haven't worked yet with the Observer plugin, it fires a lot of times when you just use it as is. It is a smart idea to build in a check if something is already happening and then preventing it from doing its thing. I've create a new variable isAnimating which is false and get set to true when it starts to animate, I've rewritten your prev and nexterPush to use an animations which sets isAnimating to false when it is done. 

 

Hope it helps and happy tweening! 

 

See the Pen dyLMvRz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[pietM]

Thank you, @mvaneijgen! 

I tried to bring the logic into the functions, but neglected to include your "onComplete" functions to halt animation. 

Thanks again! A huge help.