Jump to content


Hover animation - fast 'rollIn' causes ani to get stuck

Go to solution Solved by PointC,

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 guys,


I was wondering if you could help me with this.


A brief overview of what I am trying to achieve:


• When user hovers over '.item', I want the tag in the corner to do a bounce animation.

• I do not require this animation to reverse on rollout

• There are more than one '.item' instances on the page (blog posts) so need to be able to detect the specific instance which it actually hovered on.


The problem I am experiencing is if a user hovers in/out very fast - the animation gets stuck. 


From reading the forums I have tried a few different approaches to this, but cannot seem to figure out how to solve this.


- I am also planning on adding more animations on the hover state as well, so ideally need all of these to fire on the '.item''s hover.



Here is V1 of what I have tried - hover in and out fast and you will see the ani freeze-up


Here is V2 of what I have tried using a master timeline, failing miserably

See the Pen yaPamY by marklawrencedesign (@marklawrencedesign) on CodePen



Thanks guys,


See the Pen ALbLPE by marklawrencedesign (@marklawrencedesign) on CodePen

Link to comment
Share on other sites

  • Solution

Hi redrooster :)


Since you will have several of these, I'd recommend jQuery each() to create a timeline for each element which can be played on hover. You mentioned not needing the animation to reverse on mouseout so I used a mouseenter instead of a hover. I also added an isActive() check when the mouse enters the div so the animation won't start over with rapid hovers in/out. Finally, I added a data div to indicate the index of the element you just hovered over.


Here's a fork of your pen with my solution:


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


Hopefully that helps a bit.


Happy tweening.


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