countup.js - npm Package Compare versions

Comparing version 2.0.8 to 2.1.0

dist/countUp.d.ts

@@ -16,5 +16,6 @@ export interface CountUpOptions {
     numerals?: string[];
+    enableScrollSpy?: boolean;
+    scrollSpyDelay?: number;
 }
 export declare class CountUp {
-    private target;
     private endVal;
@@ -40,2 +41,3 @@ options?: CountUpOptions;
     constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
+    handleScroll(self: CountUp): void;
     private determineDirectionAndSmartEasing;
@@ -42,0 +44,0 @@ start(callback?: (args?: any) => any): void;

dist/countUp.js

@@ -16,6 +16,5 @@ var __assign = (this && this.__assign) || function () {
         var _this = this;
-        this.target = target;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.0.8';
+        this.version = '2.1.0';
         this.defaults = {
@@ -32,3 +31,5 @@ startVal: 0,
             prefix: '',
-            suffix: ''
+            suffix: '',
+            enableScrollSpy: false,
+            scrollSpyDelay: 200,
         };
@@ -140,3 +141,33 @@ this.finalEndVal = null; // for smart easing
         }
+        // scroll spy
+        if (window !== undefined && this.options.enableScrollSpy) {
+            if (!this.error) {
+                // set up global array of onscroll functions
+                window['onScrollFns'] = window['onScrollFns'] || [];
+                window['onScrollFns'].push(function () { return _this.handleScroll(_this); });
+                window.onscroll = function () {
+                    window['onScrollFns'].forEach(function (fn) { return fn(); });
+                };
+                this.handleScroll(this);
+            }
+            else {
+                console.error(this.error, target);
+            }
+        }
     }
+    CountUp.prototype.handleScroll = function (self) {
+        if (!self || !window)
+            return;
+        var bottomOfScroll = window.innerHeight + window.scrollY;
+        var bottomOfEl = self.el.offsetTop + self.el.offsetHeight;
+        if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
+            // in view
+            self.paused = false;
+            setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay);
+        }
+        else if (window.scrollY > bottomOfEl && !self.paused) {
+            // scrolled past
+            self.reset();
+        }
+    };
     // determines where easing starts and whether to count down or up
