Translate Div Through a Fixed Point

[SMBM]

I'm trying to translate a div through a point so that it ends up on the exact opposite side of said point.

ie. if the div's x, y coordinates are (100, 0) and the point is (200, 1) I'd like the div to end up at (300, 2).

I'd like a method I can apply to multiple elements all going through the same point. I tried to find a way by making the point the transform origin of the div but it didn't seem to help anything.

 

Is this possible with Tween?

 

As you can see in the code pen, the circles spin on the y axis and therefore become thin as they cross over, I want them to remain flat and slide over instead.

See the Pen yORPgW by SMBM (@SMBM) on CodePen

[OSUblake]

Cool animation!

 

Messing with the transform origin can be troublesome. You could do something like this...

See the Pen dMQMYL?editors=0010 by osublake (@osublake) on CodePen

[SMBM]

Thanks a million. I need to remember to use maths rather than code to solve some of these problems.

[OSUblake]

Just saw the changes you made... AWESOME WORK!!!

 

It almost looks like you are using canvas. I forked it just to save it's current state in case you change it.

See the Pen oxQLeY?editors=0010 by osublake (@osublake) on CodePen