Altering offset during animation

[AllTheTime]

Hi, I have a simple question:
 
Is there a way to alter the offset during animation?

 t1.to(contain, 1, {left:"-100%"},"+=4", "one")

So in this case... to make "+=4" turn into "+=0"

[GreenSock]

I'm a little confused about why you'd want to do that, but yes, it's possible. Every tween has a startTime which you can change if you want:

var tween = TweenLite.to(contain, 1, {left:"-100%"});
tl.add(tween, "+=4");

//then later...
tween.startTime( tween.startTime() - 4 );

But again, this sounds more like an architecture problem in the way you're approaching your animations (but maybe not). 

[AllTheTime]

I have this; a simple slider:

t1.to(contain, 1, {left:"-100%"},"+=4", "one")
  .to(contain, 1, {left:"-200%"},"+=4", "two")
  .to(contain, 1, {left:"-300%"},"+=4", "three")
  .to(contain, 1, {left:"-400%"},"+=4", "four");

I want it to turn into this when there is keyboard or mouse input so that I can tweenTo the destination smoothly (without the static parts)...

t1.to(contain, 1, {left:"-100%"})
 .to(contain, 1, {left:"-200%"})
 .to(contain, 1, {left:"-300%"})
 .to(contain, 1, {left:"-400%"})

I have attempted using two separate animations and switching between them but synchronizing them is a little clunky and I'm hoping there is a simpler way.

[Rodrigo]

Perhaps you could get the specific label time and tween the timeline's time property to that specific point:

var t1 = new TimelineLite(),
    oneTime,
    twoTime,
    threeTime,
    fourTime;

t1.to(contain, 1, {left:"-100%"},"+=4", "one")
  .to(contain, 1, {left:"-200%"},"+=4", "two")
  .to(contain, 1, {left:"-300%"},"+=4", "three")
  .to(contain, 1, {left:"-400%"},"+=4", "four");

// now get the time of each label
oneTime = getLabelTime("one");
twoTime = getLabelTime("two");
threeTime = getLabelTime("three");
fourTime = getLabelTime("four");

// finally tween the timeline's time to that specific point
// in this case the label named three
TweenLite.to(t1, 1, {time:threeTime});

Another option is use getLabelsArray(), but that's a TimelineMax method, so you'll have to include that file in your app. This method returns an array with all the labels and their specific time in the timeline:

var t1 = new TimelineLite(),
    labelsArray;

t1.to(contain, 1, {left:"-100%"},"+=4", "one")
  .to(contain, 1, {left:"-200%"},"+=4", "two")
  .to(contain, 1, {left:"-300%"},"+=4", "three")
  .to(contain, 1, {left:"-400%"},"+=4", "four");

labelsArray = t1.getLabelsArray();

// now tween the timeline's time to the third label position
TweenLite.to(t1, 1, {time:labelsArray[2].time}); 

You have to consider the fact that an element's index position in an array starts at 0, so the first element has a 0 position and the fourth element is at position number 3, that's why the third label's time is at position 2.

 

Rodrigo.

[GreenSock]

Rodrigo's concept could work nicely if you just build a 2nd timeline that animates the playhead of the original timeline in such a way that it skips over those gaps. Kinda like:

var noGaps = new TimelineLite();
noGaps.fromTo(tl, 1, {time:0}, {time:1})
  .fromTo(tl, 1, {time:5}, {time:6})
  .fromTo(tl, 1, {time:10}, {time:11})
  .fromTo(tl, 1, {time:15}, {time:16});

You could use the getLabelTime() if that helps too. 

 

I hope the concept makes sense.