Jump to content
Search Community

Move Element to Top Left of Parent Container

MitchellG test
Moderator Tag

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 comment
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 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.
×
×
  • Create New...