Add timeline after autoRemoveChildren

[iamjonas]

I have encountered a strange error. If I add a timeline to another timeline and, after playing it, remove it again via autoRemoveChildren and then add it again, it no longer plays.

 

Press the buttons "1", "2", "3", "2", "1" - in the exact order. The old content will not be removed.

See the Pen yLqNYxp by jonasloerken (@jonasloerken) on CodePen

[mvaneijgen]

Seems like an issue with overwriting GSAP values while already having values set. I don't have time to debug this for you ad the moment, but I know I personally had the same issue while wanting to create a slider using GSAP. I had tried to build it many different ways before settling on the approach below. 

 

This just creates the animation between any two slides each time and then resetting all the values again (maybe this is easier now with .revert() https://greensock.com/docs/v3/GSAP/Timeline/revert()). My initial plan was also to create all the timelines on page load and then animating those timelines, but this will as you have found results in conflicts that you then have to find and fix. It's a completely different setup, but I hope you can glean some knowledge from it. 

 

See the Pen GREebPK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Carl]

Hi @iamjonas and welcome to the GreenSock forums,

 

I wasn't able to follow your code closely enough to really ascertain if there was a problem with autoRemove children, however as a general principle I avoid timeline manipulation like this when dealing with user interactivity.

 

It is usually much more bullet-proof to generate your animations fresh on the fly then move existing timelines into other timelines while trying to restart the animations that you just added.

 

As @mvaneijgen noted these things can be troublesome until you find the "right way" and along that journey we all try things that seem like they should work but are more complicated than necessary so don't sweat it

 

I haven't used jQuery in awhile but I think you can get closer to accomplishing your goal with this type of approach

 

See the Pen ExpjWGj?editors=1011 by snorkltv (@snorkltv) on CodePen

 

The app starts out by defining a currentContent variable that will eventually point to the current content on the screen.

Until anyone clicks anything, currentContent is undefined.

 

The basic premise is that every time you click a button you get its index and then see if the item in the contents jQuery Object at that index is the same as the  "currentContent" (content that is displayed)

 

if they are the same then nothing needs to be done.

 

if they are not the same then pass the object that is in the contents jQuery object at that index into the animateIn() function.

 

The animateIn() function then animates in the thing it should and if there was a previous currentContent it animates that thing out. The thing you just animated in becomes the new currentObject. rinse and repeat.