Reverse a child timeline of a modular timeline independently

[Mondula]

Hi,

 

is there a way to reverse a TimelineLite instance nested in another TimelineLite instance independently of the master timeline?

 

To illustrate:

var master = new TimelineLite({paused: true});

var a = new TimelineLite();
var b = new TimelineLite({paused: true});
var c = new TimelimeLite();

master
    .add(a)
    .add(b.play())
    .add(c);

master.restart();

// ... later

b.reverse() // <- this does not seem to work

Thanks. Any help is appreciated.

[GreenSock]

Hm. Seems to work fine for me: 

http://codepen.io/anon/pen/evazBz?editors=0010

 

You did have a typo in your code ("m" instead of "n" in TimelineLite).

 

Am I missing something? 

[Mondula]

Thanks. So this should work. Could this be different if I use the SplitText plugin for the timeline I want to reverse?

 

Thanks for your help.

[GreenSock]

I can't imagine why it would be any different just because you're using SplitText. The timeline doesn't know (or care). If you're running into trouble, please provide a reduced test case in codepen or jsfiddle so we can see what's going on. Happy to help - just tough to troubleshoot blind  

 

Happy tweening!

[Mondula]

Hi,

 

thanks for your support and sorry for not getting back to you sooner. 

 

Here's a modified codepen from the SplitText collection:

See the Pen MmWwxV by anon (@anon) on CodePen

 

I added a reverse button. As you can see the animation is not reversing cleanly. Why is that?

 

Thanks again for your help!

[GreenSock]

The problem is that you're reversing a tween that's inside a timeline that completed. I'm curious why you're doing that. 

 

Think of a timeline like a record player with a needle that moves across it - the playhead of the parent timeline controls the playhead of the child animations (they're all aligned). If you pause the parent, that stops the playhead thus the child animations won't play either. 

 

Did you maybe intended to call master.reverse() instead? 

[Mondula]

No, it depends on user actions if I want to reverse the master timeline or just part of it.

 

So, I probably should structure things differently.

var prologue = new TimelineLite({paused: true});
var epilogue = new TimelineLite({paused: true});

var foo = new TimelineLite({paused: true});

prologue.eventCallback('onComplete', function () {
    foo.eventCallback('onComplete', function () {
        epilogue.play();
    }).play();
}).play();

// later
foo.reverse();

What do you think? Is there a simpler way?

 

Thanks for your help.

[GreenSock]

Sorry, I just can't seem to understand what your goal is here. I read your code a few times. Can you provide more details about your goal?

 

Also, why do the timelines need to be nested if you're attempting to control them independently? Why not keep them separate? What's the benefit of nesting in this scenario?

[OSUblake]

Sounds like some of these threads...

https://greensock.com/forums/topic/13241-nesting-timelinelite-multiple-times-doesnt-work/

https://greensock.com/forums/topic/16333-re-run-tween-in-a-timeline-at-a-later-point-in-the-timeline/

https://greensock.com/forums/topic/16348-multiple-timelines-sharing-addplay-wont-play/