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";
}
}
);
