Scrollbased Animation

				
					<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  gsap.registerPlugin(ScrollTrigger);

  const COUNT = 45;
  const REPEAT_COUNT = 3;
  const PARTICLE_WIDTH = 1;
  const PARTICLE_HEIGHT = 1;

  function createDisintegration(captureEl) {
    html2canvas(captureEl, {
      allowTaint: true,
      useCORS: true,
      backgroundColor: null
    }).then((canvas) => {
      const width = canvas.width;
      const height = canvas.height;
      const ctx = canvas.getContext("2d");
      const imageData = ctx.getImageData(0, 0, width, height);
      let dataList = [];

      // Original-Box unsichtbar machen
      captureEl.style.visibility = "hidden";

      for (let i = 0; i < COUNT; i++) {
        dataList.push(ctx.createImageData(width, height));
      }

      // Pixelblöcke verteilen
      for (let x = 0; x < width; x += PARTICLE_WIDTH) {
        for (let y = 0; y < height; y += PARTICLE_HEIGHT) {
          for (let l = 0; l < REPEAT_COUNT; l++) {
            const dataIndex = Math.floor(
              (COUNT * (Math.random() + (2 * x) / width)) / 3
            );

            for (let dx = 0; dx < PARTICLE_WIDTH; dx++) {
              for (let dy = 0; dy < PARTICLE_HEIGHT; dy++) {
                const px = x + dx;
                const py = y + dy;
                if (px >= width || py >= height) continue;
                const index = (px + py * width) * 4;
                for (let p = 0; p < 4; p++) {
                  dataList[dataIndex].data[index + p] = imageData.data[index + p];
                }
              }
            }
          }
        }
      }

      // Für jedes "Stück" ein Canvas erstellen und animieren
      dataList.forEach((data, i) => {
        let clonedCanvas = canvas.cloneNode();
        clonedCanvas.getContext("2d").putImageData(data, 0, 0);
        const rect = captureEl.getBoundingClientRect();
		const scrollTop  = window.scrollY || document.documentElement.scrollTop;
		const scrollLeft = window.scrollX || document.documentElement.scrollLeft;

		clonedCanvas.style.position = "absolute";
		clonedCanvas.style.left = (rect.left + scrollLeft) + "px";
		clonedCanvas.style.top = (rect.top + scrollTop) + "px";
		clonedCanvas.style.width = rect.width + "px";
		clonedCanvas.style.height = rect.height + "px";
		clonedCanvas.className = "capture-canvas";

		document.body.appendChild(clonedCanvas);

        const randomAngle = (Math.random() - 0.5) * 2 * Math.PI;
        const randomRotationAngle = 30 * (Math.random() - 0.5);

        let tl = gsap.timeline({
          scrollTrigger: {
			  trigger: captureEl,
			  scrub: 1,
			  start: "top 80%",   // Effekt startet, wenn 20% unterhalb vom Viewport
			  end: "top 20%",     // Effekt ist fertig, wenn 20% unterhalb vom oberen Rand
			}
        });

        tl.to(clonedCanvas, {
          duration: 1,
          rotate: randomRotationAngle,
          x: 40 * Math.sin(randomAngle),
          y: 40 * Math.cos(randomAngle),
          opacity: 0,
          delay: (i / dataList.length) * 2
        });
      });
    });
  }

  // Alle Elemente mit Klasse .disintegrate-me verarbeiten
  window.addEventListener("load", function () {
    document.querySelectorAll(".disintegrate-me").forEach(el => {
      const rect = el.getBoundingClientRect();
      if (rect.width > 0 && rect.height > 0) {
        createDisintegration(el);
      } else {
        console.warn("Element hat keine sichtbare Größe:", el);
      }
    });
  });
});
</script>