[Run multiple tweens with one common ease function]

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.

[Run multiple tweens with one common ease function]

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.

 

[Put timeline A in timelines B and C]

Related topic: http://forums.greensock.com/topic/8717-how-to-clonecopy-timeline

[Put timeline A in timelines B and C]

Thanks everybody.

 

Yes Carl, you're absolutely right, functions is everything for us)

 

Thanks again, hopefully this topic will be helpful to someone like me.

[How to clone/copy timeline?]

I've found a solution: use some kind of "Tween fabric"

function getMoveRight() {
    return new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100});
}

// Original timeline
var moveRight = getMoveRight();

// Child timeline, wich works like original
var moveFarRight = getMoveRight();
moveFarRight.to(el, 1, {x: 200});

moveRight.pause(); 
// moveFarRight didn't paused, so it will play

It works well for me and I've already used this trick before, but forgot about it)

 

Thanks Rodrigo and all GSAP team.

[Put timeline A in timelines B and C]

How can you put timeline into two different timelines and then have ability to play it separate as well as play "container" timelines?

 

To clear what I meaning, here is an example of 4 timelines: 2 simple, 2 combined (also interactive example available on jsFiddle):

var moveRight = new TimelineMax({paused: true})
.fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
.fromTo(box, 1, {x: 300}, {x: 0});

var moveRightLeft = new TimelineMax({paused: true})
.add(moveRight.play()) // call `play` because timeline paused 
.add(moveLeft.play());

var moveLeftRight = new TimelineMax({paused: true})
.add(moveLeft.play())
.add(moveRight.play());

In this example, when we'll try to play each timeline, only last one (moveLeftRight) will work. Why is it so? Can we somehow play any timeline?

 

This question also posted on Stackoverflow

[How to clone/copy timeline?]

Is there a way to clone timeline, so you'll be able to change it without causing original timeline?
 

// Original timeline
var moveRight = new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100});

// Child timeline, wich works like original
var moveFarRight = moveRight.clone();
moveFarRight.to(el, 1, {x: 200});

moveRight.pause(); 
// moveFarRight didn't paused, so it will play

 
It's a little bit looks like classes and inheritence in OOP: basic timeline, child timeline.

[Seek method vs {paused: true}]

In this situation I've found two usefull workflows:

 

1. Create small timelines and then put them into main paused timeline. 

Limitation: you can't free add or remove child timelines - it will cause autoplaying.

var childTl1 = new TimelineMax();
childTl1.to(elem, 1, {top: -100});

var childTl2 = new TimelineMax();
childTl2.to(elem2, 1, {top: 300});


var mainTl = new TimelineMax({paused: true});
mainTl.add( childTl1 );
mainTl.add( childTl2 );

2. Create small timelines with `{paused: true}` and call `play` method when will putting them into main timeline.

var childTl1 = new TimelineMax({paused: true});
childTl1.to(elem, 1, {top: -100});

var childTl2 = new TimelineMax({paused: true});
childTl2.to(elem2, 1, {top: 300});


var mainTl = new TimelineMax({paused: true});
mainTl.add( childTl1.play() );
mainTl.add( childTl2.play() );

[Seek method vs {paused: true}]

Appreciate for your deep explanation, its very helpful. Now that behavior is clear for me. 

 

I work on presentation, which progress fully depends on scrolling, so I find only a `seek` method useful, that's why I ignored advises from @bassta (thank you anyway). Some results you can find here: http://deploy1.teobit.ru/  (I will update link when will finish project).

 

Thanks

[Seek method vs {paused: true}]

The only way to control main timeline is a `seek` method in my case. So it's not an option. 

 

I would like to know is this a feature or bug. If you can use `seek` when timeline paused, why you can't use it if this timeline is a part of another?

[Seek method vs {paused: true}]

@bassta this is not an option in my case

[Seek method vs {paused: true}]

Hello,
 
I have a main timeline, which is paused and controlled by `seek` method. And I have a tons of small timelines, which I want easily add or remove from main timeline. If you create some timeline, but don't place it in main timeline with `{paused: true}`, it will auto play. To prevent this, I decide to set `paused: true` for each small animation. But in this case `seek` method doesn't work. 
 
Example: 

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

If you remove `{paused: true}` from childTl1 everything will work as I need.
 
I find one way to solve this: use `play` method for each paused animation, which placed into main timeline.
 
Is there something better or maybe another way to achieve needed result?
 
Thanks