Jump to content
GreenSock

MattArtDept

add and remove from dom

Go to solution Solved by jamiejefferson,

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

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

Link to comment
Share on other sites

  • Solution

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).

  • Like 4
Link to comment
Share on other sites

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

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.
×