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.

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. 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.

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

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.

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.

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

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.

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() );

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

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?

@bassta this is not an option in my case

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: http://codepen.io/panych/pen/zidBA 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