G02 · חשיפת תמונה במסכה בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G02 · חשיפת תמונה במסכה בגלילה */
.paint{--reveal:0%;--feather:10%;width:min(680px,80vw);height:clamp(300px,36vw,520px);margin-inline:auto;
-webkit-mask-image:linear-gradient(to top,#000 0%,#000 var(--reveal),transparent calc(var(--reveal) + var(--feather)),transparent 100%);
mask-image:linear-gradient(to top,#000 0%,#000 var(--reveal),transparent calc(var(--reveal) + var(--feather)),transparent 100%);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;font-size:26px}

HTML

<div class="stage"><div class="paint ph ph-e"><span class="ph-l">התמונה נצבעת</span></div></div>

JS

gsap.registerPlugin(ScrollTrigger);

const state={val:0};
gsap.to(state,{val:100,ease:"none",
  scrollTrigger:{trigger:".paint",start:"top 85%",end:"top 25%",scrub:true},
  onUpdate:()=>document.querySelector(".paint").style.setProperty("--reveal",state.val+"%")});