Fix countdown smart easing (#288)

* log animation duration * small improvements * fix the bug (#287) * fix issue in determineDirectionAndSmartEasing * clean up * build
inorganik · Jul 8, 2022 · 1e87b68 · 1e87b68
1 parent 5ec1dfb
commit 1e87b68
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 58 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,7 +9,12 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
   ],
   rules: {
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'no-prototype-builtins': 'off',
+  },
+  env: {
+    browser: true,
+    es6: true,
   }
 };
diff --git a/demo/demo.js b/demo/demo.js
@@ -8,6 +8,7 @@ window.onload = function () {
   var demo = new CountUp('myTargetElement', 100);
   var codeVisualizer = el('codeVisualizer');
   var errorSection = el('errorSection');
+  var startTime;
   el('version').innerHTML = demo.version;
 
   document.querySelectorAll('.updateCodeVis').forEach(elem => elem.onchange = updateCodeVisualizer);
@@ -99,11 +100,12 @@ window.onload = function () {
     demo = new CountUp('myTargetElement', endVal, options);
     if (!demo.error) {
       errorSection.style.display = 'none';
+      startTime = Date.now();
       if (el('useOnComplete').checked) {
         demo.start(methodToCallOnComplete);
       }
       else {
-        demo.start();
+        demo.start(() => calculateAnimationTime());
       }
       updateCodeVisualizer();
     }
@@ -113,7 +115,12 @@ window.onload = function () {
       console.error(demo.error);
     }
   }
+  function calculateAnimationTime() {
+    const duration = Date.now() - startTime;
+    console.log('actual animation duration (ms):', duration);
+  }
   function methodToCallOnComplete() {
+    calculateAnimationTime();
     console.log('COMPLETE!');
     alert('COMPLETE!');
   }

diff --git a/dist/countUp.d.ts b/dist/countUp.d.ts
@@ -40,6 +40,12 @@ export declare class CountUp {
     once: boolean;
     constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
     handleScroll(self: CountUp): void;
+    /**
+     * Smart easing works by breaking the animation into 2 parts, the second part being the
+     * smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
+     * by disabling easing for the first part and enabling it on the second part. It is used if
+     * usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
+     */
     private determineDirectionAndSmartEasing;
     start(callback?: (args?: any) => any): void;
     pauseResume(): void;

diff --git a/dist/countUp.js b/dist/countUp.js
@@ -15,7 +15,7 @@ var CountUp = /** @class */ (function () {
         var _this = this;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.3.1';
+        this.version = '2.3.2';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
@@ -55,20 +55,11 @@ var CountUp = /** @class */ (function () {
                 }
             }
             else {
-                if (_this.countDown) {
-                    _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));
-                }
-                else {
-                    _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
-                }
+                _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
             }
             // don't go past endVal since progress can exceed duration in the last frame
-            if (_this.countDown) {
-                _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;
-            }
-            else {
-                _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;
-            }
+            var wentPast = _this.countDown ? _this.frameVal < _this.endVal : _this.frameVal > _this.endVal;
+            _this.frameVal = wentPast ? _this.endVal : _this.frameVal;
             // decimal
             _this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
             // format and print value
@@ -113,6 +104,7 @@ var CountUp = /** @class */ (function () {
             }
             return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;
         };
+        // t: current time, b: beginning value, c: change in value, d: duration
         this.easeOutExpo = function (t, b, c, d) {
             return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
         };
@@ -141,7 +133,7 @@ var CountUp = /** @class */ (function () {
         // scroll spy
         if (typeof window !== 'undefined' && this.options.enableScrollSpy) {
             if (!this.error) {
-                // set up global array of onscroll functions
+                // set up global array of onscroll functions to handle multiple instances
                 window['onScrollFns'] = window['onScrollFns'] || [];
                 window['onScrollFns'].push(function () { return _this.handleScroll(_this); });
                 window.onscroll = function () {
@@ -172,12 +164,17 @@ var CountUp = /** @class */ (function () {
             self.reset();
         }
     };
-    // determines where easing starts and whether to count down or up
+    /**
+     * Smart easing works by breaking the animation into 2 parts, the second part being the
+     * smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
+     * by disabling easing for the first part and enabling it on the second part. It is used if
+     * usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
+     */
     CountUp.prototype.determineDirectionAndSmartEasing = function () {
         var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
         this.countDown = (this.startVal > end);
         var animateAmount = end - this.startVal;
-        if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {
+        if (Math.abs(animateAmount) > this.options.smartEasingThreshold && this.options.useEasing) {
             this.finalEndVal = end;
             var up = (this.countDown) ? 1 : -1;
             this.endVal = end + (up * this.options.smartEasingAmount);
@@ -187,7 +184,8 @@ var CountUp = /** @class */ (function () {
             this.endVal = end;
             this.finalEndVal = null;
         }
-        if (this.finalEndVal) {
+        if (this.finalEndVal !== null) {
+            // setting finalEndVal indicates smart easing
             this.useEasing = false;
         }
         else {
@@ -241,7 +239,7 @@ var CountUp = /** @class */ (function () {
             return;
         }
         this.startVal = this.frameVal;
-        if (!this.finalEndVal) {
+        if (this.finalEndVal == null) {
             this.resetDuration();
         }
         this.finalEndVal = null;

diff --git a/dist/countUp.min.js b/dist/countUp.min.js