אנימציית תמונה נחשפת בגלילה + גלילה צידית

<style>
/*ביטול קפיצה בשחרור של pin*/
 .wrapper1{
     overscroll-behavior: none !important;
     transition: all 0s !important;
 }   
 

@media(min-width:1025px){
    .wrapper1{
        overflow: hidden; 
    }
}

 .paint_image {
  --reveal: 0%;
  --feather: 10%;
  
  display: block;
  width: 100%;
  height: auto;

  /* חושף מלמטה למעלה */
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,                               /* מלמטה – נראה */
    rgba(0,0,0,1) var(--reveal),                    /* עד כאן התמונה גלויה */
    rgba(0,0,0,0) calc(var(--reveal) + var(--feather)), /* מעבר הדרגתי לשקוף */
    rgba(0,0,0,0) 100%                              /* למעלה – שקוף לגמרי */
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--reveal),
    rgba(0,0,0,0) calc(var(--reveal) + var(--feather)),
    rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
    
</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", function() {
  gsap.registerPlugin(ScrollTrigger);

  const wrapper =  document.querySelector(".wrapper1"); // הקלאס של הקונטיינר החיצוני

  const container = document.querySelector(".scroll1"); // הקלאס של הקונטיינר הפנימי
  const extra = window.innerWidth * 0.5; // הוספת גלילה אקסטרא - 0.1 =10vw
  const totalWidth = container.scrollWidth - window.innerWidth + extra;

 
 //גלילה צידית של השלבים   
  if (window.innerWidth >= 1025) {

  gsap.to(container, {
    x: () => totalWidth, // במידה והאתר באנגלית ורוצים לשנות כיוון, להוסיף מינוס לפני הסוגריים
    ease: "none",
    scrollTrigger: {
      trigger: wrapper, // קלאס הקונטיינר החיצונית
      start: "top top",
      end: () => `+=${totalWidth*1}`, // לשינוי מהירות הגלילה החליפו את הספרה 1, מספר יותר גבוה יוצר אפקט איטי יותר
      scrub: true,
      pin: true,
      anticipatePin: 1,
      markers: false
    }
  });

    // === חשיפת התמונה עם מסיכה דינמית ===
    const revealState = { val: 0 }; // נשמור מצב נוכחי

    gsap.to(revealState, {
      val: 100,
      ease: "none",
      scrollTrigger: {
        trigger: wrapper,
        start: "top 50%",              // התחלת האנימציה על התמונה
        end: () => `+=${totalWidth * 1.7}`,  //סוף האנימציה על התמונה, לסיום מאוחר יותר הגדילו מספר (1.3) ולסיום מוקדם יותר הקטינו (0.8)
        scrub: true,
        markers: false,
      },
      onUpdate: () => {
        const imgEl = document.querySelector(".paint_image");
        if (imgEl) {
          imgEl.style.setProperty("--reveal", revealState.val + "%");
        }
      }
    });
    };


    
// אנימציית תמונה מובייל
if (window.innerWidth <= 1024) {

  const mobileReveal = { val: 0 };

  gsap.to(mobileReveal, {
    val: 100,
    ease: "none",
    scrollTrigger: {
      trigger: wrapper,
      start: "top 60%", // התחלת אנימציית מובייל
      end: "bottom+=50% bottom", // סוף אנימציית מובייל
      scrub: 0.5, 
      markers: false,
    },
    onUpdate: () => {
      const imgEl = document.querySelector(".paint_image");
      if (imgEl) imgEl.style.setProperty("--reveal", mobileReveal.val + "%");
    }
  });

}

  
  
});
</script>