Jump to content
GreenSock

Michael McCrickard

Animating to an absolute position

Go to solution Solved by Michael McCrickard,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

Hi Michael McCrickard :)

 

Welcome.

 

Are these DOM elements or are you talking about child elements of an SVG? I ask because the answer of figuring positions might be a bit different. Moving an element to the lower right corner of a window would be a bit different than moving a rectangle to the lower right corner of the parent SVG etc.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

A few thoughts:

  1. You could certainly just use position:absolute on all your elements and position them as you please with x and y. That should basically get you what you're after.
  2. The nature of HTML/CSS doesn't lend itself well to true absolute positioning in a global sense. Like PointC said, all all depends on context. What if your object is inside a container that's rotated/skewed and that's also inside another rotated/scaled element? What if it's in an SVG nested in an SVG? What if it's a canvas library object? We designed GSAP to work within the context of the typical model used in web sites. 
  3. Even if GSAP did all those calculations for you to make your element land exactly at a certain coordinate, that would only be in the context it was in at the start of the tween - what happens if something else in the document flow gets changed (like an ancestor element shifts)? People might get frustrated, like "wait, I told GSAP to animate to exactly x:100, y:200 on the overall page...why didn't it stay there?" 

But again, the simplest answer is probably just to set position:absolute on your elements and then put them wherever you please. Does that help at all?

  • Like 4
Link to comment
Share on other sites

Maybe you could make a simple CodePen for us so we could see exactly what you're trying to accomplish. It wouldn't take more than a div and a button with some details about what you want the div to do. Live code is always the best way to give you advice. 

 

Please see Carl's blog post about creating a CodePen.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Confirmed: "no" ;)

 

Welcome to the forums, by the way. And yeah, the folks around here are pretty awesome with being fast and helpful.

  • Like 3
Link to comment
Share on other sites

  • Solution

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( ).  

Link to comment
Share on other sites

  • 2 years later...

Need your object to begin at something other than 0/0 but don't have time for all that messy math?

 

1. Set image to 0,0 in css

2. Use .set() at the beginning of your timeline  to set your beginning coordinates as in x,y format.

3. Animate away using x,y without maths!

 

Note:   Because your image is set at 0,0 initially, there will be a microsecond of a flash of the image at the 0,0 location. To avoid this I always start my image at 0,0 AND opacity 0.  Then turn it back "on" in the initial .set() statement.  like this   .set(myimage, {x:25, y:25, opacity: 1})

  • Like 1
Link to comment
Share on other sites

hello man. i see 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.

Link to comment
Share on other sites

I keep reading this thread and I'm not clear on the issue that's happening. 

 

Why not just use .to and tween to the exact CSS properties you want to go to and I don't think in that case you have to worry about reading anything on the current element?

  • Like 2
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.
×