Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sammyg

Button Animation on Hover

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 post
Share on other sites

Here's a SVG button I use on my own site as well as some client sites too. Maybe it'll give you some ideas.

 

See the Pen PMmbpz by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

Link to post
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!

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

×