add and remove from dom

[MattArtDept]

Firstly I have to say how amazing gsap is, I've used it in as for many years and I've finally taken the plunge to the js version and I have to say I'm loving it!!

 

So.... I'm trying to write an app that dynamically loads in html views and adds them to the dom, I then create timelines to manipulate the views and store these in the app for reuse later on. 

 

The problem I'm having is that when I remove the html from the dom (say for instance I was loading another view) and then add it back again the timelines are no longer attached to the view.

 

I've created a codepen to illustrate this:

 

1. If you play the timeline it works

2. Hit "remove and add back to dom"

3. The timeline plays but no longer is attached to the box

 

I realise I can kill the timeline and add it back again but I will have many views/timelines in my app and I would prefer not to have to reset them when loading each view.

 

Any ideas what I'm doing wrong here and how I can reattach the timeline?

See the Pen swxga by KingDaddy (@KingDaddy) on CodePen

[jamiejefferson]

Your code is not removing then adding back to the DOM. It is removing then creating new DOM elements then adding those to the DOM. The original DOM elements are still detached and GSAP has no connection to the new DOM elements so the tweens are not going to show up.

 

This modification saves the DOM elements so they can be added back, which retains the tweens:

See the Pen leakd by jamiejefferson (@jamiejefferson) on CodePen

 

If you have a lot of DOM elements to always add/remove then it might just be better killing the timelines when you remove the elements, and rebuilding them again when recreating them (rather than clogging the memory with too many saved elements).

[MattArtDept]

Duh... Why couldn't I see that!!!

 

Thanks for your help.

[MattArtDept]

just though I would add this. If you need to target something in the stored html then you can use the jquery selector isolated to the current object. e.g. $(".el", domObj)

 

see this pen for an example: 

See the Pen CBzjk?editors=001 by KingDaddy (@KingDaddy) on CodePen

[jamiejefferson]

Yes you can also use $(...).find(".child")