1
私はGSAPを使ってエンベロープアニメーションを行っていますが、かなりの問題に直面していましたが、オンラインで多くのヘルプを見つけることができませんでした。アニメーションとGSAP
私は、1）エンベロープの正面からエンベロープの背面まで回転し、2）フラップを開き、3）エンベロープから文字が出てくるようにしています。
現在、私は現在3段階目ですが、 "z-indexのように見えます"という問題に苦しんでいますが、Z-indexのためかどうかはわかりません。どういうわけか、私はフラップの上にオーバーレイする手紙を手に入れることができませんでした。
以下は私GSAPコードです：私はcodepenで作成した
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);
});
：https://codepen.io/Dr3am3rz/pen/EgdPOX
は、あなたたちは私を助けることができます願っています。
ありがとうございます。