Michael McCrickard

OK, after some experimentation on codepen, here's my solution. Position your element initially at 0,0. Then whatever absolute coordinates you pass to TweenLite.to( ) will be calculated relative that position. Voila! You will be animating to "absolute" positions every time. If you don't initially position your element at 0,0 -- then whatever position you element has initially becomes it's home spot. And whenever you animate that element to 0,0 -- it returns to that home spot and not to 0,0 on your screen. If you have element with a arbitrary starting position like that and you still need to do absolute positioning, you simply subtract the element's home position from the desired position (desiredX - homeSpotX, desiredY - homeSpotY) , and pass those values to TweenLite.to( ).

These elements are marked position:absolute. And as long as I supply the proper offsets to the TweenLite.to( ) command, the objects do go where I want them to. My question is simply this, is there a not a command that takes an absolute position as the parameters instead of expecting offsets from the current position? Or a simple way to achieve this? Yes, I understand all bets are off if the position is not set to absolute or or my object is inside some rotated or skewed object. Same thing if I change up the DOM after the fact, shifting things around. But these are not issues for what I'm doing here. I guess the answer is "no", but no one has come out and said it yet. If that is the answer, I'll write the code to translate my desired absolute positions into offsets. But I was assuming that I wanted to do was not unusual, so I was just checking to see if I was missing something. Thanks for everyone's help with this!! I amazed at the quickness of the replies on here.

Thanks for the reply, jonathan. I looked at the codepen example and it feels like a more complicated approach than I was hoping for. But I wasn't even aware tweenTo() before, so I'm glad to know what it does. PointC, these are regular DOM elements, plain old divs. Do you know of a simple way to do this?

I have been trying, unsuccessfully, to find a way in GSAP to simply animate an element to a certain position. .to( ) expects an offset from the current position. So if I want my element to go up, I have to supply a negative value to the x parameter, or a positive one to go down. And a similar calculation for the y parameter, depending on whether I want it to go left or right. But does GSAP not have a function that just takes an absolute position and then figures out how to get it there? Yes, I can read the position of the element myself and figure this out, but this seems like such a basic use case, that I would assume it's already in the API. Am I wrong?