動畫與GSAP

Question

我正在使用GSAP做信封動畫，一直面臨很多問題，但無法在網上找到很多幫助。

我想製作一些動畫1）從信封的正面旋轉到信封的背面，2）打開翻蓋和3）從信封發出的信件。

目前我現在正在步驟3上，正在努力處理「看起來像z-index」的問題，但我不確定是否因爲z-index。不知何故，我無法將信封蓋在翻蓋開口的頂部。

下面是我GSAP代碼：

var tl = new TimelineMax(); 

var $container = $(".container"), 
    $envelope = $(".envelope"), 
    $envFront = $(".front"), 
    $envBack = $(".back"), 
    $topFlap = $(".top"), 
    $card = $(".card"); 

tl.set($container, {perspective:1100}) 
    .set($envelope, {transformStyle:"preserve-3d"}) 
    .set($envBack, {rotationY:-180}) 
    .set([$envBack, $envFront], {backfaceVisibility:"hidden"}) 
    .set([$envBack, $envFront, $card], {scale: 0.6}) 
    .set($topFlap, {transformOrigin: "center top"}); 


$container.click(function(){ 
    tl.to($envelope, 1, {rotationY: 180}) 
     .to($topFlap, 1, {rotationX: 180, z: 0}) 
     .to($card, 1, {top: -50, opacity: 1}, 1); 
}); 

我在codepen創建：https://codepen.io/Dr3am3rz/pen/EgdPOX

希望你們能幫助我。

在此先感謝。

Answer 1

無論如何，我已經解決了我的問題。

錯過了時間線中的一條線來更改z-index。