convertCoordinates problem

[Bjarne Skov]

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.

Thanks

 

 

 

 

 

 

 

 

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

[akapowl]

 

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