Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Green-Alpha

Invalid position

Recommended Posts

Hi,

 

I have a positioning problem and i go crazy because i don't understand why.

 

On the pen, you can see items placed on a circle. When i put a basic shape like circle, positions are ok, but when I put a <path>, these paths are not at the expected position.

 

Do you have any idea ?

See the Pen oNXYYNM by Green-Alpha (@Green-Alpha) on CodePen

Share this post


Link to post
Share on other sites

Hey Green-Alpha. It took me a while to figure out that #circle wasn't pointing to an actual <circle> element but instead is a div 🤦‍♂️

 

MotionPathPlugin can do these calculations for you, so why do them yourself? You can even make use of the new alignOrigin property that is soon to be released (GSAP 3.2) to make it even simpler:

See the Pen poJNRpx?editors=0010 by GreenSock (@GreenSock) on CodePen

Share this post


Link to post
Share on other sites

Thank you for this answer !

 

I use gsap for a while but there are so many features...I think ive read and assimilated 50% of the doc only ! I already tested the motionpathplugin but he don't fit my needs, even if he perfectly fit in this codepen.

 

I created basic example on codepen but on my code I have advanced positioning, in this example it's middle, but it can be middle+50, middle-50, inside, inside+50, outside...plus, there is no <circle> i want it to be virtual and the <svg> can be a basic <div>.

Share this post


Link to post
Share on other sites
6 minutes ago, Green-Alpha said:

it can be middle+50, middle-50, inside, inside+50, outside

Those can easily be done by using MotionPath's offsets or manipulating (scaling) the path that you're using.

 

6 minutes ago, Green-Alpha said:

plus, there is no <circle> i want it to be virtual and the <svg> can be a basic <div>.

If you have a bunch of SVG elements then what's the point in making the circle a div?

Regardless, you could display the circle as a div but still use an SVG for the path (the path that is being used in the demo is actually not displayed). 

 

Unfortunately we don't have the capacity to help you fix the logic of your custom functions, especially when they are function that GSAP has the capabilities to do already :) 

Share this post


Link to post
Share on other sites

Let me explain the reason why i don't use <svg> in many cases : when creating an svg it's impossible to click element behind, but with <div> it's possible to have each element separated.

 

 

Share this post


Link to post
Share on other sites

I can use both when needed, but my first concern was to understand why the positions are invalid.

Share this post


Link to post
Share on other sites
2 minutes ago, Green-Alpha said:

when creating an svg it's impossible to click element behind

pointer-events: none; works on SVG elements... What do you mean?

 

3 minutes ago, Green-Alpha said:

with <div> it's possible to have each element separated

I don't understand what you mean by this.

 

1 minute ago, Green-Alpha said:

my first concern was to understand why the positions are invalid

@GreenSock may or may not be able to help given he has worked with SVG extensively. But it's likely due to how the browser is reporting its value. GSAP does a lot to normalize values across browsers. Rolling your own solution is likely to have errors like this one that you wouldn't have to figure out if you used the GSAP method :) 

Share this post


Link to post
Share on other sites

I forgot the pointer-events so i'll use it :) ty

Share this post


Link to post
Share on other sites
50 minutes ago, ZachSaucier said:

 

52 minutes ago, Green-Alpha said:

my first concern was to understand why the positions are invalid

@GreenSock may or may not be able to help given he has worked with SVG extensively. But it's likely due to how the browser is reporting its value. GSAP does a lot to normalize values across browsers. Rolling your own solution is likely to have errors like this one that you wouldn't have to figure out if you used the GSAP method :) 

I'm not sure I understand the question. When I look at that codepen things are arranged in a circle. Looks visually right to me - what am I missing? 

 

You're using item.getBoundingClientRect().width to figure out the positioning and that may be the issue - that code assumes that the viewport width is identical to the local coordinate system inside the SVG which isn't a valid assumption. If the SVG is scaled in any way, it'll throw those measurements off. In other words, a <rect> that's 100px wide inside the SVG but then in the browser it gets scaled to 200%, the getBoundingClientRect() will report its width as 200px! So then if you alter the "x" position accordingly in the local coordinate system that's gonna be twice what is should be. 

 

