Jump to content
Search Community

Button Animation on Hover

sammyg 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

I'm looking to create an effect, but honestly I'm not sure where to start. I'm wondering if I should create a shape with CSS and attempt to animate that or if I should make an svg of both shapes and use morph to change between the two shapes on hover.

 

image.png.4013fa2db082e65b46f30a0aefb26abf.png

 

So basically on hover the shape needs to turn from a circle into more of a pill shape and the opacity needs to change (which should be the easy part).

 

Any suggestions on the best method for accomplishing this would be appreciated!

 

Thanks,


Sam

Link to comment
Share on other sites

@PointC This was a good start, got it to this point:

 

See the Pen JgNJNX by samandalso (@samandalso) on CodePen

 

Wondering if I can add an effect where the circle lightly gets pulled toward where the mouse pointer is while keep the width animation, just to give it a really subtle more "organic" feel. Not sure if there is a better way to describe it. I'm not sure if this type of effect is possible, but thought I'd ask.

 

Thanks for the help!

  • Like 1
Link to comment
Share on other sites

15 hours ago, sammyg said:

Wondering if I can add an effect where the circle lightly gets pulled toward where the mouse pointer is while keep the width animation, just to give it a really subtle more "organic" feel.

 

I think you'd have to animate the position of the rect towards the middle and then later start a counter animation to move it back to the start. 

  • Like 2
Link to comment
Share on other sites

Are you talking about the actual hover or did you mean when the cursor gets close to the button? 

 

If it's the former, I'd follow @ZachSaucier's advice. If it's the latter, we do have some threads that show a menu button pulling towards the cursor as it gets close to the hover target. I just wasn't quite sure what you meant.

 

Happy tweening.

:)

 

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