首页 > 解决方案 > 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);
    });

标签: jqueryscrollmagic

解决方案


推荐阅读