Jump to content
Search Community

Need help animating translate(-50%, -50%) and back again

Ek1 test
Moderator Tag

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

Hi,

Been struggling with this problem for a couple of days now, not sure what I'm doing wrong or my next steps.

What I want: the box is centered in the screen. It's clicked and expands to fit the screen. When the modal is closed, I want the box to return to being centered in the screen, regardless of the size of the screen, or the width/height of the text.

I can sort of hack it by setting the height of the box like (lineHeight of text + padding*2 + margin*2 + border*2) and then translating with vw and vh values but it doesn't feel browser-compatibility-friendly and there has to be a better way.

See the Pen mdbWdRN by erinknowles (@erinknowles) on CodePen

Link to comment
Share on other sites

Hello Ek1 and welcome to the forums.

 

I'd highly recommend using a timeline for this sort of thing. See the below post for more information and documentation regarding TimelineLite:

 

 

Modifying your demo to use timelines (and a few other minor modifications), you can get it to work how I think you want it to work:

 

I also suggest using just one click function (or having a more obvious "X" to close the window). 

 

Lastly, the h1 doesn't animate back to the beginning width using viewport units (maybe @GreenSock can give some info as to why). Generally it's best to avoid viewport units in GSAP 2 if you can help it as far as I know. You can change it to use another unit (like percent) and it will animate back just fine.

 

See the Pen ExYWxpd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

  • Like 3
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...