Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
panych

Run multiple tweens with one common ease function

Recommended Posts

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.

 

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×