אנימציה על path עם javascript ו-GSAP

הפוסט הבא מיועד למפתחים שיש להם נסיון בסיסי עם JS, אבל גם המעצבים מבינכם יוכלו להפיק ממנו תועלת, ולדעת אלו כלים עומדים בפנינו בעיצוב האתר.

מה שנלמד לעשות הוא אנימציה של אובייקט על נתיב (path), ולצורך ההדגמה נשתמש באנימציה הזאת שעשינו לאחרונה לאתר bestie.co.li. הדוגמא הזאת היא מימוש מאוד פשוט של הפיצ'ר הזה, אפשר לשכלל אותה ולייצר בעזרתה storytelling מלא שגם מגיב לגלילת העמוד וכו'. אבל כאמור – נתחיל בדוגמא הפשוטה, שמופיעה פה בהקלטת המסך מן האתר:

אני אסביר גם על הקוד עצמו, וגם על עבודת ההכנה שנעשה לפני, שהיא חלק סופר חשוב מהתליך.

חלק א' – עושים קצת עבודת הכנה

נתחיל בבנית האיזור שבו תמוקם האנימציה בHTML. לאחר מכן נחזור אל הפיגמה ונצייר את הנתיב שעליו תתרחש האנינציה שלנו ונקרא לשכבה שלו בשם path. נמקם את הכדור שלנו בתחילת הנתיב ונקרא לשכבה שתלו ball. ניצור group מהנתיב ומהכדור יחד ונקרא לו באיזה שם שנחפוץ. בסיום השלב הזה ככה זה אומר להראות:

עכשיו אנחנו צריכים לייצא את הgroup הזה כSVG, אבל בצורה כזו ששמות השכבות שנתנו לאובייקטים ייוצאו אף הם. כדי לאפשר את זה נלחץ על ה3 נקודות ליד פורמט הקובץ ונסמן את האפשרות השניה (include "ID" attribute):

עכשיו, אם נפתח את הקובץ שיצאנו בעורך טקסט, נראה משהו כזה:

 
<svg width="1576" height="173" viewBox="0 0 1576 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="path-n-ball">
<path id="path" d="M1575 29.4685C1575 29.4685 1415.3 13.2271 1329.68 172C1329.68 172 1129.01 -39.0785 961.475 171.536C961.475 171.536 747.269 -21.1951 566.478 171.536C566.478 171.536 388.085 42.5925 1 63.2363" stroke="#ED2224" stroke-miterlimit="10"/>
<circle id="ball" cx="1560.5" cy="14.5" r="14.5" fill="#FF1D00"/>
</g>
</svg>

את הקוד הזה נעתיק ונדביק אותו ממש בתוך קוד הHTML שלנו, באיזור שבו נרצה שהאנימציה תתרחש, ונשתמש בCSS על מנת למקם אותו כך שהpath יהיה בדיוק במקום שאנחו רוצים אותו.

ככה זה נראה בחלון הinspect של כרום לאחר הכנסת הSVG לקוד ומיקומו במקום המתאים:

חלק ב' – הכירו את GSAP

טוב אז למי שלא מכיר את GSAP – אם אתם חובבי אנימציה – תתכוננו להתאהב. GSAP היא ספרית JavaScript שפותח עולם שלם של אפשרויות לאנימציה בקוד. היא התחילה אי שם בימי הFlash העליזים (הקשישים שביננו בטוח זוכרים), והתבססה בזמנו על שפת התכנות ActionScript. עם מותו של הפלאש עשתה הספריה הסבה מהירה ומוצלחת לJS.

ה-Core של GSAP מגיע עם מבחר אפשרויות של אנימציה ויצירת טיימליינים בקוד, כשבנוסף קיימים עוד כמה פלאגאינים שמרחיבים את הפונקציונאליות של הספריה, חלקם חינמיים וחלקם בתשלום.

בעמוד הזה תוכלו למצוא את האפשרויות להתקנת הקבצים אצלכם – על ידי הורדה ישירה, שימוש בCDN או התקנה עם npm. אנחנו נשתמש בCore ובפלאגאין חינמי שנקרא MotionPath, אז שימו לב שאתם משתמשים רק בקבצים האלה כדי להמנע מטעינת קוד מיותר.

נתחיל ביצירת הטיימליין. טיימליין בGSAP הוא קונטיינר שמאפשר ליצור אנימציה אחת המורכבת ממספר אנימציות,בדיוק כמו טיימליין בתוכנות עריכת וידאו או אנימציה. (הסבר מורחב על timeline יש כאן)

כדי לאתחל טיימליין ניצור משתנה שמאתחל timeline:

 const ball_timeline = gsap.timeline({repeat:-1,'yoyo':true});

ball_timeline.to("#ball", {
duration: 5,
ease:Linear.easeNone,
motionPath: {
path: "#path",
align: "#path",
alignOrigin: [0.5, 1]
}
});