G63 · סקשן שמתקפל כמו דף בגלילה

CSS

/* G63 · סקשן שמתקפל כמו דף בגלילה */
.fo{height:230vh;position:relative}
.fo-stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1400px;perspective-origin:50% 0%}
.fo-page{position:absolute;inset:0;transform-origin:50% 0%;backface-visibility:hidden;
  display:grid;place-items:center;text-align:center;padding:0 var(--gutter, clamp(24px, 5vw, 96px));will-change:transform}
.fo-page.front{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);z-index:2}
.fo-page.back{background:var(--bg, #f7f7fa);color:var(--ink, #16182b);z-index:1}
.fo-page h3{margin:0;font-size:clamp(28px,5vw,66px);max-width:16ch;line-height:1.12}
.fo-page p{margin:14px 0 0;max-width:44ch;font-size:17px;line-height:1.8;opacity:.82}
.fo-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}

HTML

<div class="fo"><div class="fo-stage">
  <section class="fo-page back"><div><h3>ומתחתיו מחכה הבא</h3>
    <p>הסקשן השני היה שם כל הזמן. הקיפול רק הסיר את מה שכיסה אותו.</p></div></section>
  <section class="fo-page front"><div><h3>הסקשן הזה מתקפל</h3>
    <p>גלול. הוא לא נגלל החוצה, הוא מסתובב אחורה על הציר העליון שלו.</p></div>
    <div class="fo-shade"></div></section>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const front=document.querySelector(".fo-page.front"),shade=document.querySelector(".fo-shade");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  gsap.timeline({scrollTrigger:{trigger:".fo",start:"top top",end:"bottom bottom",scrub:.6}})
    // הציר למעלה, ולכן הדף נופל אחורה ולא מסתובב סביב המרכז
    .fromTo(front,{rotateX:0},{rotateX:-82,ease:"none"},0)
    // ההצללה גדלה עם הזווית, וזה מה שמוכר את התלת-ממד
    .fromTo(shade,{opacity:0},{opacity:.55,ease:"none"},0);
})();