Run multiple tweens with one common ease function (GSAP)

Question

Can I combine multiple tweens and run them with one ease function? Something like this:

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax({ease:Power2.easeOut})
    .add(tw1)
    .add(tw2)
    .add(tw3);

I've made sandbox example for this issue: http://codepen.io/panych/pen/qpjCK
So how to make move the box with common easing?

UPD

New sandboxes:

1. http://codepen.io/panych/pen/qpjCK
2. http://codepen.io/panych/pen/aLHGy

We need to make to move the box from the first example with one common easing function, as it has been shown in the second example, but without removing middle tweens.

Answer 1

One way to do it is tweening the timeline's progress value, like this:

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax()
.add(tw1)
.add(tw2)
.add(tw3);

TweenLite.to(tl, tl.duration, {progress:1, ease:Power2.easeOut});

Also the add() method allows you to add an array of tweens and then pass the alignment as a string, like this:

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax()
.add([tw1,tw2,tw3], 'sequence');

Like that the tweens in the array play one after the other.

Also you can tween the time property of the timeline like Jamie Jefferson illustrated in this codepen:

http://codepen.io/jamiejefferson/pen/zsEAt

Take a look at the add() method which has an amazing range of uses.

Rodrigo.

EDIT: I forgot to add the position parameter in the add() method. This method accepts a position parameter and an alignment parameter, and since both are strings it's mandatory to include both.

So the code looks like this:

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax()
.add([tw1,tw2,tw3], '+=0', 'sequence');

With the +=0, we're telling GSAP to include all those elements, in sequence, at the end of the timeline.

Answer 2

Use only one tween (the final destination) and if pass through points are required use the BezierPlugin to add them.

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html#bezierThrough();