🎉 Release v1.0.8 – Enhanced Animation Stability & Performance Fixes

📜 Description

We are excited to announce the release of v1.0.8 for the LightningParticle project! This update brings significant improvements to the animation's stability and visual consistency, ensuring a smoother and more appealing user experience.

🛠️ What's New in v1.0.8

✅ Fixed Particle Drift on Page Focus

• Issue Addressed: When the webpage lost focus (e.g., the user switched tabs) and later regained it, particles would drift towards the canvas corners. This behavior was caused by an unexpectedly large deltaTime value, leading to excessive particle movement and an unsightly animation upon return.

• Solution Implemented:

  • Capped deltaTime: Introduced a maximum cap for the deltaTime variable within the animate method to prevent particles from moving excessively after the page regains focus.

    // Cap deltaTime to a maximum of 100ms to prevent particles from jumping
    this.deltaTime = Math.min(timestamp - this.lastTime, 100);

  • Optimized Visibility Handling: Enhanced the handleVisibilityChange method to avoid unnecessary calls to resize unless the canvas dimensions have actually changed. This ensures particles remain within bounds and prevents abrupt repositioning.

    handleVisibilityChange() {
      if (document.hidden && this.config.pauseOnBlur) {
        this.pause();
      } else if (!document.hidden && this.config.pauseOnBlur) {
        const currentWidth = this.canvas.clientWidth;
        const currentHeight = this.canvas.clientHeight;
        if (this.canvas.width !== currentWidth || this.canvas.height !== currentHeight) {
          this.resize();
        }
        this.lastTime = performance.now(); // Reset lastTime to avoid large delta
        this.resume();
      }
    }

  • Ensured Particle Bounds on Resize: Updated the resize method to guarantee all particles stay within the new canvas dimensions after a resize event.

    // Ensure particles are within the updated canvas boundaries
    this.particles.forEach((particle) => {
      particle.x = Math.max(0, Math.min(particle.x, this.canvas.width));
      particle.y = Math.max(0, Math.min(particle.y, this.canvas.height));
    });

⚡ Performance Enhancements

• Animation Smoothness: Improved the overall smoothness of the particle animation by refining frame rate management and particle update logic. This ensures better responsiveness and a more fluid visual experience across different devices and browsers.

• Optimized Event Handling: Streamlined event listeners to reduce unnecessary computations, particularly during visibility and resize events. This optimization contributes to better performance and lower resource consumption.

📈 Impact

These updates collectively ensure that the LightningParticle animation remains visually appealing and performs reliably, even when users switch between tabs or experience varying focus states. By capping deltaTime and optimizing event handling, the animation avoids abrupt particle movements and maintains consistent behavior, enhancing the overall user experience.

📦 How to Update

To update to v1.0.8, follow these steps:

1. Pull the Latest Changes:

   git pull origin main