Successive animations for a single image

[rafil]

I have an image. I want to move it to the left until a certain scroll position, then move it back right. How do I do this? What I have doesn't seem to be working. This is what I have:

 

  var controller = $.superscrollorama(),

  handleComplete = function(elem) {

    console.log('complete', elem);

    $('#'+elem).css('rotation', 0);

  };

  

  controller.addTween($('#one'),

    (new TimelineLite())

      .append([

        TweenMax.to($('#likeSong'), .5, {css:{left: "45px"}}),

        TweenMax.to($('#likeSong'), .5, {css:{left: "45px"}})

      ]),

        500, // scroll duration of tween in pixels

        500); // offset (helps with timing when needed)

[jamiejefferson]

Both of your tweens are identical (both to left:45), so you aren't going to see anything happen during the second one (it will be tweening from 45 to 45...).

 

e.g. let's say likeSong starts at 100px, you could do one of these:

// ABSOLUTE
TweenMax.to($('#likeSong'), .5, {left: "45px"}),
TweenMax.to($('#likeSong'), .5, {left: "100px"})

// RELATIVE
TweenMax.to($('#likeSong'), .5, {left: "-=55px"}),
TweenMax.to($('#likeSong'), .5, {left: "+=55px"})