fullPage.js + GSAP Tweenmax 动画

Question

如何通过使用与 GSAP 插件集成的 fullPage.js 来实现这种website？尝试了几次，我对 jQuery 代码不是很清楚。

顺序是：

-页面加载时动画开始

-向下滚动时，动画反转将首先触发，直到完成，然后跳转到下一部分。

-动画在第二部分页面加载时开始

--向上滚动到第二段时，动画反转会先触发，直到结束，然后跳转到上一段。

--向下滚动到第二部分时，动画反转会先触发，直到完成，然后跳转到下一部分。

感谢您对此事的善意建议。

不开心的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

如果您的问题是在滚动时为元素设置动画，我建议您使用包含绝对或固定元素的空白部分，您可以使用 fullPage.js 回调（例如 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);

    },

});