Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Is there a way to un-nest (de-parent) timeline?

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 remove timeline nesting?

I have timelines which may play separately, but when they are nested to some combined effect, they dont .play anymore.


One way I found to do this is to create another nesting, but this is too much imo.



Link to comment
Share on other sites

Hello @determin1st and Welcome to the GreenSock Forum!


To better help see what you are trying to do and how to help you based on the code you have already tried. Can you please create a reduced codepen demo example so we can see your code in context. This way we can help you better to offer solutions:



Thanks :)

  • Like 3
Link to comment
Share on other sites

As Jonathan mentioned, a reduced test case that clearly illustrates the issue with as little code as possible will be a great help as far as us assisting with a practical solution that works in your case.


From your description, it seems that remove() will do what you need: https://greensock.com/docs/TimelineLite/remove()




Link to comment
Share on other sites

See the Pen Zrebyd by determin1st (@determin1st) on CodePen


Here, after the combined effect played, individual timelines dont play any more. The combined timeline is always temporary because combined effect may be composed with different items (some of them may not be visible or be disabled, so they are included by condition)..



Link to comment
Share on other sites

Thanks for the demo, unfortunately I'm quite lost. I don't understand what a combined effect is vs an individual timeline.

I don't see any description of what the actual expected visual result should be when interacting with the buttons you provided and as such I do not understand how it is not performing to your expectation.


Can you please explain what we should see when I hover over A and B and what I should see when I hover over unhover all?

something along the lines of "When you hover the A button the text should grow and turn red but it doesn't work if you do x, y, z".


Additionally, writing in livescript only obfuscates the issue more and decreases the number of people that can help effectively. I'm not familiar with it and find it difficult to read. Viewing the compiled version is also quite cryptic


for (i$ = 0, len$ = (ref$ = elements).length; i$ < len$; ++i$) {if (window.CP.shouldStopExecution(2)){break;}
      el = ref$[i$];
      a.add(el._unhoverEffect.invalidate().play(), 0);


Hopefully with some clearer explanations and perhaps more descriptive code comments I or someone else can better understand what you need and provide some help.

  • Like 2
Link to comment
Share on other sites

Hehe. CodePen doesn't trust you to run your own for loops.


if (window.CP.shouldStopExecution(2)){break;}


Don't know why CodePen even has that option for LiveScript. Seems pretty obscure.



And yeah... I can't understand what's going on either. 

  • Like 2
Link to comment
Share on other sites

I've updated the example.. Now it should be readable, sorry.


here, I mean combined effect is several individual effects nested in temporary timeline. temporary, because it may change on conditions. i can't post those conditions here (trying to create widget "accordion", it's all in LS and lot of code). individual effects are created because hover effect run faster this way (instead of all group refreshing hover state - which is also needed)...


well, i dont know how to explain clearer for now:-)


See the Pen PQpvNo by determin1st (@determin1st) on CodePen





Link to comment
Share on other sites

Thanks for updating the demo. Definitely a little easier to follow.


I'm not entirely sure I understand everything that is happening. 

I find it a bit strange to kill animations and then expect them to play again. 

Also I'm not sure why all the invalidating is necessary. 


The thing that seemed the most un-orthodox was


a.add(el._unhoverEffect.invalidate().play(), 0);


I've never seen a case where an invalidated animation was added to a paused timeline.


As I said I'm still a bit foggy on this approach, so I really don't have a fix for what you are doing. 

All I can say at this point is that I don't think there is much to gain by moving one timeline into another and trying to re-use so many things. 

As you seemed to acknowledge previously, GSAP may be better suited to create the animations on the fly than to expect to re-use the same ones for all situations.

As soon as you add in user interaction, it becomes very difficult to account for what state you current animation is in when the user requests a new one.


Perhaps someone else will see things clearer than I do. Again, it just be my lack of understanding of what you are doing.

  • Like 2
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.