scrollmagic - 使用相同的类在带有 scrollmagic 的 View 上设置动画

Question

我对 scrollmagic 很陌生，我希望在整个页面中多次使用单个类来在它进入 View 时进行动画处理。
这可能吗？

see pen

欢迎任何指点。

$(function() {
    controller = new ScrollMagic();
    var tween5 = TweenMax.to(".animate", 0.5,{scale: 1.02,
    backgroundColor: 'rgb(255, 39, 46)'
    });
    var scene5 = new ScrollScene({
            duration: 200,
            triggerElement: ".animate",
            triggerHook: "onCenter",
        })
        .setTween(tween5)
        .addTo(controller);

      scene5.addIndicators();
});

Answer 1

要知道如何解决这个问题，您需要知道这两个框架如何对提供的多个元素使用react(如果您提供一个解析为多个元素的类，这基本上就是您所做的)。

TweenMax 会同时为所有元素设置动画，而 ScrollMagic 每个场景只能有一个触发元素(因为每个场景只能有一个开始和结束)，这就是为什么它会使用匹配集合的第一个元素。

所以从逻辑上讲，只要第一个元素通过触发器，上面的代码就会使所有元素都被动画化。

要解决这个问题，您必须为每个元素定义一个场景:

$(function() {
    controller = new ScrollMagic();
    $(".animate").each(function (index, elem) {
        var tween = TweenMax.to(elem, 0.5,
                               {scale: 1.02, backgroundColor: 'rgb(255, 39, 46)' }
                    );
        new ScrollScene({
                duration: 200,
                triggerElement: elem,
                triggerHook: "onCenter",
            })
            .setTween(tween)
            .addTo(controller)
            .addIndicators();
    });
});

更新笔:http://codepen.io/janpaepke/pen/JoygRd