Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tofa_101

mouseenter and mouseleave added after animation completes

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 5
Link to comment
Share on other sites

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.

:)

 

 

  • Like 3
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Quote

Such quick responses both

 

Point C and Sahil have almost made it a competition.:-D

 

 

 

  • Haha 3
Link to comment
Share on other sites

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.

:)

 

  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×