Morphing Blob Image Carousel

This is a Morphing Blob Image Carousel. It utilizes procedural geometry and GSAP to generate a continuously shifting SVG mask over an image slider. Its function is to break the rigid, rectangular grid of standard web layouts. The organic motion draws the eye, making the standard act of cycling through images feel fluid and tactile.

Specs

• Weight: ~80 KB (includes GSAP).
• Performance: [!] CPU-intensive. The SVG d attribute is recalculated and repainted every frame.
• Responsiveness: Managed entirely via CSS Variables (--size, --scaleMask) adapted across media queries.

Anatomy

The component separates the static image DOM from the active geometry engine.

• HTML (The Skeleton): A wrapping .carousel div. Inside, an inline <svg> defines the hidden <clipPath> mask and a visible background blob (#path-2). The .carousel--images container holds standard <img> tags.
• CSS (The Skin): Applies the SVG mask to the image container (clip-path: url(#mask)). It handles the smooth scale and opacity transitions when the .active class is toggled on the images.
• JS (The Nervous System): A custom SupahBlob class acts as the mathematical engine. It calculates points along a circle, assigns randomized GSAP tweens to each point to push/pull them, and uses Catmull-Rom spline logic to draw smooth cubic bezier curves between them every frame.

Logic

The defining architecture is the forced update of the CSS clip-path property to fix a known browser rendering bug.

update() {
  this.el.setAttribute('d', this.createPath());
  
  // Force clipPath update for Safari/Chrome bug
  if (this.maskEl) {
    this.maskEl.style.clipPath = 'none';
    this.maskEl.offsetWidth; // Trigger reflow
    this.maskEl.style.clipPath = `url("${this.maskID}")`;
  }
}

Normally, browsers optimize performance by not repainting an element if its clip-path ID hasn’t changed, even if the underlying SVG geometry within that ID has changed. By removing the clip path, asking the browser for the layout width (offsetWidth), and instantly reapplying it, the script forces the browser to render the newly calculated blob frame.

Feel

Organic and gelatinous. The dual-blob setup — one masking the image, a slightly larger one acting as a background border — creates an illusion of volume and fluid tension. Clicking the button doesn’t just switch images; the scale-up transition makes the new image feel like it’s blooming from within the liquid membrane.