Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anotheruser

CSSPLUGIN holding a reference

Recommended Posts

I have a master timeline and a number of children timelines which is added to the master timeline through .add() method. I have killed all the timelines but still GSAP CSSPlugin holds some reference just like the image which i have added to this post. Is there anything I am doing wrong ?

gsap.PNG

  • Like 1
Link to comment
Share on other sites

please provide a demo (the simpler the better) so that we can investigate further. thanks.

  • Like 3
Link to comment
Share on other sites

Please check the following codepen

 

See the Pen eLpOXR?editors=1010 by jeffin417 (@jeffin417) on CodePen

 

Here after clicking stop button i have removed all the dom elements (SVG DOM) but it wont be removed in heap memory showing that tweenmax CSSplugin hold a reference of that DOM

 

 

Link to comment
Share on other sites

Also as you have stated in the following comment

 

 

I have tried to set a dummy value to a tweenmax like TweenMax.set("#dom", {opacity:"0"}) But CSSPLUGIN still hold reference of the old SVG DOM. 

 

Also do i have to set a dummy tween normally or do i have to set a dummy tween for all the timelines like this

t1.add(TweenMax.set("#dom", {opacity:"0"}))

t2.add(TweenMax.set("#dom", {opacity:"0"})) ?

Link to comment
Share on other sites

2 hours ago, anotheruser said:

I have tried to set a dummy value to a tweenmax like TweenMax.set("#dom", {opacity:"0"}) But CSSPLUGIN still hold reference of the old SVG DOM. 

 

 

I don't think a dummy value will work as it's not a real element, but it really doesn't matter if you tweened a real element because you're holding references to the same objects.

 

You'll need to clean up after yourself and null all these timelines out if want them to be available for garbage collection.

 

var t1 = new TimelineMax({repeat:-1});
var t2 = new TimelineMax({repeat:-1});
var t3 = new TimelineMax({repeat:-1});
var t4 = new TimelineMax({repeat:-1});
var t5 = new TimelineMax({repeat:-1});
var t6 = new TimelineMax({repeat:-1});
var t7 = new TimelineMax({repeat:-1});
var t8 = new TimelineMax({repeat:-1});
var t9 = new TimelineMax({repeat:-1});
var t10 = new TimelineMax({repeat:-1});
var t11 = new TimelineMax({repeat:-1});
var t12 = new TimelineMax({repeat:-1});
var t13 = new TimelineMax({repeat:-1});
var t14 = new TimelineMax({repeat:-1});
var t15 = new TimelineMax({repeat:-1});
var t16 = new TimelineMax({repeat:-1});
var t17 = new TimelineMax({repeat:-1});
var t18 = new TimelineMax({repeat:-1});
var t19 = new TimelineMax({repeat:-1});
var t20 = new TimelineMax({repeat:-1});
var t21 = new TimelineMax({repeat:-1});
var t22 = new TimelineMax({repeat:-1});
var t23 = new TimelineMax({repeat:-1});
var t24 = new TimelineMax({repeat:-1});

var mainT= new TimelineMax({paused:true})

 

 

 

  • Like 5
Link to comment
Share on other sites

Try something like this. 

 

function onStop(){
  mainT.kill()
  document.getElementById("main").innerHTML = "";
    
  for (var i = 1; i < 25; i++) {    
    window["t" + i] = null;
  }
  
  mainT = null;
  
  TweenLite.set(document.createElement("div"), { x: 100 });
}

 

  • Like 4
Link to comment
Share on other sites

Works perfectly , I am tired of saying thanks to Osublake again and again, So I ll buy coffee for you. there you go  :) :) :)

  • Like 2
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.
×