1

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

http://jsfiddle.net/cubius/orcpb036/10/

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);

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

那么问题来了：如何更新场景状态，让气球始终从当前位置移动？

4

1 回答 1

0

像这样：

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/

问候，J

于 2014-09-05T15:50:08.953 回答