Memory leak using goToAndStop and destroy

Tell us about your environment

• Browser and Browser Version: Chrome 66.0.3359.181

• After Effects Version: Last version

I have a page in an angular application with around 20 animations rendered by SVGRenderer. And I’m using goToAndStop for displaying specific frame of animations (like preview of an animation).

When I leave that page, I’m calling destroy method for every animation, so all resources should be freed up. But then I’m opening the page with animations several times, at some time the whole page freezes and becomes unresponsive (actually it’s always 4th time). The page memory consumption is increasing very fast. In that case I only can kill the page in process manager.

First finding was the typo in property name (https://github.com/airbnb/lottie-web/blob/master/player/js/elements/svgElements/SVGShapeElement.js#L303):

SVGShapeElement.prototype.destroy = function(){
    this.destroyBaseElement();
    this.shapeData = null; // <--- there is no "shapeData" property, it's called "shapesData" (plural form)
    this.itemsData = null;
};

But it didn’t help unfortunately. Then I added breakpoint here https://github.com/airbnb/lottie-web/blob/master/player/js/elements/ShapeElement.js#L24 and saw that number of shapes on every page opening dramatically increases:

renderModifiers: function() {
    if(!this.shapeModifiers.length){
        return;
    }
    var i, len = this.shapes.length; // <--- on first open it's 11, then 121 (11^2) and then 1331 (11^3) 
    for(i=0;i<len;i+=1){
        this.shapes[i].sh.reset();
    }

    len = this.shapeModifiers.length;
    for(i=len-1;i>=0;i-=1){
        this.shapeModifiers[i].processShapes(this._isFirstFrame);
    }
}

Looks like not all resources are freed up after animation desctruction and search through shapes is broken.

Hope it will give you some insight into the issue

[zeorin]

Sorry to necro this issue, but wow it’s wild that Lottie mutates animationData! That should really be documented behaviour. Nowadays with hot reload even if you’re not explicitly reusing an instance of animationData, you may still be doing so on hot-reload. In my case on a Gatsby site, but that doesn’t really matter.

Deep cloning the animationData worked. Wasted a whole day on this.

[Jokero]

Your cached animation JSON can be mutated by Lottie, so try to clone deeply it every time you create a new animation