Jump to content
Search Community

convertCoordinates problem

Bjarne Skov test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi there.

I'm trying to make it look like when rotating the "redRadius" it pushes the green line, here called "Left" outwards.

The green lines x1 and x2 should constantly be vertical above and below the tip of the redRadius.

Tried some eases to no avail.

Help would be greatly appreciated.










See the Pen ZEVQzxa?editors=0010 by BYTEaBIT (@BYTEaBIT) on CodePen

Link to comment
Share on other sites

  • Solution


Welcome to the forum, Bjarne!


If you're going the set the coordinates via the onUpdate callback of your timeline, there is no need to also tween on the x of your line (or rather that whole group containing both your elements) additionaly - and actually that is just bound to throw things off for you because you will have two tweens update values that are relevant. But maybe you also just included that tween to showcase what you're trying to do - in this case; thanks, it helped understand your question :)


Also, just as a sidenote - although you're not going to need it;

something like an outIn version of eases doesn't exist - for most eases the available versions are in, out and inOut


Now on your actual issue:


If you only want to update the horizontal position of the line, you wouldn't want to update any of the y values of the line as they are supposed to stay the same as they are.


But what you'll want to do instead is to also update the x2 attribute of your line (the x of where the line ends).

...and technically you already said yourself what you needed to do ;) 

2 hours ago, Bjarne Skov said:

The green lines x1 and x2 should constantly be vertical above and below the tip of the redRadius.


// So basically you just need to...

// ...replace this...

Left.setAttribute("x1", p.x);
Left.setAttribute("y1", p.y);

// ...with this...

Left.setAttribute("x1", p.x);
Left.setAttribute("x2", p.x);

That should already do what I understood you wanted? Does it?


See the Pen JjwGLpP by akapowl (@akapowl) on CodePen


  • Like 3
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...