Jump to content
Search Community

CSS-like hover animations?

jesper.landberg test
Moderator Tag

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

Just to throw my two cents in the mix:

 

When dealing with a translate or any transform that would animate away from the mouse when hovered. You should setup your html so that your trigger is the animated elements parent. So basically you bind your event handler on the parent of your animated element. So when it animates your trigger will still be the parent and not the element being animated. Which can cause you to lose focus of the animated child .

 

This example uses TimelineMax and just uses play() and reverse()

 

See the Pen ZGZZKR by jonathan (@jonathan) on CodePen

 

The above could have used native javascript to bind the events. But i'm using the jQuery on() event handler which keeps the event handler mouseenter and mouseleave always listening for any changes in the DOM. Using native javascript would have required some extra code to add the checks to keep the event listener on after first binding.

 

Conversely here is the same hover effect but with using autoAlpha (opacity and visibility: hidden)

 

See the Pen ZGZZeR by jonathan (@jonathan) on CodePen

 

I hope this helps! :)

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.
×
×
  • Create New...