Successive Animations with Tweenlite/Tweenmax triggered on scroll

Question

I am using tweenlite/tweenmax to do animations in an html file. I want to trigger animations based on scroll position (like www.onlycoin.com). However, I cannot figure out how to do a second animation on one imagine after I do the first one (in my example, I am trying to move an image left and then move it back right). Any idea how to do this? Here is what I have:

var controller = $.superscrollorama(),
  handleComplete = function(elem) {
    console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};

var likeAnimations = new TimelineLite();
var likeReverse = new TimelineLite();

controller.addTween($('#one'),
  likeAnimations.append([
    TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
      onComplete:
      TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}})
  ])
})
]),
300,
400);

Any help would be awesome.

Answer 1

The special property onComplete accepts a function.. from the TweenMax Docs

onComplete : Function - A function that should be called when the tween has completed

so you would have to either make an anonymous function like this:

TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
     onComplete: function(){
          TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
     }
});

or you will have to put your tween inside a function, and have your first tween's onComplete callback reference a function.

myFunction() {
     TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}

TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
     onComplete: myFunction
});

You are basically adding the tween for the onComplete callback, instead of the expected function.

Checkout the GreenSock TweenMax Docs