Does that help at all? 

Share this post


Link to post
Share on other sites
2 minutes ago, GreenSock said:

When I look at that codepen things are arranged in a circle. Looks visually right to me - what am I missing?

Notice the difference between the letters in his pen and the one I posted. The one I posted has the letter in the vertical center are perfectly split while his original pen it's not perfectly split.

  • Like 1

Share this post


Link to post
Share on other sites

@GreenSock i agree for the scale but there is not ^^ and i can't find any reason

Share this post


Link to post
Share on other sites

Is there a topic or anything to know when the 3.2 or next versions will be released ?

Share this post


Link to post
Share on other sites

GSAP 3.2 will be released early next week most likely. For versions beyond that you'd need a time machine to find out when they will be released :) 

Share this post


Link to post
Share on other sites

The problem is that your <path> stuff has an outline that doesn't accurately reflect the bounding box via getBBox(). If you just show the letter "A", for example, BEFORE you position it on the circle, you'll notice that it's NOT butted up against the top of the screen - it's too far down. If you check getBBox(), it shows that y is 0, but the outline is definitely lower. So that's the issue. In other words, your <path> is actually offset down too far (the artwork itself). 

 

I hope to push 3.2 out later today, and announce it Monday. 

  • Like 2

Share this post


Link to post
Share on other sites
25 minutes ago, Green-Alpha said:

i agree for the scale but there is not ^^ and i can't find any reason

 

You're assuming that your paths start at 0, 0. 

 

See the Pen 9a769e97a10e2598f2bd072e095b5ca1 by osublake (@osublake) on CodePen

 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you for all your answers, my problem is now fixed and u found the reason why, it is logical but I missed it :)

  • Like 1

Share this post


Link to post
Share on other sites

Hi again,

I'm not able to find a way to change the start and end angles to start "top" instead of "right". Only solution for now is to do a rotation on the container, is this the only way ? When I set the "start" value to 0.5 on the pen

See the Pen poJNRpx by GreenSock (@GreenSock) on CodePen

, there is no difference.

 

When I set autoRotate to true, the rotation is not done on the element on the left, what I am missing ?

See the Pen ExjZEMB by Green-Alpha (@Green-Alpha) on CodePen

Share this post


Link to post
Share on other sites

Given there's no animation happening, you're just changing the value, you should affect the end value instead (this rotates the elements half way around the circle): end: i => i / items.length + 0.5

See the Pen GRJrxeW?editors=0010 by GreenSock (@GreenSock) on CodePen

Share this post


Link to post
Share on other sites

@ZachSaucier this mean the number can be grater than 1, right ?

 

Sorry I edited my prev answer to update and show autoRotate problem

Share this post


Link to post
Share on other sites
1 minute ago, Green-Alpha said:

this mean the number can be grater than 1, right ?

Sure.

 

25 minutes ago, Green-Alpha said:

When I set autoRotate to true, the rotation is not done on the element on the left, what I am missing ?

Looks like all of the elements are rotated to me. What do you mean "the rotation is not done"?

Share this post


Link to post
Share on other sites

I'm facing a really weird behavior. On my final code the rotation is done but in a weird way (the left char rotation is 0deg, and other chars rotation is reversed), and on the pen it's fine. I'll investigate thank you for your anwser :) Maybe write in the doc that the number can be greater than 1 ?

Share this post


Link to post
Share on other sites
29 minutes ago, ZachSaucier said:

Given there's no animation happening, you're just changing the value, you should affect the end value instead (this rotates the elements half way around the circle): end: i => i / items.length + 0.5

 

Hm. Circles start at 3 o'clock. To get it to start at the top, 12 o'clock, it should go back a quarter turn, but it doesn't seem to work. Possible bug?

 

See the Pen db8cbe97dee6614b9d9fe8b1f058cfb0 by osublake (@osublake) on CodePen

 

 

  • Like 2

Share this post


Link to post
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.

×