Question

当我滚动到某个元素时，我正在使用Scrollmagic和GreenSock在页面上创建一些动画。我需要同时启动多个动画，但正在努力寻找方法。

参见此处：https://codepen.io/adamboother/pen/yGVpLJ?editors=1111

我正在按照以下步骤设置补间：

var tweens = new TimelineMax()
    .add(TweenMax.to("#left-panel-2", 1, {transform: "translateY(0)"}))
    .add(TweenMax.to("#left-panel-3", 1, {transform: "translateY(0)"}))
    .add(TweenMax.to("#left-panel-4", 1, {transform: "translateY(0)"}))
    .add(TweenMax.to("#left-panel-5", 1, {transform: "translateY(0)"}));

但是，我需要同时对右侧的面板进行动画处理，而左侧的面板也要进行动画处理...因此它们都是同步的。谁能对此有所启示？

Answer 1

在此处向时间轴添加标签是关键。

出于性能考虑，您将避免为左右补间创建两个单独的时间轴和两个单独的场景。而是将右侧面板的补间添加到主时间轴，并使用标签使其与左侧面板上的补间同时显示。

工作示例： https://codepen.io/weft_digital/pen/bOBxgN?editors=1011

var tweens = new TimelineMax()
.add(TweenMax.to("#left-panel-2", 1, {transform: "translateY(0)"}),"first")
.add(TweenMax.to("#right-panel-2", 1, {transform: "translateY(0)"}),"first")
.add(TweenMax.to("#left-panel-3", 1, {transform: "translateY(0)"}), "second")
.add(TweenMax.to("#right-panel-3", 1, {transform: "translateY(0)"}), "second")
.add(TweenMax.to("#left-panel-4", 1, {transform: "translateY(0)"}), "third")
.add(TweenMax.to("#right-panel-4", 1, {transform: "translateY(0)"}), "third")
.add(TweenMax.to("#left-panel-5", 1, {transform: "translateY(0)"}), "fourth")
.add(TweenMax.to("#right-panel-5", 1, {transform: "translateY(0)"}), "fourth");

使用Scrollmagic同时开始两个动画

1 个答案: