left or top doesn't work for circle svg object

[mhd_arif 0 Likes (Newbie)]

hello everyone, i got another trouble and i hope anyone of you can help me. i get one svg, there are six circle inside of it and i want to move the pink to the right with left property but i doesn't work. it worked when i changed the left with x. so what is the trouble?

See the Pen LNEOav by mhd_arif (@mhd_arif) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Hi mhd_arif,

 

The <circle> element in a SVG does not have 'left', 'top', 'right', 'bottom' properties, you can't animate them.

 

It can be animated using transforms, that's what GSAP's 'x' and 'y' uses. That is why it worked when you changed from 'left' to 'x'.

 

[mhd_arif 0 Likes (Newbie)]

oh i see, thanks for the answer. so how can i move the circle to the center of the svg horizontally?

[Dipscom 2,815 Likes (Superhero)]

Using the 'x' in GSAP - As you have mentioned you already had it working.

 

And:

1. You can either work out the amount yourself: ( [width of the svg] / 2 ) - ( [width of the circle] / 2), or;

2. Write a little function to calculate it for you, or;

3. Input relative values by trial and error until the circle stops where you want, or;

4. Place the circle in the center and do a .from() tween;

 

Amongst possibly other solutions that I believe exist out there.

[Carl 9,066 Likes (Superhero)]

I like all of dipscom's suggestions. It appears also that the cx and cy attributes of a circle can be percentages so you can tween them with the attribute plugin.

TweenMax.to("circle", 1, {attr:{cx:"50%", cy:"50%"}});

http://codepen.io/GreenSock/pen/zqxJyO?editors=0010

 

You will see that all of the <circle> elements will animate to the center. 

However the AttrPlugin does NOT does not do anything fancy to convert the initial pixel values set in the svg code to percentages and honor the pixel position so you may notice that the starting positions of each circle are different than what you had. Short story: if you want to tween to percentage-based values then start with percentage-based values in the svg.

[mhd_arif 0 Likes (Newbie)]

thank you so much for both of you guys, you help me a lot

[mhd_arif 0 Likes (Newbie)]

i think the attrplugin is easier way, like you said it didn't come from the place that it should be. i'm still figuring out how can i center it vertically. i take the height of the svg with .outerHeight() and minus it with the current position of the circle with .position.top. it didn't work, any suggestion guys?

[Dipscom 2,815 Likes (Superhero)]

To me, you are overcomplicating things. Is this going to be responsive?

 

You have a viewBox, a ratio and a fixed size to work with in the SVG - There should be no need to need percentages. 

 

Even if it was meant to be responsive, because you have a viewBox, all would scale nicely anyway without the need of percentages.

 

See the Pen qZdOWp by dipscom (@dipscom) on CodePen

. Removed a bunch of things that were not needed and simplified your code. I also have rounded up some of the numbers, just because I think it is pretty and makes it easier to work with them in your head.

 

Have a look and study it, it should provide the answers you are looking for.

 

If you plan to be working with SVGs, is a good idea to go over the SVG docs and descriptions of attributes. Knowing how those things behave is very useful.

[mhd_arif 0 Likes (Newbie)]

that's the thing that i looked for all the time, thank you very much brother dipscom. sorry for complicating thing haha.

i planned to transfrom two circle to a sunglass and remove the other circle. thanks