Jump to content
GreenSock

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

MorphSVG .hover()

Recommended Posts

Thank you pointC,

I've improved the svg and the animation now it's smoother.

Now I'm trying to make the text follows the animation on hover the but I'm stuck here.

I'm pretty sure the way I set the elements of the button it's a bit messy but not sure how to improve it

Shall I animate the position of the text or there's a better way to approach this?

 

See the Pen pozeKMy by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

Thank you!

Share this post


Link to post
Share on other sites

I think I'd probably put this on a timeline and play/reverse on hover. Maybe something like this:

 

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

 

Does that help? Happy tweening.

:)

 

  • Like 2

Share this post


Link to post
Share on other sites

Perfect! thank you!

Only thing is that the text is not aligned when the page is loading and then jumps into position

 

See the Pen pozeKMy by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

 

Share this post


Link to post
Share on other sites

That's a bit of FOUC. You can set the .container (or whatever element you like) to an opacity: 0  and/or visibility: hidden in your CSS and then use GSAP to set it back to 1. Something like this:

TweenMax.set(".container", {autoAlpha:1})

Happy tweening.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×