Jump to content
Search Community

Put timeline A in timelines B and C

panych test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi,

 

Basically this is a overwrite conflict, while the first two timeline's can coexist without any trouble, but from the moment you add them to a third timeline they are subject to that timelne's playhead  and so are their targets. Also since you have two parent timelines the parent that's created at the end "moveLeftRight" in this case, overwrites all other timelines considering the fact that all timelines affect the same target and the same property "X". If you use this:

// Declare timelines
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())
    .add(moveLeft.play());

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

The moveRightLeft code works but you get odd results with the individual buttons.

 

A solution is to create the master timelines on the button events, like that you avoid such conflicts by creating all the timelines as global variables:

// Declare timelines
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});

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
    var moveRightLeft = new TimelineMax()
    .add(moveRight)
    .add(moveLeft);
}

window.moveLeftRight = function()
{
   var moveLeftRight = new TimelineMax()
    .add(moveLeft)
    .add(moveRight);
}

Another choice is use just one parent timeline and use play(0) and reverse(0), like this:

// Declare timelines
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)
    .add(moveLeft);

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
   moveRightLeft.play(0);
}

window.moveLeftRight = function()
{
    moveRightLeft.reverse(0);
}

I've updated your fiddle:

http://jsfiddle.net/Zde5U/8/

 

The issue is that if you create two timelines and then add those timelines into another one, which timeline has the control?, it would be quite a mess if a nested timeline could control the playhead of it's parent  timeline, what if the parent has 4 nested timelines and each one of those try to control the parent's playhead?, it's an animation chaos.

 

Rodrigo.

Link to comment
Share on other sites

The core issue here is that you can not place any timeline or tween in multiple parents.

An Animation (tween or timeline) can only have one parent.

 

From the docs:

Every animation is placed onto a timeline (the root timeline by default) and can only have one parent. An instance cannot exist in multiple timelines at once.

 

http://api.greensock.com/js/com/greensock/core/Animation.html#timeline

 

In your case it sounds like instead of pre-creating all the timelines, you should just create functions that generate timelines and then you call those functions when you need a particular effect.

  • Like 1
Link to comment
Share on other sites

[i know this is solved, but I wanted to post this in case it helps someone else who is searching the forums...]

 

Carl is correct - any tween or timeline can only have ONE parent timeline, but there's also a tricky way you can accomplish something like placing a timeline into multiple other timeline. Just pause() your original timeline, and then place tweens of that timeline's time into any other timeline. For example:

var tl = new TimelineMax();
tl.to(...); //populate it however you want...
tl.pause();

var master1 = new TimelineMax();
var master2 = new TimelineMax();

master1.add( tl.tweenFromTo(0, tl.duration()) );
master2.add( tl.tweenFromTo(0, tl.duration()) );

Remember, the TimelineMax's tweenFromTo() returns a TweenLite instance. It's just a slick way to move the timleine's playhead using a tween. Move it from any spot to any other spot (time, label, whatever). 

 

Enjoy!

...

  • Like 3
Link to comment
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.
×
×
  • Create New...