אינטראקטיב BOOST – קורס GSAP באלמנטור
פרק א׳ | GSAP מה? מבוא מקיף
2 נושאים
מה זה gsap בכלל ומה אפשר לעשות איתו (ספויילר, הכל)
סוגי אנימציות ואיך משתמשים בהם נכון
פרק ב׳ | הסוד מאחורי GSAP ואיך הוא עובד
5 נושאים
חזרה מהירה על פרק א׳
css מול gsap
איך gsap עובד? ההיגיון מאחורי האנימציות
אירועים נפוצים ב-js
סוגי דטא ב-js
פרק ג׳ | יאללה לעבודה – בונים אנימציה ראשונה
8 נושאים
חזרה מהירה על פרק ב׳
מבנה קוד gsap והאנימציה הראשונה שלנו
סוגי אנימציות ו-tween
שדרוג הקוד עם מאפיינים מתקדמים
אנימציות בלחיצת כפתור
תרגול אנימציית לחיצה מורכבת – BMW
אנימציות מעבר עכבר
עבודה עם gpt לכתיבת אנימציה
פרק ד׳ | הרגע שלשמו התכנסו – אנימציות גלילה!
6 נושאים
חזרה מהירה על פרק ג׳
מבוא ל- scrolltrigger ונקודות יחס במסך
בונים אנימציית גלילה ראשונה
מצבי ניגון של אנימציה
אנימציית גלילה אינטראקטיבית
תרגול אנימציית גלילה – ראש מתחבר
פרק ה׳ | PIN פציל! – אנימציות גלילה מורכבות
6 נושאים
חזרה מהירה על פרק ד׳
אנימציות מסך מפוצל
pinning – הגרסה של gsap למצב ״דביק״
pin במסך מלא
תרגול pin במסך מלא
אנימציות גלילה עם מסיכה
פרק ו׳ | הולכים הצידה – אנימציות גלילה צידית
5 נושאים
חזרה מהירה על פרק ה׳
גלילה צידית בסיסית
גלילה צידית מתקדמת
אנימציות בתוך גלילה צידית
תרגול גלילה צידית – אנימציית כרטיסים
פרק ז׳ | טיימינג זה הכל – רצף אנימציות (טיימליין)
7 נושאים
חזרה מהירה על פרק ו׳
משתנים ב-js
עבודה עם קוד בסיסי לטיימליין
טיימליין מורכב
תרגול טיימליין
טיימליין באנימציות גלילה
שימוש ב-pin עם טיימליין ויצירת אנימציית סטוריטלינג מורכבת
פרק ח׳ | כשהקופי התעורר לחיים – אנימציות טקסט
5 נושאים
חזרה מהירה על פרק ז׳
אנימציות טקסט עם split type
אנמציות טקסט חזרתיות על כל הכותרת באתר
אימציות טקסט עם פלאגין text
אנימציות טקסט עם פלאגין ScrambleText
פרק ט׳ | גלגולו של קו – אנימציות svg
7 נושאים
חזרה מהירה על פרק ט׳
מבוא ל-svg ומבנה path
שימוש ב-svg באלמנטור
אנימציית אייקון מצטייר
שימוש במסיכה לקווים מקווקים
תזוזת אלמנטים לפי מסלול – MotionPath
חיבור svg והמרת path – MorphSVG
פרק י׳ | רספונסיביות, באגים ואופטימיזציה
7 נושאים
חזרה מהירה על פרק ט׳
רספונסביות עם פונקציית js
רספונסיביות עם match media
10 פעולות להתמודדות עם באגים
אופטימיזציה של קוד ושיטות עבודה חכמות
הוספת מסך טעינה לאתר
הגדרת wp rocket עם gsap
פרק י״א | DRAGGBLE
פרק י״ז | עיצוב אינטראקטיבי
הנושא הקודם
הנושא הבא
אימציות טקסט עם פלאגין text
אינטראקטיב BOOST – קורס GSAP באלמנטור
פרק ח׳ | כשהקופי התעורר לחיים – אנימציות טקסט
אימציות טקסט עם פלאגין text
הנושא הקודם
חזרה לשיעור
הנושא הבא
אתר זה עושה שימוש בקבצי Cookies. למידע נוסף יש לעיין
בתנאי השימוש
.
הבנתי
