Run multiple tweens with one common ease function

[panych]

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 examples for this issue:

1.

See the Pen qpjCK by panych (@panych) on CodePen

2.

See the Pen aLHGy by panych (@panych) on CodePen

 

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.

 

[jamiejefferson]

Does the following match what you're after? 

See the Pen zsEAt by jamiejefferson (@jamiejefferson) on CodePen

[Rodrigo]

HI,

 

To complement Jamie's answer there is another way to achieve that, by 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.

 

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

 

Rodrigo.

[panych]

So, the trick here is to set linear ease function to all tweens in the timeline and then tween timeline itself. Cool.

 

You are amazing guys. It's actually what I have been looking for.

 

 

I've posted this question on StackOverflow, so you can post your answer there if you mind.

[Rodrigo]

You're welcome.

 

I don't know about the rest of the guys but I don't go to stack overflow to give support for the GSAP questions there, not that I'm against SO in fact I've solved many doubts myself checking there, is just that the reason for the forums is to give the best possible support, which ultimately you'll get, considering the fact that Carl and Jack are always taking a look at the issues and when it's necessary they chip in. It's official support right here by the guys that create and maintain the code, no one knows better than them.

 

Again by no means I'm stating that the quality of the answers given in SO aren't good enough, but again, for complicated issues the best source is here in the forums.

 

Also asking in the forums helps to enlarge the knowledge base that the forums are, so like that every user can benefit for having all the questions in one place in order to find the best possible answer.

 

Rodrigo.

[abernier]

Does the following match what you're after? 

See the Pen zsEAt by jamiejefferson (@jamiejefferson) on CodePen

 

Thx, I've added a case-control (with only one tween) to compare to the one with has 3 tweens: it's ok, they are in sync!

 

Here is the pen: 

See the Pen ONRwoO by abernier (@abernier) on CodePen