MitchellG Posted September 30, 2020 Share Posted September 30, 2020 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 More sharing options...
Shaun Gorneau Posted September 30, 2020 Share Posted September 30, 2020 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 4 Link to comment Share on other sites More sharing options...
MitchellG Posted September 30, 2020 Author Share Posted September 30, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted September 30, 2020 Share Posted September 30, 2020 Same thing as Shaun's but without jQuery and with different white space: See the Pen GRZaLQM?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted September 30, 2020 Share Posted September 30, 2020 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 comment Share on other sites More sharing options...
MitchellG Posted September 30, 2020 Author Share Posted September 30, 2020 I dare ask why using a grid inside of the .demo element cause a problem? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 30, 2020 Share Posted September 30, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now