使用 Scrollmagic 同时启动两个动画

Question

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

看这里：https://codepen.io/adamboother/pen/yGVpLJ?editors=1111

我正在按照以下方式设置我的 Tweens：

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 同时启动两个动画

Start two animations at the same time using Scrollmagic

jquery

animation

scrollmagic

gsap