Jump to content
Search Community

left or top doesn't work for circle svg object

mhd_arif test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

  • Solution

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

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