G72 · סקשן שמתהפך בין שתי פאות בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}

/* G72 · סקשן שמתהפך בין שתי פאות בגלילה */
.fl{height:250vh;position:relative}
.fl-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;perspective:1600px;padding:0 var(--gutter, clamp(24px, 5vw, 96px))}
.fl-card{position:relative;width:min(880px,92vw);aspect-ratio:16/10;transform-style:preserve-3d;will-change:transform}
.fl-face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;overflow:hidden;
  display:grid;place-items:center;text-align:center;padding:clamp(20px,4vw,50px);color:#fff}
.fl-face h3{margin:0;font-size:clamp(24px,3.6vw,48px);line-height:1.14;max-width:20ch}
.fl-face p{margin:14px 0 0;font-size:17px;line-height:1.8;max-width:40ch;opacity:.9}
.fl-face .ph{position:absolute;inset:0;border-radius:0;font-size:0;z-index:-1}
.fl-back{transform:rotateY(180deg)}
.fl-cap{position:absolute;bottom:7vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px}

HTML

<div class="fl"><div class="fl-stage">
  <div class="fl-card">
    <div class="fl-face fl-front"><div class="ph ph-f"></div>
      <div><h3>רוב האתרים נראים טוב ולא מביאים כלום</h3>
      <p>כי מישהו התחיל לעצב לפני שהיה ברור מה המסר ומי הקהל.</p></div></div>
    <div class="fl-face fl-back"><div class="ph ph-d"></div>
      <div><h3>אנחנו הופכים את הסדר</h3>
      <p>קודם מבינים את העסק ואת הלקוח, אחר כך כותבים, ורק בסוף מעצבים.</p></div></div>
  </div>
  <p class="fl-cap">גלול. הסקשן מתהפך ומגלה את הצד השני.</p>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const card=document.querySelector(".fl-card");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  gsap.timeline({scrollTrigger:{trigger:".fl",start:"top top",end:"bottom bottom",scrub:.6}})
    // משך מפורש לשניהם, אחרת ההיפוך נגמר בחצי הדרך והשאר ריק
    .fromTo(card,{rotateY:0},{rotateY:180,duration:1,ease:"none"},0)
    // התכווצות קלה באמצע ההיפוך: בלעדיה הקלף נראה שטוח בדיוק ברגע שהוא הכי דק
    .fromTo(card,{scale:1},{scale:.9,ease:"none",yoyo:true,repeat:1,duration:.5},0);
})();