אייקון שנוסע לאורך מסלול SVG מפותל, כולל סיבוב אוטומטי לכיוון הנסיעה.
מתי משתמשים: המחשת מסע לקוח, לוגו שמטייל בין תחנות, אינפוגרפיקה חיה.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
/* G25 · MotionPath: אלמנט נוסע על מסלול */
.mp-wrap{width:min(720px,86vw);margin-inline:auto;position:relative}
.mp-wrap svg{width:100%;height:auto;overflow:visible}
.mp-path{fill:none;stroke:#d5d5e2;stroke-width:2;stroke-dasharray:6 8}
.mp-ship{position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent, #4a3aff),#c2255c);display:flex;align-items:center;justify-content:center;color:var(--accent-ink, #fff);font-size:18px}<div class="stage"><div class="mp-wrap">
<svg viewBox="0 0 700 260"><path class="mp-path" id="mpp" d="M30,200 C150,40 280,240 400,110 S620,60 670,180"/></svg>
<div class="mp-ship">✈</div>
</div></div>gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
gsap.to(".mp-ship",{
motionPath:{path:"#mpp",align:"#mpp",alignOrigin:[.5,.5],autoRotate:true},
ease:"none",
scrollTrigger:{trigger:".mp-wrap",start:"top 80%",end:"top 20%",scrub:1}});