On-Off-onclick same element

[dominium]

Hello Guys,

 

I know that should be easy for you to resolve that.

 

I have tried a lot and I'm getting better and better having fun learning GSAP

 

I want to animate the same element for mouseover, mouseout and click.  The click state as you probably already know is the difficult part.

 

I tried some playback method with kill...etc..

 

The "on" state is play and reverse on "off" but I dont' get what to use to kill and play another tween for same object.

 

I am using the scrollto plugins.

 

BAsically My overlay is autoalpha 1 onmouseover and 0 onmouseout but if the user click it should stay visible for 1 second which is the same time for the scrollto finish

 

 

Viva codepen to describe it

 

Thanks

 

Danny

 

 

 

See the Pen aLooBM by dominium (@dominium) on CodePen.

[Carl]

I'm not sure I understand everything but by removing the mouseout listener when you click that will keep the overlay visible.

when the scrollTo animation completes you can then add that listener back and animate the overlay back to being inviisible like

 

See the Pen yzBMKM?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

[dominium]

Thanks Carl no you did understand, thats exactly that.

 

More a javascript question

 

I thought that some tween playback would do the job. Still have to wrap my head around all that.

 

Learning curve is long.

Danny