Jump to content
GreenSock

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

CSS-like hover animations?

Recommended Posts

lets say I have this:

div{
transition: translate .25s;
}
div:hover{
transform: translateY(100px);
}

How would I replicate a simple hover effect with GSAP? Start animation on hover, and reverse it on mouseout, and enable them to be interruptible?. Well yeah exactly how hovers work with CSS.

Link to post
Share on other sites

See the Pen jPRJKM by sgorneau (@sgorneau) on CodePen

 

Tough part about a translate like that is, the mouse won't be constantly hovering... so the hover state won't be nearly as long as one would expect.

Link to post
Share on other sites

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

×