Hm, nothing is wrong with the TweenMax, the preorder recursion doesn't work as expected, because of the wrong usage of hasOwnProperty. So here is the rewritten example. Another odd thing is that if destroyDisplayList is not called, the tweenLoolup map will keep a reference to the Slide object, otherwise not. So the question is how the pixijs display list affects TweenMax, it is very strange...If you can give me some explanation It would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GASP memory leak</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="http://pixijs.download/release/pixi.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
window.onload = function () {
// starts rendering
const renderer = PIXI.autoDetectRenderer(500, 500);
$('canvas').append(renderer.view);
renderer.backgroundColor = 0x000000;
const stage = new PIXI.Container();
animate()
function animate() {
renderer.render(stage);
requestAnimationFrame(function () {
animate()
});
}
// end
// Define api here
class Slide extends PIXI.Container {
constructor(id) {
super()
this.id = id
}
}
PIXI.DisplayObject.prototype.preorder = function (callback) {
const length = this.children.length
for (var i = 0; i < length; i++) {
if (typeof this.children[i].preorder == 'function')
this.children[i].preorder(callback)
}
callback(this)
}
// end
const navigation = new PIXI.Container()
const container = new PIXI.Container()
const holder = new PIXI.Container()
const slide = new Slide(555)
stage.addChild(navigation)
navigation.addChild(container)
container.addChild(holder)
holder.addChild(slide)
navigation.name = 'nav'
container.name = 'cont'
holder.name = 'holder'
slide.name = 'slide'
function destroyDisplayList(){
navigation.preorder(function (child) {
if (child instanceof PIXI.Sprite)
child.destroy(false, false);
else child.destroy();
});
}
setTimeout(function () {
stage.removeChild(navigation);
TweenMax.killTweensOf(holder);
destroyDisplayList()
}, 500)
}
</script>
</head>
<body>
<canvas></canvas>
</body>
</html>