Jump to content
GreenSock

jchristof

CSSPlugin holding a reference to a removed html element

Recommended Posts

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>
Link to comment
Share on other sites

I'm not quite sure how to answer your question; GSAP has absolutely no external dependencies and there's nothing it does to PIXI and I'm pretty confident that PIXI doesn't do anything to GSAP. I have this sneaking suspicion that I misunderstood your question though. :( Could you maybe rephrase it and be very specific about a GSAP question for us? 

Link to comment
Share on other sites

  • 1 year later...

anotheruser, i see you created a duplicate post: 

probably best to keep your issue separate. Please provide a demo that we can look at in that thread thank you.

 

  • Haha 1
Link to comment
Share on other sites

  • Carl locked this topic
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×