ScrollMagic 和 TweenMax 自动执行

Question

嘿，我一直在努力解决所有这些问题，整天都在玩弄它。我想要完成的是在用户向下滚动时放大背景图像（并最终通过不透明度变得透明）。我已经达到了预期效果的一半，但它似乎不想在用户滚动时起作用，它只是自动执行。

这一定很简单，但我对此很陌生。

这是我写的代码

    var tween = TweenMax.to('#regular', 0.5, {
    scale: 2
    });

    // Init Controller
    var controller = new ScrollMagic.Controller();


    // Create the Scene and trigger when visible with ScrollMagic
    var scene = new ScrollMagic.Scene({
    triggerElement: '#featured-image',
    reverse: true,
    offset: 700
    })
    .setTween(tween)
    .addTo(controller)

http://codepen.io/anon/pen/EjWLyO

Answer 1

您的基本问题是场景的 setTween 方法不可用，这是因为您在使用 TweenMax 与 ScrollMagic.

所以在你的 ScrollMagic include 之后添加 this external javascript 你就是金子了。

Answer 2

我有类似的问题，尽管我使用的是上述 javascript 解决方案。对于我的具体情况，我找到了此处描述的解决方案：

https://greensock.com/forums/topic/16014-staggerfrom-always-runs-on-page-load-not-on-scroll-magic-event/

在每个补间设置参数：immediateRender : false

我也是运行一个TweenMax调用，在所有场景初始化之后设置初始参数。

ScrollMagic 和 TweenMax 自动执行

ScrollMagic and TweenMax Automatically executes

javascript

gsap

scrollmagic