unable to grow and shrink the object back and fourth with fabricjs

Question

I have an object(a circle in my case) that i want to let it grow and shrink back and forth for a number of times (3 times), like a flashing star.

var counter;
const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function() {
  circle = makeCircle(52.69, 17.77);
  canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', async function() {
  counter = 0;
  const result = await animateCircle(circle, 1);
  console.log(result);
  
});


function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'yellow',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });


}

function animateCircle(circle, dir) {
  const minScale = 1;
  const maxScale = 2;

  return new Promise(resolve => {
    circle.animate({
      scaleX: dir ? maxScale : minScale,
      scaleY: dir ? maxScale : minScale
    }, {
      easing: fabric.util.ease.easeOutCubic,
      duration: 3000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        if (counter > 4) {
          resolve('finished animating the point');
        } else {
          if (dir == 1)
            animateCircle(circle, 0);
          else
            animateCircle(circle, 1);

        }
        counter++;
      }

    });
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate</button>

The problem that i have is that when the animation is finished i don't get the resolved result in the console. I would appreciate if anyone could tell me what is wrong

Answer 1

On callback you were returning a new promise on every animation complete. Just return a promise once, and inside promise do the animation.

let counter;
const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function() {
  circle = makeCircle(52.69, 17.77);
  canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', onBtnClick);

async function onBtnClick() {
  counter = 0;
  const result = await animateCircle(circle, 1);
  console.log(result);
};


function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'yellow',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });
}

function animateCircle(circle, dir) {
  const minScale = 1;
  const maxScale = 2;

  return new Promise((resolve, reject) => {
    animate(circle, dir)

    function animate(circle, dir) {
      circle.animate({
        scaleX: dir ? maxScale : minScale,
        scaleY: dir ? maxScale : minScale
      }, {
        easing: fabric.util.ease.easeOutCubic,
        duration: 3000,
        onChange: canvas.requestRenderAll.bind(canvas),
        onComplete: function() {
          if (counter > 4) {
            resolve('finished animating the point');
            return;
          } else {
            if (dir == 1)
              animate(circle, 0);
            else
              animate(circle, 1);
          }
          counter++;
        }
      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate</button>

Answer 2

Actually you DO get the result printed on console. The function returns a Promise. You print that object with this line console.log(result); You can see the output of that on the console. You do NOT wait for promise to resolve. Promise works asynchronously. You just print it on console. So it is on pending status