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.