scroll spy run once option (#282)

* Run only once * Update options in readme file Co-authored-by: Adi Cacan <[email protected]>
inorganik · May 18, 2022 · d5721ed · d5721ed
1 parent 0e4a9ae
commit d5721ed
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -62,6 +62,7 @@ interface CountUpOptions {
  numerals?: string[]; // numeral glyph substitution
  enableScrollSpy?: boolean; // start animation when target is in view
  scrollSpyDelay?: number; // delay (ms) after target comes into view
+ scrollSpyOnce?: boolean; // run only once
 }
 ```
 

diff --git a/dist/countUp.d.ts b/dist/countUp.d.ts
@@ -15,6 +15,7 @@ export interface CountUpOptions {
  numerals?: string[];
  enableScrollSpy?: boolean;
  scrollSpyDelay?: number;
+ scrollSpyOnce?: boolean;
 }
 export declare class CountUp {
  private endVal;
@@ -36,6 +37,7 @@ export declare class CountUp {
  duration: number;
  paused: boolean;
  frameVal: number;
+ once: boolean;
  constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
  handleScroll(self: CountUp): void;
  private determineDirectionAndSmartEasing;

diff --git a/dist/countUp.js b/dist/countUp.js
@@ -30,13 +30,15 @@ var CountUp = /** @class */ (function () {
  suffix: '',
  enableScrollSpy: false,
  scrollSpyDelay: 200,
+ scrollSpyOnce: false,
  };
  this.finalEndVal = null; // for smart easing
  this.useEasing = true;
  this.countDown = false;
  this.error = '';
  this.startVal = 0;
  this.paused = true;
+ this.once = false;
  this.count = function (timestamp) {
  if (!_this.startTime) {
  _this.startTime = timestamp;
@@ -153,14 +155,16 @@ var CountUp = /** @class */ (function () {
  }
  }
  CountUp.prototype.handleScroll = function (self) {
- if (!self || !window)
+ if (!self || !window || self.once)
  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);
+ if (self.options.scrollSpyOnce)
+ self.once = true;
  }
  else if (window.scrollY > bottomOfEl && !self.paused) {
  // scrolled past

diff --git a/dist/countUp.min.js b/dist/countUp.min.js
diff --git a/dist/countUp.umd.js b/dist/countUp.umd.js
@@ -36,13 +36,15 @@
  suffix: '',
  enableScrollSpy: false,
  scrollSpyDelay: 200,
+ scrollSpyOnce: false,
  };
  this.finalEndVal = null; // for smart easing
  this.useEasing = true;
  this.countDown = false;
  this.error = '';
  this.startVal = 0;
  this.paused = true;
+ this.once = false;
  this.count = function (timestamp) {
  if (!_this.startTime) {
  _this.startTime = timestamp;
@@ -159,14 +161,16 @@
  }
  }
  CountUp.prototype.handleScroll = function (self) {
- if (!self || !window)
+ if (!self || !window || self.once)
  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);
+ if (self.options.scrollSpyOnce)
+ self.once = true;
  }
  else if (window.scrollY > bottomOfEl && !self.paused) {
  // scrolled past