Added ability to pause particle generation for smooth transitions between animation on/off

src/bubbleCursor.js

@@ -8,6 +8,8 @@ export function bubbleCursor(options) {
   let particles = [];
   let canvas, context, animationFrame;
 
+  let active = true;
+
   let canvImages = [];
 
   const prefersReducedMotion = window.matchMedia(
@@ -102,6 +104,8 @@ export function bubbleCursor(options) {
   }
 
   function addParticle(x, y, img) {
+    if (!active) return;
+
     particles.push(new Particle(x, y, img));
   }
 
@@ -143,6 +147,13 @@ export function bubbleCursor(options) {
     window.addEventListener("resize", onWindowResize);
   };
 
+  function pause() {
+    active = false;
+  }
+  function resume() {
+    active = true;
+  }
+
   function Particle(x, y, canvasItem) {
     const lifeSpan = Math.floor(Math.random() * 60 + 60);
     this.initialLifeSpan = lifeSpan; //
@@ -188,6 +199,8 @@ export function bubbleCursor(options) {
 
 
   return {
-    destroy: destroy
+    destroy: destroy,
+    resume: resume,
+    pause: pause
   }
 }

src/characterCursor.js

@@ -10,56 +10,58 @@ export function characterCursor(options) {
     "#B59194",
     "#D2A1B8",
   ];
-  let cursorOffset = options?.cursorOffset || {x: 0, y: 0}; 
+  let cursorOffset = options?.cursorOffset || { x: 0, y: 0 };
   let width = window.innerWidth;
   let height = window.innerHeight;
   let cursor = { x: width / 2, y: width / 2 };
   let particles = [];
   let canvas, context, animationFrame;
 
+  let active = true;
+
   let font = options?.font || "15px serif"
 
-  let randomPositiveOrNegativeOne = function() {
+  let randomPositiveOrNegativeOne = function () {
     return (Math.random() < 0.5 ? -1 : 1);
   }
 
   // Generates the lifespan for individual characters
-  let characterLifeSpanFunction = options?.characterLifeSpanFunction || 
-  function() {
-    return Math.floor(Math.random() * 60 + 80);
-  }
+  let characterLifeSpanFunction = options?.characterLifeSpanFunction ||
+    function () {
+      return Math.floor(Math.random() * 60 + 80);
+    }
 
   // Defines the original velocity for the character
-  let initialCharacterVelocityFunction = options?.initialCharacterVelocityFunction || 
-  function() {
-    return {
-      x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
-      y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
-  }
-  };
+  let initialCharacterVelocityFunction = options?.initialCharacterVelocityFunction ||
+    function () {
+      return {
+        x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
+        y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
+      }
+    };
 
   // Defines how the velocity should change (additively)
   let characterVelocityChangeFunctions = options?.characterVelocityChangeFunctions || {
-      x_func: function(age, lifeSpan) {
-        return (Math.random() < 0.5 ? -1 : 1)/30;
-      },
-      y_func: function(age, lifeSpan) {
-        return (Math.random() < 0.5 ? -1 : 1)/ 15;
-      },
-    };
+    x_func: function (age, lifeSpan) {
+      return (Math.random() < 0.5 ? -1 : 1) / 30;
+    },
+    y_func: function (age, lifeSpan) {
+      return (Math.random() < 0.5 ? -1 : 1) / 15;
+    },
+  };
 
-  let characterScalingFunction = options?.characterScalingFunction || 
-  function(age, lifeSpan) {
-    let lifeLeft = lifeSpan - age;
-    return Math.max(lifeLeft / lifeSpan * 2, 0);
-  }
+  let characterScalingFunction = options?.characterScalingFunction ||
+    function (age, lifeSpan) {
+      let lifeLeft = lifeSpan - age;
+      return Math.max(lifeLeft / lifeSpan * 2, 0);
+    }
 
   // Produces new angles for the character
-  let characterNewRotationDegreesFunction = options?.characterNewRotationDegreesFunction || 
-  function(age, lifeSpan) {
-    let lifeLeft = lifeSpan - age;
-    return lifeLeft / 5;
-  };
+  let characterNewRotationDegreesFunction = options?.characterNewRotationDegreesFunction ||
+    function (age, lifeSpan) {
+      let lifeLeft = lifeSpan - age;
+      return lifeLeft / 5;
+    };
 
   let canvImages = [];
 
@@ -186,6 +188,8 @@ export function characterCursor(options) {
   }
 
   function addParticle(x, y, img) {
+    if (!active) return;
+
     particles.push(new Particle(x, y, img));
   }
 
@@ -218,6 +222,13 @@ export function characterCursor(options) {
     animationFrame = requestAnimationFrame(loop);
   }
 
+  function pause() {
+    active = false;
+  }
+  function resume() {
+    active = true;
+  }
+
   function destroy() {
     canvas.remove();
     cancelAnimationFrame(animationFrame);
@@ -238,9 +249,9 @@ export function characterCursor(options) {
     this.initialLifeSpan = lifeSpan; //
     this.lifeSpan = lifeSpan; //ms
     this.velocity = initialCharacterVelocityFunction();
-    this.position = { 
-      x: x + cursorOffset.x, 
-      y: y + cursorOffset.y 
+    this.position = {
+      x: x + cursorOffset.x,
+      y: y + cursorOffset.y
     };
     this.canv = canvasItem;
 
@@ -278,6 +289,8 @@ export function characterCursor(options) {
   init();
 
   return {
-    destroy: destroy
+    destroy: destroy,
+    resume: resume,
+    pause: pause
   }
 }

src/emojiCursor.js

@@ -13,6 +13,8 @@ export function emojiCursor(options) {
   const canvImages = [];
   let canvas, context, animationFrame;
 
+  let active = true;
+
   const prefersReducedMotion = window.matchMedia(
     "(prefers-reduced-motion: reduce)"
   );
@@ -151,6 +153,7 @@ export function emojiCursor(options) {
   }
 
   function addParticle(x, y, img) {
+    if(!active) return;
     particles.push(new Particle(x, y, img));
   }
 
@@ -192,6 +195,12 @@ export function emojiCursor(options) {
     window.addEventListener("resize", onWindowResize);
   }
 
+  function pause() {
+    active = false;
+  }
+  function resume() {
+    active = true;
+  }
   /**
    * Particles
    */
@@ -230,5 +239,7 @@ export function emojiCursor(options) {
 
   return {
     destroy: destroy,
+    resume: resume,
+    pause: pause
   };
 }

src/fairyDustCursor.js

@@ -15,6 +15,8 @@ export function fairyDustCursor(options) {
   const canvImages = [];
   let canvas, context, animationFrame;
 
+  let active = true;
+
   const char = "*";
 
   const prefersReducedMotion = window.matchMedia(
@@ -151,6 +153,8 @@ export function fairyDustCursor(options) {
   }
 
   function addParticle(x, y, color) {
+    if (!active) return;
+
     particles.push(new Particle(x, y, color));
   }
 
@@ -183,6 +187,13 @@ export function fairyDustCursor(options) {
     animationFrame = requestAnimationFrame(loop);
   }
 
+  function pause() {
+    active = false;
+  }
+  function resume() {
+    active = true;
+  }
+
   function destroy() {
     canvas.remove();
     cancelAnimationFrame(animationFrame);
@@ -225,6 +236,8 @@ export function fairyDustCursor(options) {
   init();
 
   return {
-    destroy: destroy
+    destroy: destroy,
+    resume: resume,
+    pause: pause
   }
 }

src/ghostCursor.js

@@ -13,6 +13,8 @@ export function ghostCursor(options) {
   let particles = [];
   let canvas, context, animationFrame;
 
+  let active = true;
+
   let baseImage = new Image();
   if (options && options.image) {
     baseImage.src = options.image;
@@ -96,7 +98,7 @@ export function ghostCursor(options) {
 
   let getDelay = () => Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay;
   let lastTimeParticleAdded = Date.now(),
-      interval = getDelay();
+    interval = getDelay();
 
   function onMouseMove(e) {
     if (randomDelay) {
@@ -118,14 +120,16 @@ export function ghostCursor(options) {
   }
 
   function addParticle(x, y, image) {
+    if (!active) return;
+
     particles.push(new Particle(x, y, image));
   }
 
   function updateParticles() {
     if (particles.length == 0) {
       return;
     }
-    
+
     context.clearRect(0, 0, width, height);
 
     // Update
@@ -150,6 +154,13 @@ export function ghostCursor(options) {
     animationFrame = requestAnimationFrame(loop);
   }
 
+  function pause() {
+    active = false;
+  }
+  function resume() {
+    active = true;
+  }
+
   function destroy() {
     canvas.remove();
     cancelAnimationFrame(animationFrame);
@@ -186,6 +197,8 @@ export function ghostCursor(options) {
   init();
 
   return {
-    destroy: destroy
+    destroy: destroy,
+    resume: resume,
+    pause: pause
   }
 }

src/rainbowCursor.js

@@ -8,6 +8,8 @@ export function rainbowCursor(options) {
   let particles = [];
   let canvas, context, animationFrame;
 
+  let active = true;
+
   const totalParticles = options?.length || 20;
   const colors = options?.colors || [
     "#FE0000",
@@ -103,6 +105,8 @@ export function rainbowCursor(options) {
   }
 
   function addParticle(x, y, image) {
+    if (!active) return;
+
     particles.push(new Particle(x, y, image));
   }
 
@@ -155,6 +159,13 @@ export function rainbowCursor(options) {
     animationFrame = requestAnimationFrame(loop);
   }
 
+  function pause() {
+    active = false;
+  }
+  function resume() {
+    active = true;
+  }
+
   function destroy() {
     canvas.remove();
     cancelAnimationFrame(animationFrame);
@@ -169,6 +180,8 @@ export function rainbowCursor(options) {
   init();
 
   return {
-    destroy: destroy
+    destroy: destroy,
+    resume: resume,
+    pause: pause
   }
 }