G128 · מגירה שנפתחת מתחת לסקשן

CSS

/* G128 · מגירה שנפתחת מתחת לסקשן */
.dr{position:relative;height:200vh}
.dr-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.dr-a,.dr-b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;will-change:transform}
.dr-a{background:var(--card, #fff);z-index:2}
.dr-b{background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);z-index:1;box-shadow:40px 0 80px rgba(0,0,0,.25)}
html[dir="ltr"] .dr-b{box-shadow:-40px 0 80px rgba(0,0,0,.25)}
.dr-a h2,.dr-b h2{margin:0 0 10px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));max-width:20ch}
.dr-a p,.dr-b p{margin:0;opacity:.8;max-width:40ch;line-height:1.7}
.dr-hint{position:absolute;bottom:22px;inset-inline:0;text-align:center;font-size:13px;color:var(--muted, #6a6d85)}

HTML

<div class="dr">
  <div class="dr-pin">
    <section class="dr-a"><div><h2>העבודה השוטפת</h2><p>אתרים, מערכות, ליווי. מה שאנחנו עושים כל יום.</p></div><p class="dr-hint">גלול, יש עוד משהו</p></section>
    <section class="dr-b"><div><h2>ומשהו שלא סיפרנו</h2><p>חבילת פתיחה לעסקים חדשים: אתר ראשון במחיר שמאפשר להתחיל.</p></div></section>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".dr-a",{opacity:0});return;}
  // בעברית הפרק הבא מגיע משמאל והנוכחי נדחק ימינה, כמו דף הבא בספר עברי. ב-LTR הכל מתהפך.
  const rtl=getComputedStyle(document.documentElement).direction==="rtl",s=rtl?-1:1;
  gsap.set(".dr-b",{xPercent:100*s,zIndex:3});   // המגירה מתחילה מחוץ למסך בצד שאליו הקריאה מתקדמת
  gsap.timeline({scrollTrigger:{trigger:".dr",start:"top top",end:"bottom bottom",scrub:.6}})
    .to(".dr-b",{xPercent:0,duration:1,ease:"power2.inOut"},0)
    .to(".dr-a",{xPercent:-30*s,scale:.94,duration:1,ease:"power2.inOut"},0)
    .to(".dr-hint",{opacity:0,duration:.15},0);
})();