Jump to content
GreenSock

redrooster

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