Search the Community
Showing results for tags 'page turn'.
Hello! I'm new to gsap and I'm trying to implement this animation in my project. Is there any simpler way to do this? What I'm thinking is to make a function which makes current screen to negative transformX and reveal the image viewer under it. I'm finding it hard to implement those colored bars which follow the transition from right to left. Here's the video: https://we.tl/t-pjHc3wYqcU
I have an animation on several <divs> or pages which should simulate turning the pages of a book. However, when pages are turned from right to left, the natural order of the <divs> causes the left page to display the first page turned not the last page (as I expected). In the codepen example, I have tried to hide all of the left pages except the current one using a tweenlite.set on both the visibility property and the z-index to no avail. Other than reordering the <divs> which I do not want to do, is there a GSAP method I can use to help solve this issue? One thought I had was to change the float of the left pages to a right float but that did not sound like such a good idea. thanks, James
Using the "Simple 3-D Hover Flip" demo as a starting point, I created the linked codepen. My goal was to create a book where you can flip through the pages by clicking on them. Everything works as I would expect except turning page 1 does not reveal page 2. Any ideas on why it does not display the next <div> in the page stack? Thanks, James