GSAP Clipping Mask

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

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

<script>
 gsap.registerPlugin(ScrollTrigger);

 const maskTimeline = gsap.timeline({
   scrollTrigger: {
     trigger: ".mask_list",
     start: "top center",
     end: "bottom center",
     scrub: true,
     markers: false
   }
 });

 // Animate each .mask_visual in sequence
 maskTimeline
   .fromTo('.mask_visual._1', {
     width: '0vw',
     height: '0vh',
     clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
   }, {
     width: '100vw',
     height: '100vh',
     clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
     ease: "none"
   })
   .fromTo('.mask_visual._2', {
     width: '0vw',
     height: '0vh',
     clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
   }, {
     width: '100vw',
     height: '100vh',
     clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
     ease: "none"
   })
   .fromTo('.mask_visual._3', {
     width: '0vw',
     height: '0vh',
     clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
   }, {
     width: '100vw',
     height: '100vh',
     clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
     ease: "none"
   })
     .fromTo('.mask_visual._4', {
     width: '0vw',
     height: '0vh',
     clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
   }, {
     width: '100vw',
     height: '100vh',
     clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
     ease: "none"
   });
</script>

‍