GSAP壊れたタイムライン

Question

私のコードでいくつかの基本的な間違いをしています、私のcodepenを見てください。結果のタイトル/サブタイトルには空の穴と最後の2つの終了リンクが表示されます。しかし私は、.js-main-boxiesや隠れたdivをクラス.js-cta-form1と.js-cta-form2と呼ぶいくつかのフォーム/マーケティングのものを見たいと思っていました。私のタイムラインはデフォルトで一時停止されているので、壊れたバージョンが表示され、正しく表示されないのはなぜですか？ペンはCSSがないので、問題はそれにはありません。タイムラインを削除すると、tlMeetingFormCloseとtlOnlineFormCloseは機能しますが、もちろん閉じる関数はありません。

「フォーム1クローズ」をクリックすると、「クリック1」をクリックすると「フォーム1クローズ」をクリックする可能性が見えますが、機能していません。すべてのヘルプやアドバイス感謝THX

mycodepen 問題のタイムライン

tlMeetingFormClose and tlOnlineFormClose 

Answer 1

それはあなたのコードの小さな問題でした。タイムラインでfromToを使用すると、from値が要素に与えられます。だからあなたが言うとき：

tlMeetingFormClose 
     .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut }); 

    tlOnlineFormClose 
     .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut }); 

その後、greensockがautoAlpha 0とmainBoxiesにxpercent -50適用されます。 このタイムラインは、メインボックスが既に閉じられている場合にのみ実行されるため、Toを使用して、最終的な位置を指定する必要があります。

次のように書くと、すべてうまく動作します。

tlMeetingFormClose 
     .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut }); 

    tlOnlineFormClose 
     .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut }); 

最終的な結果が期待どおりであることを願っています。そうでない場合は、私に知らせてください。