Animating scaling with Tween not working

[l-portet]

Description/Steps to reproduce

I want to animate the scaling property of a path but it doesn't seem to work with Tween.
But on other properties like fillColor or scaling it works perfectly.

Link to reproduction test-case

JSBin Demo

Expected result

The red circle should be animated to scale from 0% to 100%.

Additional information

Tested on Google Chrome 81

[lehni]

I noticed the same problem also recently. When you start with 0, scaling can't grow somehow. Start with something very small, close to 0, and it should work. But when using Path.Circle, make sure to also turn of applyMatrix, or use Shape.Circle instead:

window.onload = function () {
      let canvas = document.getElementById('myCanvas');
      paper.setup(canvas);
      let path = new paper.Path.Circle({
          radius: 40,
          center: new paper.Point(50, 50),
          applyMatrix: false
      });

      path.fillColor = 'red';
      path.scaling = 1
      
      // Comment this part and it will show the red circle
      path.tween(
          { scaling: 0.0001, fillColor: 'blue' },
          { scaling: 1, fillColor: 'purple' },
          { duration: 1500 }
      );
      // Uncomment this one to see it works on animating fillColor
      /*
        path.tween(
          { fillColor: 'blue' },
          { fillColor: 'purple' },
          { duration: 1500 }
      );
      */
  };

The fact that scaling = 0 doesn't work is a bug.

[lehni]

Sketch Version

[l-portet]

I put scaling at 0 for the example, but my real mistake was to forget to set applyMatrix to false, thanks for your reactivity!

[lehni]

Reopening since scaling = 0 is still a bug ;)

[lehni]

That bug isn't actually linked to the use of tweening. It can be simplified to this scenario:

Sketch