Replace a div with a hidden div animated

[ueabu]

Maybe there is a tutorial about this somewhere but I have checked everywhere and I can't find anything. 

 

In summary, I have two div. For the sake of explanation, we will call one the home div and the second one the second page. The home div initially starts out with a block display and second page display is set to none. I tried setting it to hidden but it distorts the size of the home page because space is still allocated for it when the display is hidden. 

 

When I click on the home page, I want the home page to slide out to the left and at the same time, the second page to slide in from the right taking the spot of the home page. And when the second page is displayed, when I click on the second page, I want it to slide out to the right and the home page slide in from the left. I have attached my codepen link with what I have so far. I would preferably also like the home page display to be none when it slides out so the size of the overall page is not distorted by a hidden image.

 

Any feedback is welcome. 

See the Pen vYOMoZg by ueabu (@ueabu) on CodePen

[PointC]

I'm not 100% sure what the end goal is here, but you could position the divs off the screen and set the overflow-x:hidden. Or you could use a parent div and the two solid color divs could be children of that with overflow:hidden. There would actually be several ways to set it up. 

 

It does sound you want the entire div to move in/out of view so rather than use a pixel based animation, I'd recommend using a percentage based translation with xPercent. Something like this:

gsap.to("#home", { xPercent: -100 });

You can read more about that here:

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

Hopefully that helps. Happy tweening.