G102 · תריסים: פסים שעולים בין סקשנים

CSS

/* G102 · תריסים: פסים שעולים בין סקשנים */
.bl{position:relative;height:220vh}
.bl-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.bl-a,.bl-b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.bl-a{background:var(--card, #fff)}
.bl-b{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);opacity:0}
.bl-a h2,.bl-b h2{margin:0 0 10px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.bl-a p,.bl-b p{margin:0;opacity:.75;max-width:40ch}
.bl-strips{position:absolute;inset:0;display:flex;pointer-events:none}
.bl-strips i{flex:1;background:var(--accent, #4a3aff);transform:scaleY(0);transform-origin:50% 100%;will-change:transform}
@media(max-width:767px){.bl-strips i:nth-child(n+6){display:none}}

HTML

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

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const strips=gsap.utils.toArray(".bl-strips i");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".bl-b",{opacity:1});return;}
  gsap.timeline({scrollTrigger:{trigger:".bl",start:"top top",end:"bottom bottom",scrub:.5}})
    .to(strips,{scaleY:1,duration:1,ease:"power3.inOut",stagger:.08})           // עולים מלמטה ומכסים
    .set(".bl-b",{opacity:1}).set(".bl-a",{opacity:0})                           // מאחורי הווילון מחליפים
    .set(strips,{transformOrigin:"50% 0%"})
    .to(strips,{scaleY:0,duration:1,ease:"power3.inOut",stagger:.08},"+=.2");    // יורדים מלמעלה וחושפים
})();