G01 · גלילה צידית מוצמדת

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}
.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)}

/* G01 · גלילה צידית מוצמדת */
.wrapper{transition:all 0s !important;overflow:hidden;background:var(--bg, #f7f7fa)}
.scroll{display:flex;gap:24px;width:max-content;padding:80px var(--gutter, clamp(24px, 5vw, 96px))}
.scroll .ph{flex:0 0 clamp(300px,26vw,460px);height:clamp(240px,20vw,360px);font-size:22px}

HTML

<div class="wrapper"><div class="scroll">
<div class="ph ph-a"><span class="ph-l">כרטיס 01</span></div><div class="ph ph-b"><span class="ph-l">כרטיס 02</span></div><div class="ph ph-c"><span class="ph-l">כרטיס 03</span></div>
<div class="ph ph-e"><span class="ph-l">כרטיס 04</span></div><div class="ph ph-d"><span class="ph-l">כרטיס 05</span></div><div class="ph ph-f"><span class="ph-l">כרטיס 06</span></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

const container=document.querySelector(".scroll");
const totalWidth=container.scrollWidth-window.innerWidth;
gsap.to(container,{x:()=>totalWidth,ease:"none",
  scrollTrigger:{trigger:".wrapper",start:"top top",end:()=>"+="+totalWidth,scrub:true,pin:true,anticipatePin:1}});