mouseenter and mouseleave added after animation completes

[Tofa_101 3 Likes (Newbie)]

Hi all,

 

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,

Chris

See the Pen GQbNrL by chris-howard (@chris-howard) on CodePen

[Visual-Q 586 Likes (Leader)]

Because it is a simple tween it runs immediately and the mouse events are ready before you want them to be. If you add them instead as a function to the master timeline at the appropriate point they are not active until after your initial animation runs. 

 

See the Pen xYogPo by Visual-Q (@Visual-Q) on CodePen

 

[PointC 8,599 Likes (Superhero)]

Hi @Tofa_101

 

Welcome to the forum.

 

I think you had the right idea in your demo, but the onComplete was added to the short autoAlpha tween rather than the master timeline. In addition to what @Visual-Q did for you, you can use onComplete as well if you add it to your master timeline. Something like this:

 

See the Pen aqgpqg by PointC (@PointC) on CodePen

 

In answer to your other question about checking a timeline - yes there are many ways of checking how far along a timeline has played. The most common you'll probably use is progress(). Please check out the progress() method here:

https://greensock.com/docs/TimelineMax/progress()

 

In addition, you can check if certain things are animating (& prevent mouse enter/leave events etc) by using the isActive() and isTweenIng() methods.

https://greensock.com/docs/TimelineMax/isActive()

https://greensock.com/docs/TweenMax/static.isTweening()

 

Hopefully that helps. Happy tweening and welcome aboard.

 

 

[Tofa_101 3 Likes (Newbie)]

Wow Thanks @PointC and @Visual-Q,

 

Such quick responses both have cleared my first issue. Looking forward to learning more after just a small test just seeing such smooth transition and animations I never want to look at another timeline with keyframes again!

 

My only concern now is if the viewer/user has already mouse entered it will not register that and play the animation unless they leave and reenter.

 

Is there a way also to detect if the mouse has already entered and if so to play the mouseenter function?

 

Thanks,

Chris

 

[Visual-Q 586 Likes (Leader)]

Mouse enter is just that you'll need an event listener that detects hover, or focus I think. I cheat and use jQuery hover for this, I don't recall off hand how to do it in vanilla. Just google it or go to MDN to find the right event listener or Point C will be here momentarily with the answer no doubt.

 

[Visual-Q 586 Likes (Leader)]

Quote

Such quick responses both

 

Point C and Sahil have almost made it a competition.

 

 

 

[PointC 8,599 Likes (Superhero)]

So you want the tl timeline to play automatically if the user is currently hovering over the banner when the master completes? I think a simple approach to that would be a querySelector to check for the hover and if true, play the timeline in the onComplete function when we add the listeners. I think something like this should work

 

See the Pen eVqOgg by PointC (@PointC) on CodePen

Of course, you could also use jQuery's hover as @Visual-Q has suggested, but this should give you an option for a non-jQuery solution.

 

Hopefully that helps. Happy tweening.

 

[Tofa_101 3 Likes (Newbie)]

I cannot thank you both enough @PointC and @Visual-Q,

 

This community has given me a great first impression and going through other threads I can see how helpful the community is.

 

You both have solved my issue and give me knowledge.

 

Thanks guys I really appreciate it am looking forward to learning so much more.