Search code examples
jqueryanimationgsapscrollmagic

Start two animations at the same time using Scrollmagic

I'm using Scrollmagic and GreenSock to create some animations on my page when I scroll to a certain element. I need to start multiple animations at the same time but am struggling to find out how to do so.

See here: https://codepen.io/adamboother/pen/yGVpLJ?editors=1111

I am setting my Tweens as per below:

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

However I need to animate the panels on the right hand side at the same time as the panels on the left hand side animate...so they're all in sync. Can anyone shed any light on this please?

Solution

  • Adding labels to your timeline is the key here.

    For performance, you'll want to avoid creating two separate timelines and two separate scenes for the tweens on the right and left. Instead, add the tweens for the panels on the right to your main timeline and use labels to make them simultaneous with the tweens on the left panels.

    Working Example: 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");