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

[G54P]

Hey,

Sorry to wake this thread years later, but it's exactly what I was looking for. Unfortunately the answers are outdated and `TweenMax` no longer exists.

I tried the following with the hook provided for React.js, but the easing doesn't seem to apply correctly. Also, I'm not sure the timelines are supposed to be added this way:

 

useGSAP(() => {
    const tl = gsap.timeline({
        paused: true,
        ease: "power2.inOut"
    });

    tl.add(
        tl.fromTo(
            ".logo",
            {
                transformOrigin: "center",
                y: "-500px",
                ease: "none"
            },
            {
                duration: 1,
                transformOrigin: "center",
                y: 0,
                ease: "none"
            }
        )
    );

    tl.add(
        tl.to(".logo", {
            x: "500px",
            duration: 1
        })
    );

    tl.play();
});

Edit: I realised I might not need to do `tl.add` since I used `paused: true`, but I'm wondering what both approaches would be with and without pausing it.

Any help would be greatly appreciated,

 

[Rodrigo]

Hi,

 

That goes in a defaults config object:

https://gsap.com/resources/getting-started/timelines/#timeline-defaults

const tl = gsap.timeline({
  paused: true,
  defaults: {
    ease: "power2.inOut",
  },
});

That gives every child tween in the timeline the same easing function, but that would have no effect if the individual tween has a specific easing function in it:

const tl = gsap.timeline({
  defaults: {
    ease: "power2.inOut",  // default ease for all child instances
  },
});

tl.to(elementOne, {
  x: 200, // default easing here power2.inOut
})
.to(elementOne, {
  y: 200,
  ease: "none", // specific easing function overrides the default one
});

Finally this look odd to me:

tl.add(
  tl.to(".logo", {
    x: "500px",
    duration: 1
  })
);

A to() method returns the timeline itself, so basically you're adding the timeline to itself:

https://gsap.com/docs/v3/GSAP/Timeline/to()#returns--self

 

Just use a to(), from() and fromTo() method instead of add() it makes more sense.

tl.to(".logo", {
  x: "500px",
  duration: 1
});

That in fact would use the default easing function set in the timeline's default config object.

 

Hopefully this clear things up.

Happy Tweening!

[G54P]

Hey,

Thanks for the prompt response, but I think my question wasn't fully addressed. I'm specifically looking to combine multiple tweens and apply a single ease function across them (this thread purpose), not have the same ease running one by one on each of them.

Considering `power.in` easing:

Here's how it's behaving with the same easing on each tween (not what I want):

Tween1: slow->fast
Tween2: slow->fast
Tween3: slow->fast

(I made a video illustrating the problem with a dummy animation)


What I want to achieve is the following easing:

Tween1: slowest->slow
Tween2: mediumSlow->mediumFast
Tween3: fast->fastest

I hope I explained it better.
Indeed, adding the timeline to itself was a bad idea.

[mvaneijgen]

Hi @G54P welcome to the forum!

 

Check out keyframes, withit you can define multiple steps and apply an ease over the whole duration of the steps. https://gsap.com/resources/keyframes/

 

Your demo just moves an element from left to right, so I wouldn't see a need for any GSAP feature other then the default .to() where yo move the element from 0 to lets say 100, but apply the ease that fits the animation you're after.  Check the ease visualiser if you want a visual way of creating eases. https://gsap.com/docs/v3/Eases/

 

If you still need help after this please include a minimal demo with what you've already tried.  We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! And this also wil save a lot of time back and forth because we can dive in the code directly. 

 

Hope it helps and happy tweening!