scrollmagic - 使用相同的类通过 scrollmagic 在视图上制作动画

Question

我对scrollmagic很陌生，我希望在整个页面中多次使用单个类来制作动画。这可能吗？

见笔

欢迎任何指点。

$(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

要知道如何解决这个问题，您需要知道这两个框架如何对提供的多个元素做出反应（如果您提供一个解析多个元素的类，这基本上就是您所做的）。

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

Answer 2

scrollmagic triggerElement hook 动态添加新元素

$(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();
});
});