Scrollmagic-补间被另一个覆盖

时间:2019-10-13 21:46:57

标签: jquery scrollmagic

我将Scrollmagic插件与Tweemax一起使用,但在Chrome控制台中有警告消息:

警告:补间被另一个覆盖。要了解如何避免此问题,请参见此处:https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

我阅读了该页面,但我不理解代码中的错误。我可以帮忙吗?

    // Scene content leave
    $('.anim-leave').each(function() {

        // Build Tween goodbye
        var sayGoodbye = TweenMax.to($(this), 1, {autoAlpha:0});
        var dataOffset = 0, dataResponsive = 0;

        if (Modernizr.mq('(min-width: 992px)')) {
            var dataOffset = 20;
            var dataResponsive = 0.70;
        } else {
            var dataOffset = 200;
            var dataResponsive = '80%';
        }

        // Element sticky
        var fadeGoodbye = new ScrollMagic.Scene({
            triggerElement: this,
            offset: $(this).outerHeight() - dataOffset,
            triggerHook: dataResponsive
        })
        .setTween(sayGoodbye)
        .addTo(controller);
    });

    // Scene stagger
    $('.anim-stagger-s').each(function() {

        // Build Tween up and show
        var stagger = TweenMax.staggerFromTo($(this).find('.anim-element'), 1,
        {
            opacity: 0,
            delay: 0,
            ease: Power2.easeOut
        },
        {
            opacity: 1,
            ease: Power2.easeOut
        },
        0.2);

        var showScene = new ScrollMagic.Scene({
            triggerElement: this,
            offset: -150,
            triggerHook: 0.55,
            duration: $(this).outerHeight()
        })
        .setTween(stagger)
        .addTo(controller);
    });

    // Scene stagger
    $('.anim-stagger-v').each(function() {

        // Build Tween up and show
        var stagger = TweenMax.staggerFromTo($(this).find('.anim-element'), 1,
        {
            y: 200,
            opacity: 0,
            delay: 0,
            ease: Power2.easeOut
        },
        {
            y: 0,
            opacity: 1,
            ease: Power2.easeOut
        },
        0.2);

        var showScene = new ScrollMagic.Scene({
            triggerElement: this,
            offset: -150,
            triggerHook: 0.55,
            duration: $(this).outerHeight()
        })
        .setTween(stagger)
        .addTo(controller);
    });

    // Scene stagger
    $('.anim-stagger-h').each(function() {

        // Build Tween up and show
        var stagger = TweenMax.staggerFromTo($(this).find('.anim-element'), 1,
        {
            x: -80,
            opacity: 0,
            delay: 2,
            ease: Power2.easeOut
        },
        {
            x: 0,
            opacity: 1,
            ease: Power2.easeOut
        },
        0.5);

        var showScene = new ScrollMagic.Scene({
            triggerElement: this,
            offset: -150,
            triggerHook: 0.55,
            duration: $(this).outerHeight()
        })
        .setTween(stagger)
        .addTo(controller);
    });

0 个答案:

没有答案