@@ -143,0 +174,0 @@ CountUp.prototype.determineDirectionAndSmartEasing = function () {

dist/countUp.min.js

@@ -1,1 +0,1 @@
-var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.8",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)*(i/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)*(i/s.duration),s.countDown?s.frameVal=s.frameVal<s.endVal?s.endVal:s.frameVal:s.frameVal=s.frameVal>s.endVal?s.endVal:s.frameVal,s.frameVal=Number(s.frameVal.toFixed(s.options.decimalPlaces)),s.printValue(s.frameVal),i<s.duration?s.rAF=requestAnimationFrame(s.count):null!==s.finalEndVal?s.update(s.finalEndVal):s.callback&&s.callback()},this.formatNumber=function(t){var i,a,n,e,r=t<0?"-":"";i=Math.abs(t).toFixed(s.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],n=o.length>1?s.options.decimal+o[1]:"",s.options.useGrouping){e="";for(var l=0,h=a.length;l<h;++l)0!==l&&l%3==0&&(e=s.options.separator+e),e=a[h-l-1]+e;a=e}return s.options.numerals&&s.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return s.options.numerals[+t]}),n=n.replace(/[0-9]/g,function(t){return s.options.numerals[+t]})),r+s.options.prefix+a+n+s.options.suffix},this.easeOutExpo=function(t,i,a,s){return a*(1-Math.pow(2,-10*t/s))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp};
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,n=arguments.length;a<n;a++)for(var s in i=arguments[a])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var n=this;this.endVal=i,this.options=a,this.version="2.1.0",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){n.startTime||(n.startTime=t);var i=t-n.startTime;n.remaining=n.duration-i,n.useEasing?n.countDown?n.frameVal=n.startVal-n.easingFn(i,0,n.startVal-n.endVal,n.duration):n.frameVal=n.easingFn(i,n.startVal,n.endVal-n.startVal,n.duration):n.countDown?n.frameVal=n.startVal-(n.startVal-n.endVal)*(i/n.duration):n.frameVal=n.startVal+(n.endVal-n.startVal)*(i/n.duration),n.countDown?n.frameVal=n.frameVal<n.endVal?n.endVal:n.frameVal:n.frameVal=n.frameVal>n.endVal?n.endVal:n.frameVal,n.frameVal=Number(n.frameVal.toFixed(n.options.decimalPlaces)),n.printValue(n.frameVal),i<n.duration?n.rAF=requestAnimationFrame(n.count):null!==n.finalEndVal?n.update(n.finalEndVal):n.callback&&n.callback()},this.formatNumber=function(t){var i,a,s,e,r=t<0?"-":"";i=Math.abs(t).toFixed(n.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],s=o.length>1?n.options.decimal+o[1]:"",n.options.useGrouping){e="";for(var l=0,h=a.length;l<h;++l)0!==l&&l%3==0&&(e=n.options.separator+e),e=a[h-l-1]+e;a=e}return n.options.numerals&&n.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return n.options.numerals[+t]}),s=s.replace(/[0-9]/g,function(t){return n.options.numerals[+t]})),r+n.options.prefix+a+s+n.options.suffix},this.easeOutExpo=function(t,i,a,n){return a*(1-Math.pow(2,-10*t/n))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",void 0!==window&&this.options.enableScrollSpy&&(this.error?console.error(this.error,t):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return n.handleScroll(n)}),window.onscroll=function(){window.onScrollFns.forEach(function(t){return t()})},this.handleScroll(this)))}return t.prototype.handleScroll=function(t){if(t&&window){var i=window.innerHeight+window.scrollY,a=t.el.offsetTop+t.el.offsetHeight;a<i&&a>window.scrollY&&t.paused?(t.paused=!1,setTimeout(function(){return t.start()},t.options.scrollSpyDelay)):window.scrollY>a&&!t.paused&&t.reset()}},t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp};

dist/countUp.umd.js

@@ -5,3 +5,3 @@ (function (global, factory) {
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.countUp = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
@@ -23,6 +23,5 @@ var __assign = (undefined && undefined.__assign) || function () {
             var _this = this;
-            this.target = target;
             this.endVal = endVal;
             this.options = options;
-            this.version = '2.0.8';
+            this.version = '2.1.0';
             this.defaults = {
@@ -39,3 +38,5 @@ startVal: 0,
                 prefix: '',
-                suffix: ''
+                suffix: '',
+                enableScrollSpy: false,
+                scrollSpyDelay: 200,
             };
@@ -147,3 +148,33 @@ this.finalEndVal = null; // for smart easing
             }
+            // scroll spy
+            if (window !== undefined && this.options.enableScrollSpy) {
+                if (!this.error) {
+                    // set up global array of onscroll functions
+                    window['onScrollFns'] = window['onScrollFns'] || [];
+                    window['onScrollFns'].push(function () { return _this.handleScroll(_this); });
+                    window.onscroll = function () {
+                        window['onScrollFns'].forEach(function (fn) { return fn(); });
+                    };
+                    this.handleScroll(this);
+                }
+                else {
+                    console.error(this.error, target);
+                }
+            }
         }
+        CountUp.prototype.handleScroll = function (self) {
+            if (!self || !window)
+                return;
+            var bottomOfScroll = window.innerHeight + window.scrollY;
+            var bottomOfEl = self.el.offsetTop + self.el.offsetHeight;
+            if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
+                // in view
+                self.paused = false;
+                setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay);
+            }
+            else if (window.scrollY > bottomOfEl && !self.paused) {
+                // scrolled past
+                self.reset();
+            }
+        };
         // determines where easing starts and whether to count down or up
@@ -263,2 +294,2 @@ CountUp.prototype.determineDirectionAndSmartEasing = function () {
 
-})));
+}));

dist/countUp.withPolyfill.min.js

