svg animation on hover

[Alexandra Spalato]

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.

[Alexandra Spalato]

I have fix the first part, even if I don't understand why it doesn't work with the class (and I would prefer to do it this way as now I have to write 2 animations instead of one...)

[xaviergd]

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!

[mikel]

Hey @Alexandra Spalato,

 

You have not defined a class 'anim'.
If you want to round the corners of an svg element, you need a rect element defining the attributes rx and ry.

 

Or do it like this

 

See the Pen BajqerK?editors=0110 by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[Alexandra Spalato]

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

[mikel]

Hey @Alexandra Spalato,

 

In the example you want to recreate, it is not the whole logo that rotates,

but the individual parts 'move' to their new position.

 

See the Pen PoZxpEy by mikeK (@mikeK) on CodePen.

 

By the way: Please check your Understanding the Position parameter.

 

Happy tweening ...

Mikel

[Alexandra Spalato]

Thank you so much!

after doing it in gsap I've decided to do it in pure css as it is simple, as the project as no other needs of gsap, so I don't have to install it

also thanks for the video about the position parameter, very usefull!

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