G145 · מילים שנופלות מהשורה

CSS

/* G145 · מילים שנופלות מהשורה */
.fw2{min-height:150vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.fw2 h2{font-size:clamp(28px,5vw,72px);font-weight:800;line-height:1.3;margin:0;text-align:center;max-width:22ch}
.fw2 .w{display:inline-block;margin-inline:.14em;will-change:transform,opacity}

HTML

<div class="fw2"><h2><span class="w keep">אתר</span> <span class="w">מרשים</span> <span class="w">עם</span> <span class="w">אפקטים</span> <span class="w">ותמונות</span> <span class="w">ענקיות</span> <span class="w keep">שמביא</span> <span class="w">בעיקר</span> <span class="w">מחמאות</span> <span class="w keep">לקוחות</span></h2></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const drop=gsap.utils.toArray(".fw2 .w:not(.keep)"),keep=gsap.utils.toArray(".fw2 .keep");
  const accent=getComputedStyle(document.documentElement).getPropertyValue("--accent").trim()||"#4a3aff";
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(drop,{opacity:0});gsap.set(keep,{color:accent});return;}
  const dy=matchMedia("(max-width:767px)").matches?240:420;
  gsap.timeline({scrollTrigger:{trigger:".fw2",start:"top 60%",end:"bottom 60%",scrub:.6}})
    .to(drop,{y:dy,rotate:()=>gsap.utils.random(-40,40),opacity:0,duration:1,ease:"power2.in",stagger:{each:.12,from:"random"}})
    .to(keep,{color:accent,duration:.4},"-=.3");
})();