G141 · שיחת וואטסאפ שמתנהלת בגלילה

CSS

/* G141 · שיחת וואטסאפ שמתנהלת בגלילה */
.ch2{max-width:min(520px,92vw);margin-inline:auto;padding-block:10vh 30vh;display:grid;gap:12px}
.ch2-m{max-width:82%;padding:12px 16px;border-radius:18px;font-size:15.5px;line-height:1.5;opacity:0;translate:0 12px;position:relative}
.ch2-m.in{justify-self:start;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-end-start-radius:6px;transform-origin:0 100%}
.ch2-m.out{justify-self:end;background:color-mix(in srgb,var(--accent, #4a3aff) 14%,var(--card, #fff));border-end-end-radius:6px;transform-origin:100% 100%}
.ch2-m small{display:block;font-size:11px;color:var(--muted, #6a6d85);margin-top:4px;text-align:end}
.ch2-typ{justify-self:start;display:none;gap:4px;padding:12px 16px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:18px;border-end-start-radius:6px}
.ch2-typ i{width:7px;height:7px;border-radius:50%;background:var(--muted, #6a6d85);animation:ch2-b 1s infinite}
.ch2-typ i:nth-child(2){animation-delay:.15s}.ch2-typ i:nth-child(3){animation-delay:.3s}
@keyframes ch2-b{50%{opacity:.3;translate:0 -3px}}
.ch2-day{justify-self:center;font-size:12px;color:var(--muted, #6a6d85);background:var(--bg, #f7f7fa);padding:4px 12px;border-radius:999px}

HTML

<div class="ch2">
  <span class="ch2-day">היום</span>
  <div class="ch2-m out">היי, ראיתי את האתר שלכם. אפשר הצעת מחיר לאתר לקליניקה?<small>10:12</small></div>
  <div class="ch2-m in">בטח. שתי שאלות קצרות: כמה שירותים יש בקליניקה, ויש כבר לוגו?<small>10:13</small></div>
  <div class="ch2-m out">ארבעה שירותים, ולוגו יש.<small>10:15</small></div>
  <div class="ch2-m in">מעולה. אתר תדמית עם עמוד לכל שירות וטופס קביעת תור: 12,500 ש"ח, שבועיים עבודה. רוצה שנקבע שיחה של 20 דקות?<small>10:16</small></div>
  <div class="ch2-m out">כן. מחר בבוקר?<small>10:16</small></div>
  <div class="ch2-m in">קבענו, 09:30. שלחתי לך זימון. נתראה 🙂<small>10:17</small></div>
  <div class="ch2-typ" aria-hidden="true"><i></i><i></i><i></i></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const msgs=gsap.utils.toArray(".ch2-m"),typ=document.querySelector(".ch2-typ"),reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce){gsap.set(msgs,{opacity:1,translate:"0 0"});return;}
  msgs.forEach((m,i)=>{
    ScrollTrigger.create({trigger:m,start:"top 82%",once:true,onEnter(){
      const incoming=m.classList.contains("in");
      const show=()=>gsap.fromTo(m,{opacity:0,translate:"0 12px",scale:.92},{opacity:1,translate:"0 0",scale:1,duration:.45,ease:"power3.out"});
      if(incoming){m.before(typ);typ.style.display="flex";gsap.delayedCall(.7,()=>{typ.style.display="none";show();});}
      else show();
    }});
  });
})();