GSAP Tweenliteトゥイーンは、私がGSAPとアニメーションバナーを構築してい

Question

容易ではないだろう、基本的なアニメーションが正常に動作しますがトゥイーンは容易ではないだろうとバウンスのような更なる安心・ステートメントを追加する際に完全に機能を停止します。

私はこのコードを使用してすべてのものをアニメーション化しています。

<script type="text/javascript" src="js/TweenLite.min.js"></script> 
<script type="text/javascript" src="js/CSSPlugin.min.js"></script> 
    <script> 
     window.onload = function(){ 
      var logo = document.getElementById("logo"); 

      TweenLite.to("#logo", 1, {left:"90px"}); 
      TweenLite.from("#container", 0.50, {left:"-400px",opacity:0,delay:1}); 
      TweenLite.from("#control", 1, {scale:0,opacity:0,delay:2}); 
      TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,}); 
     } 
    </script> 

私に何かが不足していますか？その悔しさを私に伝えます。

Answer 1

私は2つの問題を参照してください。バウンスしやすさは、コアTweenLiteファイルではありません）

//BAD: 
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,}); 

//GOOD: 
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut}); 

2 - あなたはEasePackをロードするか必要があります：あなたのしやすさの後に余分なコンマがあります

1） TweenMax（TweenLite、CSSPlugin、EasePack、その他のものが含まれています）。ファイルサイズが心配な場合は、TweenMaxはすべての主要広告ネットワーク（ファイルサイズが無料であることを意味する）でホワイトリストに登録されているため、ウェブ全体で最も広くキャッシュされているファイルなので、問題はありません。

リトルヒント：あなたがTimelineLiteまたはTimelineMaxツール（GSAPのも一部を）試していない場合は、あなたが特に広告のためにそれらを好きになります。時間と実験を管理し、作業中にアニメーションのさまざまな部分をスキップするのがずっと簡単になります。あなたのコードはあまりにも彼らとより簡潔可能性：

window.onload = function(){ 
    var tl = new TimelineLite(); 
    tl.to("#logo", 1, {left:90}) 
     .from("#container", 0.5, {left:-400, opacity:0}) 
     .from("#control", 1, {scale:0, opacity:0}, "+=0.5") 
     .from("#cta", 0.15, {scale:0, opacity:0, ease: Bounce.easeOut}, "+=1.5"); 
} 

今、あなたは、個々のアニメーションのいずれかのタイミングを微調整することができ、変更は残りの部分にダウンカスケードます。最初のトゥイーンを0.5秒長くする必要がある場合と同様に、後続のトゥイーンのすべての「遅延」値を編集する必要はありません。さらに、一時停止（）、シーク（）、逆方向（）、timeScale（）、または任意の操作が可能なTimelineLiteオブジェクトが1つあります。ワークフローには全く新しい可能性があります。

はあなたが興味があります https://greensock.com/position-parameter https://greensock.com/sequence-video

またGSAP固有の質問を助けることに専念していますhttps://greensock.com/forumsのフォーラムに大きなコミュニティがあります覚えておいてください。

ハッピートゥイーン！