Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MitchellG

Move Element to Top Left of Parent Container

Recommended Posts

I seem to be missing some key concepts about moving elements.  I would like to move the text in this codepen from the center to the top left corner of the parent ".container" div but the only way I know how is to use the x and y values. But since this text is in the middle of the page to start (there are a bunch of animations that take place before which is why it ends up in the center) I would have to use some type of calculation to determine their values.  I have literally no clue about how that or what to use for that calculation other than guessing.

 

Any help appreciated.

See the Pen vYGwPWB by chellgouda (@chellgouda) on CodePen

Link to post
Share on other sites

Hi @MitchellG, because X and Y move irrespective of positioning (and therefor aren't bound by relative parents), we just have to calculate where the top/left coordinate of the parent is, and move there. But, there are quite a few things that can get in way of this ... and your grid layout is one of them.

 

The best thing to do is to start with a layout in the final position (with the added advantage that this position is what people would see if Javascript failed for some reason) and then use GSAP to tween from another location to the default position.

 

See the Pen BaKebOQ by sgorneau (@sgorneau) on CodePen

  • Like 4
Link to post
Share on other sites

Thanks so much both of you for your help. This has really helped me to get a handle on how to think about these problems.

Link to post
Share on other sites
1 minute ago, ZachSaucier said:

Same thing as Shaun's but without jQuery and with different white space:

 

You know, there are times where I say to myself ... "why did I even use jQuery for this". This is one of those times 🤣

Link to post
Share on other sites

I dare ask why using a grid inside of the .demo element cause a problem?

Link to post
Share on other sites
12 minutes ago, MitchellG said:

I dare ask why using a grid inside of the .demo element cause a problem?

It just makes it harder to position the content in the center of the viewport.

  • Like 1
Link to post
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.

×