Jump to content
Search Community

Alex Walker

Members

  • Posts

    5

  • Joined

  • Last visited

Alex Walker's Achievements

0

Reputation

  1. Alex Walker
    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
  2. Alex Walker
    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?
  3. Alex Walker
    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!
  4. Alex Walker
    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
  5. Alex Walker
    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 TweenMax.min.js
×
×
  • Create New...