Apple Liquid Glass CSS JS

apple-liquid-glass-fancy.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/naughtyduk/liquidGL/scripts/liquidGL.js"></script>

<script>
/*
 * =================================================================================
 * PART 1: Initialize the Glass Effect
 * =================================================================================
 */
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector('.fixed-glass-container .glass-target')) {
    
    // Initialize liquidGL.
    // **FIX:** Removed the 'snapshot' property to let the library use the
    // more reliable default (the entire page body). The target selector
    // remains specific to avoid applying the effect to the wrong element.
    liquidGL({
      target: ".glass-target",
	  snapshot: "body",
	  resolution: 2.0, // The quality of the snapshot
      reveal: "fade",
      refraction: 0,
      bevelDepth: 0.052,
      bevelWidth: 0.211,
      frost: 5,
      shadow: false,
      specular: true,
	  magnify: 1, // Magnification of lens content
	  on: {
        init(instance) {
          // The `init` callback fires once liquidGL has taken its snapshot
          // and rendered the first frame. It's the ideal place to hide or
          // prepare elements for reveal animations (e.g. with GSAP, ScrollTrigger)
          // because it ensures the content is visible to the snapshot before
          // you hide it from the user.
          console.log("liquidGL ready!", instance);
        },
      },
    });
  }
});
	
/*
 * =================================================================================
 * PART 2: Initialize Scroll Animations
 * =================================================================================
 */
window.addEventListener("load", () => {
  // Sync liquidGL with GSAP's rendering loop.
  if (window.liquidGL) {
    liquidGL.syncWith();
  }

  // Register the GSAP ScrollTrigger plugin.
  gsap.registerPlugin(ScrollTrigger);

  // Select elements for the animation.
  const glassContainer = document.querySelector('.fixed-glass-container');
  const footer = document.querySelector('#main-footer');

  if (glassContainer && footer) {
    // Create the "hide" animation.
    const hideAnimation = gsap.to(glassContainer, {
      duration: 0.3,
      opacity: 0,
      scale: 0.95,
      ease: "power1.in",
      paused: true,
      onComplete: () => {
        gsap.set(glassContainer, { display: "none" });
      }
    });

    // Create the ScrollTrigger to control the animation.
    ScrollTrigger.create({
      trigger: footer,
      start: "top bottom-=300px",
      onEnter: () => hideAnimation.play(),
      onLeaveBack: () => {
        gsap.set(glassContainer, { display: "block" });
        hideAnimation.reverse();
      }
    });
  }
});
</script>