GSAPを使用して傾斜角でY軸の周りを回転させる

Question

HTML、CSS、GSAPを使用して本の開閉をアニメーション化しようとしています。

1. ページがに必要な開位置と閉位置にを回転させる：私は2つの問題があります。
2. ページの1つのZ-インデックスを変更する必要があります。何らかの理由で がそうではありません。 （jQueryの使用）

GIF animation of what I want it to look like

JS Fiddle showing current implementation

HTML

<div class="cover-info"> 
    <a id="main-toggle" href="#"> 
    <div class="book-container"> 
     <span class="book-page p1"></span> 
     <span class="book-page p2"></span> 
     <span class="book-page p3"></span> 
     <span class="book-page p4"></span> 
    </div> 
    </a> 
</div> 

JS

$(".cover-info").each(function(index, element) { 
    var p1 = $(".book-container .p1"); 
    var p2 = $(".book-container .p2"); 
    var p3 = $(".book-container .p3"); 
    var p4 = $(".book-container .p4"); 
    var tl = new TimelineLite({paused:true}); 
    tl 
     .to(p1, 0.25, { 
     css: { 
      rotationY: "180deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut 
     }) 
     .to(p2, 0.2, { 
     css: { 
      rotationY: "135deg", 
      skewY: "30deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut 
     }) 
     .to(p3, 0.1, { 
     css: { 
      rotationY:"45deg", 
      skewY: "-30deg", 
      z: "2", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut 
     }); 
    element.animation = tl; 
    }); 
    $(".cover-info").hover(over, out); 
    function over(){ this.animation.play() }; 
    function out(){ this.animation.reverse() }; 

Answer 1

私はそれを理解しました - rotationYをCSSではなくGSAP属性として適用します。

$(".cover-info").each(function(index, element) { 
    var p1 = $(".p1"); 
    var p2 = $(".p2"); 
    var p3 = $(".p3"); 
    var p4 = $(".p4"); 
    var tl = new TimelineLite({paused:true}); 

    tl 
     .to(p1, .2, { 
     rotationY: "180deg", 
     css: { 
      skewY: "-180deg", 
      transformOrigin:"0 100%", 
      zIndex: "2", 
     }, 
     ease: Power1.easeOut, 
     }) 
     .to(p2, .15, { 
     rotationY: "135deg", 
     css: { 
      skewY: "-135deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut, 
     }) 
     .to(p3, .05, { 
     rotationY:"45deg", 
     css: { 
      skewY: "-45deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut, 
     }); 
    element.animation = tl; 
    }); 
    $(".cover-info").hover(over, out); 
    function over(){ this.animation.play() }; 
    function out(){ this.animation.reverse() }; 
};