Issue animating page turn

[hackfin]

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

[Diaco]

Hi hackfin 

 

u can change zIndex and Z translation simply with this method :

$(".page").click(
function() {
	if (pageLocation[this.id] == undefined || pageLocation[this.id] =="right") {
		var $Zz = ($(".left").length)+1 ;
		TweenMax.to($(this), 1, {force3D:true,rotationY:-180,className:'+=left',z:$Zz,zIndex:$Zz}); 
		TweenLite.set($(this), {className:'-=right'}); 
		pageLocation[this.id]= "left";
	}
	else {
		var $Zz = ($(".right").length)+1 ;
		TweenMax.to($(this), 1, {force3D:true,rotationY:0,className:'+=right',z:$Zz,zIndex:$Zz});
		TweenLite.set($(this), {className:'-=left'}); 
		pageLocation[this.id]= "right";
	}
}
);

[hackfin]

That did the trick.  Thanks a bundle.

[squizeers]

How can I make page 2 go right to left.

I want to make to so that it looks like tri-fold brochure.

I did following. Didnt work. I will much appreciate your help.

// All pages must have an id assigned to them in the HTML
$("#page1").click(
    function() {
      if (pageLocation[this.id] === undefined || pageLocation[this.id] =="right") {
        $Zz = ($(".left").length)+1 ;
        TweenMax.to($(this), 1, {force3D:true,rotationY:-180,transformOrigin:"-1px top",className:'+=left',z:$Zz,zIndex:$Zz}); 
        TweenLite.set($(this), {className:'-=right'}); 
        pageLocation[this.id]= "left";
      }
      else {
        $Zz = ($(".right").length)+1 ;
        TweenMax.to($(this), 1, {force3D:true,rotationY:0,transformOrigin:"left top",className:'+=right',z:$Zz,zIndex:$Zz});
        TweenLite.set($(this), {className:'-=left'}); 
        pageLocation[this.id]= "right";
      }
    }
);

$("#page2").click(
    function() {
      if (pageLocation[this.id] === undefined || pageLocation[this.id] =="left") {
        $Zz = ($(".right").length)+1 ;
        TweenMax.to($(this), 1, {force3D:true,rotationY:0,transformOrigin:"-1px top",className:'+=right',z:$Zz,zIndex:$Zz}); 
        TweenLite.set($(this), {className:'-=left'}); 
        pageLocation[this.id]= "right";
      }
      else {
        $Zz = ($(".left").length)+1 ;
        TweenMax.to($(this), 1, {force3D:true,rotationY:-180,transformOrigin:"right top",className:'+=left',z:$Zz,zIndex:$Zz});
        TweenLite.set($(this), {className:'-=right'}); 
        pageLocation[this.id]= "left";
      }
    }
);