Javascript 滚动触发Tweenlite/Tweenmax的连续动画

我正在使用tweenlite/tweenmax在html文件中制作动画。我想根据滚动位置触发动画，如www.onlycoin.com。但是，在我的示例中，在我做了第一个动画之后，我不知道如何在一个想象上做第二个动画，我正在尝试将图像向左移动，然后再向右移动。你知道怎么做吗？以下是我所拥有的：

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

任何帮助都会很棒。

onComplete的特殊属性接受函数。。从

onComplete:Function-当tween完成时应该调用的函数

因此，您必须创建如下匿名函数：

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

或者，您必须将tween放入一个函数中，并让第一个tween的onComplete回调引用一个函数

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

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

您基本上是为onComplete回调添加tween，而不是预期的函数

结帐