<style>
     .mask-video {
  --mask-size:20vw; /*גודל החור בהתחלה*/

  -webkit-mask-image: radial-gradient(circle var(--mask-size) at 50% 50%, black 0%, black 50%, transparent 50%, transparent 100%);
  
  mask-image:radial-gradient(circle var(--mask-size) at 50% 50%, black 0%, black 50%, transparent 50%, transparent 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: all 0s;
  overscroll-behavior: none !important;
}

.blur {
  backdrop-filter: blur(5px); /*מידת הטשטוש של קונטיינר הזכוכית הפנימי*/
  transform: scale(1);
  opacity: 1;
}


@media(max-width:767px){
   .mask-video {
  --mask-size: 200px; /*גודל החור במובייל*/
   }
}

</style>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

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

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".mask-video",
      start: "top top",
      end: "+=800",
      scrub: 1,
      pin: true,
      markers: true,
    }
  });

  tl.to(".mask-video", {
    "--mask-size": "250vw",
    ease: "none"
  }, 0)

  .to(".blur", {
    scale: 0,
    opacity: 0,
    ease: "none"
  }, 0);
});
</script>

<style>
     .mask-video {
  --mask-size:20vw; /*גודל החור בהתחלה*/

  -webkit-mask-image: radial-gradient(circle var(--mask-size) at 50% 50%, black 0%, black 50%, transparent 50%, transparent 100%);
  
  mask-image:radial-gradient(circle var(--mask-size) at 50% 50%, black 0%, black 50%, transparent 50%, transparent 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: all 0s;
  overscroll-behavior: none !important;
}

.blur {
  backdrop-filter: blur(5px); /*מידת הטשטוש של קונטיינר הזכוכית הפנימי*/
  transform: scale(1);
  opacity: 1;
}


@media(max-width:767px){
   .mask-video {
  --mask-size: 200px; /*גודל החור במובייל*/
   }
}

</style>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

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

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".mask-video",
      start: "top top",
      end: "+=800",
      scrub: 1,
      pin: true,
      markers: true,
    }
  });

  tl.to(".mask-video", {
    "--mask-size": "250vw",
    ease: "none"
  }, 0)

  .to(".blur", {
    scale: 0,
    opacity: 0,
    ease: "none"
  }, 0);
});
</script>