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