Jump to content
GreenSock

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

GSAP Leaving Detached Objects in code

Recommended Posts

Hi there,

 

I'm having an issue with GSAP creating lots of detached DOM items in chrome when a parent div is deleted during a tween, despite attempting to stop the tweens. When I do this using just JQuery and not include the GSAP plugin, no detached items remain. To view detached items in chrome I use the following under "Discover detached DOM tree memory leaks with Heap Snapshots": https://developers.google.com/web/tools/chrome-devtools/memory-problems/ 

 

Code is below, you'll need jQuery, GSAP, Tween Max and one image.

 

1) Check for detached items in chrome (you'll see a few that GSAP etc. has by default)

2) Click "Start Tween", the during the 10 second tween click "Stop Tween and Remove Div"

3) Re-check for detached items in chrome. You'll see more have been created. (i.e. not removed by the tween stop).

 

Any help would be greatly appreciated, have switched GSAP for jQuery off in my code for the time being.

 

<!DOCTYPE html>
<html>
<head>
  <title>Tween Test</title>
  <script src="../jquery-3.0.0.min.js"></script>
  <script src="../greensock-js/src/minified/jquery.gsap.min.js"></script>
  <script src="../greensock-js/src/minified/TweenMax.min.js"></script>
  <script>
    function TweenMe() {
      jQuery("#innerDiv").animate({ opacity: '0' }, 10000);
    }

    function StopTween() {
      jQuery("#innerDiv").stop(true, false);
      jQuery("#outerDiv").remove(); 
    }
  </script>
</head>
<body>
  <button onclick="TweenMe();">Start Tween</button>
  <br />
  <br />
  <button onclick="StopTween();">Stop Tween and Remove Div</button>
  <br />
  <br />
  <div id="outerDiv">
    <div id="innerDiv">
      <img src="../media/img/red_square.jpg" id="imgMain" style="position:absolute;" />
    </div>
  </div>
</body>

jquery.gsap.min.js

jquery-3.0.0.min.js

red_square.jpg

TweenMax.min.js

Link to post
Share on other sites

Is there any reason you're using jQuery for this?

 

I'd think it would be easier to just use pure GSAP, kill() the tween and get rid of the div with the removeChild() method.

Link to post
Share on other sites

My application is quite large and the core is written in jQuery, TweenMax is used in other parts of the application, but I was hoping to take advantage of these GSAP optimisations for a specific part of it. If there isn't a fix for this I'll just revert to plain jQuery for these animations, but I'd like to know if/why there is an issue?

 

Many thanks,

 

Alex

Link to post
Share on other sites

I've never actually used the jquery.gsap plugin and I rarely touch jQuery so I'm not an authority on either. Generally speaking though, if I wanted to get rid of a DOM element with a running tween, I'd kill() the tween to release it for garbage collection.

 

@GreenSock may be around later with additional info.

 

Happy tweening.

 

 

Link to post
Share on other sites

I haven't found a way to explicitly kill the tween in these circumstances as jQuery is handling it, but hopefully there is a solution.

 

Thank you for your time!

Link to post
Share on other sites

You can TweenMax.killTweensOf("#yourSelector") to kill all the tweens of a particular object. 

 

Also keep in mind that GSAP internally records information about which animations go with which element so that it can perform lookups super fast, and it only dumps those references about once every 2 seconds or so. If you're doing your recording without waiting for that amount of time, it'd make sense why it would look like references are being held...but just wait a little longer and I bet you'll see that they're freed up (unless you have references in your own code). 

 

You can control the interval between the auto-sleep checks with TweenLite.autoSleep = 120; (or whatever - this is the number of ticks between checks). 

  • Like 2
Link to post
Share on other sites

Hi Jack, thank you for the advice, I've done some further testing:

 

On inital page load - Detached DOM element count: 12

Original Test (testing within 2 seconds): Detached DOM element count: 24

Using killTweensOf() rather than .stop() and waiting 30 seconds before checking:  Detached DOM element count: 24

Using killTweensOf(), setting TweenLite.autoSleep = 60; and waiting 30 seconds before checking: Detached DOM element count: 24

Used TweenMax.to, waited 30 seconds before checking: Detached DOM element count: 24

Also tested with latest jQuery 3.4.1, same result.

 

Using all methods, but not removing the div at the end of the process, results in no additional DOM element counts at all. It's only when I remove the div at the end, does the detached element count go up.

 

In Summary: When you apply a GSAP tween (and even kill it) to a div, then remove that div from the DOM (using either jQuery .remove() or plain JS), you get DOM objects created and not cleared. Any idea why and how I can avoid this?

Link to post
Share on other sites

A few more questions:

  1. Are you saying that you think GSAP itself is internally keeping references to DOM elements, even when those animations are killed? 
  2. Do you see the same results when animating it without GSAP? If so, can you provide a reduced test case comparison? 
  3. Do you get the same results if you use GSAP's API directly (not going through jQuery)? Like TweenMax.to(...) instead of jQuery.animate(...)
  4. Is there a direct correlation with the number of animations? In other words, you mentioned 12 detached elements at the start, then 24. If you add another 10 animations, does the count get affected accordingly? 
Link to post
Share on other sites

Hi Jack,

Thanks again for taking the time to look at this, I appreciate it. Answers below:

1. Are you saying that you think GSAP itself is internally keeping references to DOM elements, even when those animations are killed? 
   Yes, I believe so. Else there is something fundamental I'm not understanding.
2. Do you see the same results when animating it without GSAP? If so, can you provide a reduced test case comparison? 
    No, the issue does not occur when using jQuery.animate alone, without including the jquery.gsap file. See attached file JQueryTest.html
3. Do you get the same results if you use GSAP's API directly (not going through jQuery)? Like TweenMax.to(...) instead of jQuery.animate(...)
    Yes, you get the same issue when doing TweenMax.to
4. Is there a direct correlation with the number of animations? In other words, you mentioned 12 detached elements at the start, then 24. If you add another 10 animations, does the count get affected accordingly? 
    It does increase:
    1 tween on a div containing 1 image generates 12 additional detached elements as reported.
    3 tweens on 3 divs containing 1 image each generates 26 detached elements.

 

I read in another post that GSAP may always keep a reference to the last thing tweened, which would be fine, but as you can see, i don't think it's storing just the last one, as it increases with multiple tweens.

 

Many thanks,

 

Alex

JQueryTest.html

jquery-3.0.0.min.js

Link to post
Share on other sites

I'm not seeing the same numbers as you, but either way I question the validity of that report. It shows detached nodes from jQuery too (I removed GSAP completely). Nobody else has reported any such problems, and GSAP has been vetted by the biggest companies on the planet so it's hard to believe that it has a big memory leak issue and nobody noticed. I'm not saying it's impossible that there's a bug - I've seen plenty of those in my time :) I'm just having a hard time tracking down any problems or validating what you're seeing. I wish I had a great answer for you.

Link to post
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.

×