From 1b99e620dc02827bf10157d90064ac3cc66f9eb7 Mon Sep 17 00:00:00 2001
From: Shachar <34343793+ShaMan123@users.noreply.github.com>
Date: Sun, 3 Apr 2022 22:23:17 +0300
Subject: [PATCH] docs(): fix typo, fix JSDOC for website, minors (#7853)

---
 scripts/index.js    |  2 +-
 src/util/animate.js | 38 +++++++++++++++++++++-----------------
 src/util/misc.js    |  2 +-
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 3cf30e99f8c..67894b24708 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -277,8 +277,8 @@ async function runIntreactiveTestSuite(options) {
     }, { unit: [], visual: [] });
     _.reduce(tests, async (queue, files, suite) => {
         await queue;
-        console.log(chalk.bold(chalk.blue(`running ${suite} test suite`)));
         if (files.length > 0) {
+            console.log(chalk.bold(chalk.blue(`running ${suite} test suite`)));
             return test(files, options);
         }
     }, Promise.resolve());
diff --git a/src/util/animate.js b/src/util/animate.js
index 8c94bceaa4f..bc795adb929 100644
--- a/src/util/animate.js
+++ b/src/util/animate.js
@@ -4,24 +4,11 @@
       clone = fabric.util.object.clone;
 
   /**
+   * 
    * @typedef {Object} AnimationOptions
    * Animation of a value or list of values.
-   * When using lists, think of something like this:
-   * fabric.util.animate({
-   *   startValue: [1, 2, 3],
-   *   endValue: [2, 4, 6],
-   *   onChange: function([a, b, c]) {
-   *     canvas.zoomToPoint({x: b, y: c}, a)
-   *     canvas.renderAll()
-   *   }
-   * });
-   * @example
    * @property {Function} [onChange] Callback; invoked on every value change
    * @property {Function} [onComplete] Callback; invoked when value change is completed
-   * @example
-   * // Note: startValue, endValue, and byValue must match the type
-   * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 }
-   * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }
    * @property {number | number[]} [startValue=0] Starting value
    * @property {number | number[]} [endValue=100] Ending value
    * @property {number | number[]} [byValue=100] Value to modify the property by
@@ -138,10 +125,27 @@
    * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
    * @memberOf fabric.util
    * @param {AnimationOptions} [options] Animation options
+   *  When using lists, think of something like this:
+   * @example
+   * fabric.util.animate({
+   *   startValue: [1, 2, 3],
+   *   endValue: [2, 4, 6],
+   *   onChange: function([x, y, zoom]) {
+   *     canvas.zoomToPoint(new fabric.Point(x, y), zoom);
+   *     canvas.requestRenderAll();
+   *   }
+   * });
+   * 
    * @example
-   * // Note: startValue, endValue, and byValue must match the type
-   * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 })
-   * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] })
+   * fabric.util.animate({
+   *   startValue: 1,
+   *   endValue: 0,
+   *   onChange: function(v) {
+   *     obj.set('opacity', v);
+   *     canvas.requestRenderAll();
+   *   }
+   * });
+   * 
    * @returns {CancelFunction} cancel function
    */
   function animate(options) {
diff --git a/src/util/misc.js b/src/util/misc.js
index a1310df4ad2..24f9b6ad243 100644
--- a/src/util/misc.js
+++ b/src/util/misc.js
@@ -1044,7 +1044,7 @@
      * this is equivalent to remove from that object that transformation, so that
      * added in a space with the removed transform, the object will be the same as before.
      * Removing from an object a transform that scale by 2 is like scaling it by 1/2.
-     * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg
+     * Removing from an object a transform that rotate by 30deg is like rotating by 30deg
      * in the opposite direction.
      * This util is used to add objects inside transformed groups or nested groups.
      * @memberOf fabric.util