Question

我使用ScrollMagic来固定和触发动画。在我的项目中，我希望根据滚动方向触发不同的动画。这是该项目的代表：

var scene = new ScrollScene({
    offset: 200,
    duration: 0
})
    .on("start", function (e) {
    if (e.scrollDirection === "FORWARD") {
        moveOutTimeline.stop();
        moveInTimeline.play(0);
    } else {
        moveInTimeline.stop();
        moveOutTimeline.play(0);
    }
}).addTo(controller);

首先向下滚动，观察气球向右移动。然后向上滚动并观察气球向左移动:)然后再次向下滚动并期望气球从其当前位置向右移动，但不是这样做，而是第一次捕捉到中心。动画会忽略当前的状态。

所以问题是：如何更新场景状态并使气球始终从其当前位置移动？

Answer 1

像这样：

new ScrollScene({triggerElement: "div.square.good"})
    .on("enter", function () {
        TweenMax.to("div.square.good", 1, {left: "90%", ease: Bounce.easeOut})
    })
    .on("leave", function () {
        TweenMax.to("div.square.good", 1, {left: "0%", ease: Bounce.easeOut})
    })
    .addTo(ctrl);

小提琴：http://jsfiddle.net/xd2dkode/5/

的问候， Ĵ

ScrollMagic：更新场景状态

1 个答案: