Editor goes crazy when using a lambda curve

[fryguy1013]

    this.square1 = new mojs.Shape({
        parent: this.parentShape.el,
        duration: 3000,
        radius: 100,
        y: { 150: 150, curve: this.yCurve.getEasing() },
        scaleX: { 1: 1, curve: p => 1 - this.scaleCurve.getEasing()(p) },
        scaleY: { 1: 1, curve: p => 1 + this.scaleCurve.getEasing()(p) },
        angle: { [5]: 5, curve: this.angleCurve.getEasing() }
    });

With just scaleX: { 1: 1, curve: this.scaleCurve.getEasing() }, this seems to work fine, but the example above caused the screenshot above.

[fryguy1013]

This was fixed for me by not getting the easing every time calling in, and instead caching the value before this function. But it still feels like the above behavior is not the greatest :)

[legomushroom]

Hey @fryguy1013, thanks for the issue.

That's interesting, looks like rendering artifacts were introduced, probably because of a performance bottleneck. You definitely want to cache the this.scaleCurve.getEasing() because otherwise, you are sampling the SVG path on every animation frame which is pretty slow operation.

Cheers~