Jump to content
GreenSock

mhd_arif

left or top doesn't work for circle svg object

Recommended Posts

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

Link to comment
Share on other sites

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

 

:)

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

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