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

[redrooster]

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

[PointC]

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.

[redrooster]

Thanks PointC - you are a great help!