@@ -1,1 +0,1 @@
-!function(){for(var t=0,i=["webkit","moz","ms","o"],a=0;a<i.length&&!window.requestAnimationFrame;++a)window.requestAnimationFrame=window[i[a]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[a]+"CancelAnimationFrame"]||window[i[a]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var a=(new Date).getTime(),n=Math.max(0,16-(a-t)),s=window.setTimeout(function(){return i(a+n)},n);return t=a+n,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,n=arguments.length;a<n;a++)for(var s in i=arguments[a])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var n=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.8",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){n.startTime||(n.startTime=t);var i=t-n.startTime;n.remaining=n.duration-i,n.useEasing?n.countDown?n.frameVal=n.startVal-n.easingFn(i,0,n.startVal-n.endVal,n.duration):n.frameVal=n.easingFn(i,n.startVal,n.endVal-n.startVal,n.duration):n.countDown?n.frameVal=n.startVal-(n.startVal-n.endVal)*(i/n.duration):n.frameVal=n.startVal+(n.endVal-n.startVal)*(i/n.duration),n.countDown?n.frameVal=n.frameVal<n.endVal?n.endVal:n.frameVal:n.frameVal=n.frameVal>n.endVal?n.endVal:n.frameVal,n.frameVal=Number(n.frameVal.toFixed(n.options.decimalPlaces)),n.printValue(n.frameVal),i<n.duration?n.rAF=requestAnimationFrame(n.count):null!==n.finalEndVal?n.update(n.finalEndVal):n.callback&&n.callback()},this.formatNumber=function(t){var i,a,s,e,r=t<0?"-":"";i=Math.abs(t).toFixed(n.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],s=o.length>1?n.options.decimal+o[1]:"",n.options.useGrouping){e="";for(var l=0,u=a.length;l<u;++l)0!==l&&l%3==0&&(e=n.options.separator+e),e=a[u-l-1]+e;a=e}return n.options.numerals&&n.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return n.options.numerals[+t]}),s=s.replace(/[0-9]/g,function(t){return n.options.numerals[+t]})),r+n.options.prefix+a+s+n.options.suffix},this.easeOutExpo=function(t,i,a,n){return a*(1-Math.pow(2,-10*t/n))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp};
+!function(){for(var t=0,i=["webkit","moz","ms","o"],n=0;n<i.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[i[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[n]+"CancelAnimationFrame"]||window[i[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var n=(new Date).getTime(),a=Math.max(0,16-(n-t)),s=window.setTimeout(function(){return i(n+a)},a);return t=n+a,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,n=1,a=arguments.length;n<a;n++)for(var s in i=arguments[n])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,n){var a=this;this.endVal=i,this.options=n,this.version="2.1.0",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){a.startTime||(a.startTime=t);var i=t-a.startTime;a.remaining=a.duration-i,a.useEasing?a.countDown?a.frameVal=a.startVal-a.easingFn(i,0,a.startVal-a.endVal,a.duration):a.frameVal=a.easingFn(i,a.startVal,a.endVal-a.startVal,a.duration):a.countDown?a.frameVal=a.startVal-(a.startVal-a.endVal)*(i/a.duration):a.frameVal=a.startVal+(a.endVal-a.startVal)*(i/a.duration),a.countDown?a.frameVal=a.frameVal<a.endVal?a.endVal:a.frameVal:a.frameVal=a.frameVal>a.endVal?a.endVal:a.frameVal,a.frameVal=Number(a.frameVal.toFixed(a.options.decimalPlaces)),a.printValue(a.frameVal),i<a.duration?a.rAF=requestAnimationFrame(a.count):null!==a.finalEndVal?a.update(a.finalEndVal):a.callback&&a.callback()},this.formatNumber=function(t){var i,n,s,e,r=t<0?"-":"";i=Math.abs(t).toFixed(a.options.decimalPlaces);var o=(i+="").split(".");if(n=o[0],s=o.length>1?a.options.decimal+o[1]:"",a.options.useGrouping){e="";for(var l=0,u=n.length;l<u;++l)0!==l&&l%3==0&&(e=a.options.separator+e),e=n[u-l-1]+e;n=e}return a.options.numerals&&a.options.numerals.length&&(n=n.replace(/[0-9]/g,function(t){return a.options.numerals[+t]}),s=s.replace(/[0-9]/g,function(t){return a.options.numerals[+t]})),r+a.options.prefix+n+s+a.options.suffix},this.easeOutExpo=function(t,i,n,a){return n*(1-Math.pow(2,-10*t/a))*1024/1023+i},this.options=__assign(__assign({},this.defaults),n),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",void 0!==window&&this.options.enableScrollSpy&&(this.error?console.error(this.error,t):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return a.handleScroll(a)}),window.onscroll=function(){window.onScrollFns.forEach(function(t){return t()})},this.handleScroll(this)))}return t.prototype.handleScroll=function(t){if(t&&window){var i=window.innerHeight+window.scrollY,n=t.el.offsetTop+t.el.offsetHeight;n<i&&n>window.scrollY&&t.paused?(t.paused=!1,setTimeout(function(){return t.start()},t.options.scrollSpyDelay)):window.scrollY>n&&!t.paused&&t.reset()}},t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var n=this.countDown?1:-1;this.endVal=t+n*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp};

package.json

 {
 	"name": "countup.js",
 	"description": "Animates a numerical value by counting to it",
-	"version": "2.0.8",
+	"version": "2.1.0",
 	"license": "MIT",
@@ -26,9 +26,9 @@ "main": "./dist/countUp.umd.js",
 		"@types/jest": "^24.9.1",
-		"@typescript-eslint/eslint-plugin": "^4.28.5",
-		"@typescript-eslint/eslint-plugin-tslint": "^4.28.5",
-		"@typescript-eslint/parser": "^4.28.5",
+		"@typescript-eslint/eslint-plugin": "^4.33.0",
+		"@typescript-eslint/eslint-plugin-tslint": "^4.33.0",
+		"@typescript-eslint/parser": "^4.33.0",
 		"browserify": "^16.5.2",
 		"del": "^3.0.0",
-		"eslint": "^7.31.0",
-		"eslint-plugin-import": "^2.23.4",
+		"eslint": "^7.32.0",
+		"eslint-plugin-import": "^2.25.3",
 		"gulp": "^4.0.2",
@@ -39,3 +39,3 @@ "gulp-concat": "^2.6.1",
 		"jest": "^24.9.0",
-		"rollup": "^2.54.0",
+		"rollup": "^2.60.2",
 		"ts-jest": "^24.3.0",
@@ -42,0 +42,0 @@ "typescript": "^3.9.10",

README.md

@@ -30,2 +30,3 @@ # CountUp.js
 ## Features
+- **Animate when element scrolls into view** - new in v2.1.0. Use option `enableScrollSpy`.
 - **Highly customizeable** with a large range of options, you can even substitute numerals.
@@ -63,2 +64,4 @@ - **Smart easing**: CountUp intelligently defers easing until it gets close enough to the end value for easing to be visually noticeable. Configureable in the [options](#options).
   numerals?: string[]; // numeral glyph substitution
+  enableScrollSpy?: boolean; // start animation when target is in view
+  scrollSpyDelay?: number; // delay (ms) after target comes into view
 }
@@ -111,2 +114,19 @@ ```
 ```
+
+### Animate when the element is scrolled into view
+
+Use the scroll spy option to animate when the element is scrolled into view. When using scroll spy, just initialize CountUp but do not call start();
+
+```js
+const countUp = new CountUp('targetId', 989, { enableScrollSpy: true });
+```
+
+**Troubleshooting scroll spy**
+
+CountUp checks the scroll position as soon as it's initialized. So if you initialize it before the DOM renders and your target element is in view before any scrolling, you'll need to re-check the scroll position after the page renders:
+
+```js
+// after DOM has rendered
+countUp.handleScroll();
+```
 ---
@@ -116,3 +136,3 @@
 
-CountUp v2 is distributed as an ES6 module because it is the most standardized and most widely compatible module for browsers, though a UMD module is [also included](#umd-module).
+CountUp is distributed as an ES6 module because it is the most standardized and most widely compatible module for browsers, though a UMD module is [also included](#umd-module).
 
@@ -119,0 +139,0 @@ For the examples below, first install CountUp. This will give you the latest:

src/countUp.ts

@@ -17,2 +17,4 @@ export interface CountUpOptions { // (default)
   numerals?: string[]; // numeral glyph substitution
+  enableScrollSpy?: boolean; // start animation when target is in view
+  scrollSpyDelay?: number; // delay (ms) after target comes into view
 }
@@ -23,3 +25,3 @@
 
-  version = '2.0.8';
+  version = '2.1.0';
   private defaults: CountUpOptions = {
@@ -36,3 +38,5 @@ startVal: 0,
     prefix: '',
-    suffix: ''
+    suffix: '',
+    enableScrollSpy: false,
+    scrollSpyDelay: 200,
   };
@@ -56,3 +60,3 @@ private el: HTMLElement | HTMLInputElement;
   constructor(
-    private target: string | HTMLElement | HTMLInputElement,
+    target: string | HTMLElement | HTMLInputElement,
     private endVal: number,
@@ -86,4 +90,33 @@ public options?: CountUpOptions
     }
+
+    // scroll spy
+    if (window !== undefined && this.options.enableScrollSpy) {
+      if (!this.error) {
+        // set up global array of onscroll functions
+        window['onScrollFns'] = window['onScrollFns'] || [];
+        window['onScrollFns'].push(() => this.handleScroll(this));
+        window.onscroll = () => {
+          window['onScrollFns'].forEach((fn) => fn());
+        };
+        this.handleScroll(this);
+      } else {
+        console.error(this.error, target);
+      }
+    }
   }
 
+  handleScroll(self: CountUp): void {
+    if (!self || !window) return;
+    const bottomOfScroll = window.innerHeight +  window.scrollY;
+    const bottomOfEl = self.el.offsetTop + self.el.offsetHeight;
+    if (bottomOfEl < bottomOfScroll && bottomOfEl >  window.scrollY && self.paused) {
+      // in view
+      self.paused = false;
+      setTimeout(() => self.start(), self.options.scrollSpyDelay);
+    } else if ( window.scrollY > bottomOfEl && !self.paused) {
+      // scrolled past
+      self.reset();
+    }
+  }
+
   // determines where easing starts and whether to count down or up
@@ -90,0 +123,0 @@ private determineDirectionAndSmartEasing(): void {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88405

increased by6.63%

Lines of code

1654

increased by6.09%

Number of lines in readme file

193

increased by11.56%

No dependency changes