[Proper way to animate responsively]

My Codepen URL contains a sample code of 3 div blocks being moved to a central block. The moving box have to use "relative" positions. The animation works fine, but when the browser is resized, the boxes aren't inside the central container any longer.

 

What is the proper way to keep the boxes inside the central container after the browser's window is resized?

 

Thanks

See the Pen REBoZv by weyseal (@weyseal) on CodePen

[Page flipping - book with one side only]

Thanks for the guidance. I'll try out and come back when I have more specific questions.

[Page flipping - book with one side only]

Hi guys,

 

First of all, let me start by saying that I have never used GSAP before. I came across it when searching about page flipping animations.

 

I want to create a page flipping animation which is responsive and the "book" has one side only. Many of the examples I found so far show a book with both left and right sides, but in my situation I only need one page to be displayed. In order to flip, the user needs to click on the button so no need to drag the page around.

 

Could you guys point to how I should do that please?

 

Thank you

 

PS: I have added a Codepen which is similar what I want, but:

1. it's not responsive;

2. the book still has 2 sides. I'm not sure how to get rid of the page on the left.

See the Pen LgQoOb?page=1& by weyseal (@weyseal) on CodePen