fullPage.js + GSAP Tweenmax Animation

Question

GSAPプラグインと統合されたfullPage.jsを利用して、この種のwebsiteをどのように達成できますか？数回試してみましたが、jQueryコードではあまり明確ではありません。

シーケンスは次のようになります。

は、ページのロードに

-Whenスクロールダウン開始-animation、アニメーション逆は次のセクションへのジャンプによって従って、仕上げまで、第1トリガーされます。

第二セクションに第二セクションページの読み込みに

--Whenスクロールを起動-animation、アニメーション逆は最初にトリガーされます仕上げまで、前のセクションにジャンプすることによって従ってください。

- 第2セクションを下にスクロールすると、アニメーションの反転が最初に完了してから次のセクションにジャンプします。

この問題についてご親切にお礼申し上げます。

不幸なreproduction demo。あなたの問題は、スクロールの要素をアニメーション化されている場合は

var head = $("#one h1"), 
    head2 = $("#two h1"); 

tl = new TimelineLite(); 

$("#reverse").click(function(){tl.reverse();}); 

$("#restart").click(function(){tl.restart();}); 

$('#fullpage').fullpage({ 
    sectionsColor: ['darkgrey', 'grey', 'lightgrey'], 
    scrollingSpeed: 1000, 
    afterLoad: function(anchorLink, index) { 

    var loadedSection = $(this); 

    if (index == 1) { 
     $(head2).hide(); 
     tl.staggerFrom(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5) 
    } 

    if (index == 2) { 
     tl.staggerFrom(head2, 0.2, {scale: 0,autoAlpha: 0}, 0.5) 
    } 

    }, 
    onLeave: function(index, nextIndex, direction) { 

    var leavingSection = $(this); 

    if (index == 1 && direction == 'down') { 
     //tl.reverse(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5); 
     $(head2).show(); 
    } else if (index == 2 && direction == 'up') { 
     $(head2).hide(); 
     //tl.restart(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5); 
    } 

    } 
}); 

Answer 1

、私はあなたがそのようなafterLoadとしてfullPage.jsコールバックを使用することにより、望むようにあなたが表示または非表示にすることができます絶対または固定要素を持つ空のセクションを持っていることをお勧めします。

Demo online

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'yellow', 'yellow', 'yellow'], 
    scrollOverflow:true, 

    //events 
    afterLoad: function(anchorLink, index){ 
     $('.element').removeClass('active'); 
     $('.element' + index).removeClass('hidden').addClass('active'); 
    }, 
    onLeave: function(index, nextIndex, direction){ 
     $('.element').addClass('hidden'); 
     setTimeout(function(){ 
      $('.element').addClass('hidden'); 
     },700); 

    }, 

});