A tween with pauses in between steps?

[jiggy1965]

I'm trying to discover is there is a more efficient way of doing what I want. I've got an div 1200 px wide and I want to tween that right to left in steps of 300 with an easeBack. So first it tweens 300 to the left with an easeBack, then it should stop 1,5 seconds, than continue to tween to the left 300 again, stop 1,5 seconds, tween 300 px further etc.

 

I could of course add 4 lines of tween code and make it tween 300 pixels in all 4 lines, but perhaps there is a way of putting all of that in one line? Sort of like 'tween 1200 px to the left, but every 300 pixels wait for 1,5 minute'? I think a steppingEase wouldn't work since I wish to have an easeBack throughout?

 

Basically I now have this:

 

tl.to('.products', 3, {left:-300, ease:Expo.easeOut}, "start+=4");
tl.to('.products', 3, {left:-600, ease:Expo.easeOut}, "start+=7");
tl.to('.products', 3, {left:-900, ease:Expo.easeOut}, "start+=10");

 

But I would like to know if something like that could be but in one line. Something like this:

 

tl.to('.products', 3, {left:"+=-300", ease:Expo.easeOut, repeat:3, repeatDelay:3}, "start+=4");

 

But without the 'repeat' of course. It should first move 300 to the left from whatever its current position is, then have a delay of 3, then continue 300 more from its current position (which would now be -300), wait 3 seconds again etc.

[Carl]

Hi, 

 

A tween can only have 1 ease, 1 set of start values and one set of end values. What you describe requires 3 tweens.

If your sole purpose is to reduce the amount of code you write you could use a loop to create tweens for the timleine. 

[jiggy1965]

Ok, my goal was indeed to reduce the amount of code. In instances where I would for example have 20 similar lines and wanted to reduce that. But that wouldn't be possible? Or could I reduce the number of lines somehow by putting it between a for-loop somehow? Take this example

 

See the Pen vJoxdq by anon (@anon) on CodePen

 

There are 5 lines of tween code here. Could that be put between a loop somehow? Where it reads the position of 'logo', adds 100px to the right, pauze for 2 seconds, returns to the beginning of the loop, reads the current position of 'logo' again etc. In some kind of 5 step for-loop if you know what I mean.

 

 

[GreenSock]

Sure, this is a great case for a function that'd let you parameterize stuff however you want. For example: 

function hops(target, iterations) {
  var tl = new TimelineLite();
  for (var i = 0; i < iterations; i++) {
    tl.to(target, 0.75, {left:"+=100", ease:Back.easeOut.config(4)}, 2 * i)
  }
  return tl;
}
hops("#logo", 5);

 

Notice you can use relative values, like left:"+=100" so that each time it's jumping ahead 100 from whatever it is when that tween starts. 

 

Does that help? 

[jiggy1965]

Yes, that's indeed what I was looking for. I just happened to found out a similar way using a for-loop:

See the Pen rzXmVq by anon (@anon) on CodePen

But that function of yours is even better. Thank you very much!