Streaming live at 10am (PST)

Can anyone help with svg animation?


#1

Hello everyone,

Perhaps someone can point me to the right direction on this one.

This is what I have right now: link

The X in a square .. when you hover over it, animation goes fine until it becomes a cross within a circle.

Now, the idea is to move each line of a "cross" about 10px so it would look like this

I've tried to animate a drawing of a square and its working fine, but its done via drawing each side of a square with and then animating it with svg. However, i can not "spin" it after.

So i have to use div and then spin it like:
in .css
.rotate{
border: 2px solid white;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
}
.rotate:hover{
border-radius:50%;
-webkit-transform:rotate(405deg) scale(0.75);
-moz-transform:rotate(405deg) scale(0.75);
-ms-transform:rotate(405deg) scale(0.75);
-o-transform:rotate(405deg) scale(0.75);
transform:rotate(405deg) scale(0.75);
}

and the X is .png file which I wrap around that div and rotate it until I get the + shape.

any help is greatly apreciated :slightly_smiling:


#2

From what I understand you want to separate the plus sign that currently looks like this:

To do this you will have to have the + or X whatever you want to call it, 4 different lines made in Webflow rather than a full connected .png; for you then won't be able to separate the picture apart if it is a .png.

Also I would stick with using the Webflow Div lines because on my iMac 4k the .png looks very blurry while the Webflow lines look sharp. :wink:

Hope this helps. If not, be sure to ask more questions. :wink::grinning:


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.