G139 · כותרת שנמחקת בקו ומוחלפת

CSS

/* G139 · כותרת שנמחקת בקו ומוחלפת */
.sk2{min-height:120vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px));text-align:center}
.sk2-old{position:relative;display:inline-block;font-size:clamp(30px,5.5vw,76px);font-weight:800;line-height:1.15;color:var(--ink, #16182b);margin:0}
.sk2-old i{position:absolute;inset-inline:-.1em;top:50%;height:.12em;translate:0 -50%;background:var(--accent, #4a3aff);transform:scaleX(0);transform-origin:100% 50%;border-radius:4px}
html[dir="ltr"] .sk2-old i{transform-origin:0 50%}
.sk2-new{font-size:clamp(34px,6.5vw,92px);font-weight:900;line-height:1.1;color:var(--accent, #4a3aff);margin:.2em 0 0;opacity:0;translate:0 30px}

HTML

<div class="sk2"><div>
  <h2 class="sk2-old">אתר שנראה טוב<i aria-hidden="true"></i></h2>
  <h2 class="sk2-new">אתר שמביא לקוחות</h2>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".sk2-old i",{scaleX:1});gsap.set(".sk2-old",{opacity:.4});gsap.set(".sk2-new",{opacity:1,translate:"0 0"});return;}
  gsap.timeline({scrollTrigger:{trigger:".sk2",start:"top 60%",end:"center 40%",scrub:.5}})
    .to(".sk2-old i",{scaleX:1,duration:1,ease:"power3.inOut"})
    .to(".sk2-old",{opacity:.4,duration:.4},.5)
    .to(".sk2-new",{opacity:1,translate:"0 0",duration:.8,ease:"power3.out"},.6);
})();