I am very new to hand coding and using GSAP and have just got the hang of the basic principles of the tweens and timelines.
My problem is I would like to animate a half background during the timeline and after its completed add a mouseenter that animates the same background to the full height.
The issue is if the mouse enters before it gets to the timeline it animates the background in, it breaks the mouseenter and does not behave as it should.
To replicate check the codepen.
Mouseenter before the black half background animates in and it will complete the whole mouseenter function.
To see the desired result. Refresh the codepen and do not mouseenter until the black half background animates in. Then mouseenter.
Is there a way I can
a. add the mouseenter mouseleave functions after a certain point in a timeline?
b. use a check else if statement to see if mouse has already entered and still has not left play the rest of the mouseenter animation ?
Sorry this is my first post so hope this information and the pen makes sense.
Thanks for any advice or help in advance,