fullPage.js + GSAP Tweenmax Animation

Question

Comment puis-je obtenir ce type de website, en utilisant fullPage.js intégré avec les plugins GSAP? J'ai essayé plusieurs fois et je ne suis pas très clair avec le code jQuery.

La séquence sera:

-animation commencent à la page charge

-Lorsque défiler vers le bas, l'animation inverse déclenchera un premier temps jusqu'à la fin, puis suivre par saut à la section suivante.

-animation début de la deuxième section chargement de la page

--Quand défilement vers le haut sur la deuxième section, d'animation inverse déclenchera un premier temps jusqu'à la fin, puis suivre par saut à la section précédente. - Lorsque vous faites défiler vers le bas sur la deuxième section, l'animation inverse se déclenchera d'abord jusqu'à la fin, puis suivra en sautant à la section suivante.

Appréciez vos bons conseils à ce sujet.

Les mécontents 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

Si votre problème anime des éléments sur parchemin, je vous encourage à avoir des sections vides avec des éléments absolus ou fixes que vous pouvez afficher ou masquer que vous le souhaitez à l'aide d'un rappel fullPage.js tel que afterLoad.

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); 

    }, 

});