Jump to content

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

Mouseenter: would like to finish timeline before it fires again | isActive() is always returning false

Go to solution Solved by akapowl,

Recommended Posts

Hey! I would like the timeline to be completed before it fires again. Now when you hover really quickly it doesn't look good at all. I'm missing something in the structure that I struggle to find out. My first thought was to find the isActive() and then do some if statements. But isActive() is returning false all the time. 


- How can I finish the timeline before it fires again?

- Do someone know why isActive() always returning false? 


This is probably a rookie mistake, and, this is my first post in a forum (ever!), so let me know if I could explain/structure my post better! 

See the Pen porooOQ by emmanders (@emmanders) on CodePen

Link to comment
Share on other sites

  • EmAnd changed the title to Mouseenter: would like to finish timeline before it fires again | isActive() is always returning false
  • Solution

Hey @EmAnd


It would probably be best to create your timeline beforehand (and set it to paused) and then in the mouseenter function just toggle its playstate.


If I am not mistaken, you are actually not adding tweens to a timeline there but creating new individual tweens with each of your function calls.


tl = gsap.fromTo( ... )



I changed that a bit, so now the tweens get added to that one timeline, so you can change the playstate of the timeline easily. (And I also moved the delay from the delay var to the position parameter.)






Here's one possible solution that only restarts the timeline when it is not active.


See the Pen 53f4df1227ef6b3e28cdcbf9d4330d52 by akapowl (@akapowl) on CodePen




The big plus of creating it beforehand (and adding the tweens to the tl instead of creating new individual tweens) is that if all you want to do is to play it from scratch when you re-enter with the mouse, you won't even have to check on the active state.


See the Pen 98f8a54d976ee4112e5e94e8df2d7c70 by akapowl (@akapowl) on CodePen




  • Like 4
Link to comment
Share on other sites

@akapowl, wow, thank you so much for this quick educational solution 🙌  I get it now! 

  • Like 2
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.