Jump to content


Reverse a child timeline of a modular timeline independently

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



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



// ... later

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

Thanks. Any help is appreciated.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites



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!

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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

// later

What do you think? Is there a simpler way?


Thanks for your help.

Link to comment
Share on other sites

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?

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.