Jump to content
Search Community

svg animation on hover

Alexandra Spalato test
Moderator Tag

Recommended Posts

Hello,

I need to make this animation https://xd.adobe.com/view/c5ade23b-c17f-40b7-80b9-c6d6c06ac590-90fe/ (hovering the logo, look at the one in the footer for better visibility)

so I applied a class anim on hover, and for the moment I just try to rotate it of 90deg, it works with the normal class, but not with the other class

 

second problem, as you can see the border-radius of the elements are changong on hover, but I just found that borderRadius prop doesn't work with svg...how can I accomplish that

then there is other stepts, but these are the 2 first problems that I need to solve...

See the Pen yLeRGQJ by alexadark (@alexadark) on CodePen

Link to comment
Share on other sites

Hi there Alexandra!

Regarding the changing of shapes you have several options:
-Option 1: Since these are pretty simple shapes you can achieve the same result using only CSS and divs instead of using SVG, and then you can modify the border-radius property of each element.
-Option 2: If you want to use SVG to handle the shape change MorphSVG plugin is your best option,
-Option 3: You can always alter the path directly too targeting the d attribute, but it won't look as smooth and you'll need to make sure that all of your SVG paths have the same number of nodes.

Hope that helps!

  • Like 3
Link to comment
Share on other sites

Thank you!

I have done it with css 

See the Pen LYGXxQp by alexadark (@alexadark) on CodePen

now the problem I have is that is a bit jumpy/buggy because of the margin that I remove and put back to do like in the design ... but in the design it's smooth

how can I make this movement smooth

certainly something about timing and ease, but I have tried several thing and it still not smooth

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