Skip to content

קורס אינטראקטיב BOOST – קורס GSAP באלמנטור

קורס GSAP באלמנטור – בברוכים הבאים! שיעור לדוגמה

מאגר טמפלטים וקודים שימושיים

פרק א׳ | GSAP מה? מבוא מקיף שיעור לדוגמה

מבוא לפרק א׳

1. מה זה gsap בכלל ומה אפשר לעשות איתו (ספויילר, הכל)

2. סוגי אנימציות ואיך משתמשים בהם נכון

פרק ב׳ | הסוד מאחורי GSAP ואיך הוא עובד שיעור לדוגמה

חזרה מהירה על פרק א׳

3. css מול gsap

4. איך gsap עובד? ההיגיון מאחורי האנימציות

5. אירועים נפוצים ב-js

6. סוגי דטא ב-js

פרק ג׳ | יאללה לעבודה – בונים אנימציה ראשונה שיעור לדוגמה

חזרה מהירה על פרק ב׳

7. מבנה קוד gsap והאנימציה הראשונה שלנו

8. סוגי אנימציות ו-tween

9. שדרוג הקוד עם מאפיינים מתקדמים

10. אנימציות בלחיצת כפתור

11. תרגול אנימציית לחיצה מורכבת – BMW

12. אנימציות מעבר עכבר

13. עבודה עם gpt לכתיבת אנימציה

פרק ד׳ | הרגע שלשמו התכנסו – אנימציות גלילה!

חזרה מהירה על פרק ג׳

14. מבוא ל- scrolltrigger ונקודות יחס במסך

15. בונים אנימציית גלילה ראשונה

16. מצבי ניגון של אנימציה

17. אנימציית גלילה אינטראקטיבית

18. תרגול אנימציית גלילה – פחית מתחברת

פרק ה׳ | PIN פציל! – אנימציות גלילה מורכבות

חזרה מהירה על פרק ד׳

19. אנימציות מסך מפוצל

20. pinning – הגרסה של gsap למצב ״דביק״

21. pin במסך מלא

22. הדרכת תרגול – אנימציות גלילה עם מסיכה

23. עדכון הגדרות scrolltigger

פרק ו׳ | אופטימיזציה, רספונסיביות והתמודדות עם באגים

חזרה מהירה על פרק ה׳

24. משתנים ב-js

25. פונקציות ופרמטרים ב-js

26. תרגול פונקציות עם אנימציית BMW

27. מערכים (array) ב- js

28. לולאות ב-js

29. אופטימיזציה של קוד ושיטות עבודה חכמות

30. הוספת מסך טעינה לאתר

31. הגדרת wp rocket עם gsap

32. רספונסיביות בקוד

33. פעולות להתמודדות עם באגים

פרק ז׳ | טיימינג זה הכל – רצף אנימציות (טיימליין)

חזרה מהירה על פרק ו׳

34. מה זה טיימליין ולמה הוא כזה חשוב

35. עבודה עם קוד בסיסי לטיימליין

36. תזמונים בטיימליין

37. הגדרות מתקדמות לטיימליין

38. טיימליין באנימציות גלילה

39. הדרכת תרגול טיימלין – פרח צומח

40. שימוש ב-pin עם טיימליין ויצירת אנימציית סטוריטלינג מורכבת

פרק ח׳ | הולכים הצידה – אנימציות גלילה צידית

חזרה מהירה על פרק ז׳

41. גלילה צידית בסיסית

42. גלילה צידית מתקדמת

43. גלילה צידית דינמית

44. הדרכת תרגול – אנימציות בתוך גלילה צידית

45. התמודדות עם באגים נפוצים באנימציות גלילה

פרק ט׳ | כשהקופי התעורר לחיים – אנימציות טקסט

חזרה מהירה על פרק ח׳

46. אנימציות טקסט עם split type

47. הדרכת תרגול – אנמציות טקסט חזרתיות על כל הכותרת באתר

48. אימציות טקסט עם פלאגין text

49. אנימציות טקסט עם פלאגין ScrambleText

פרק י׳ | גלגולו של קו – אנימציות svg

חזרה מהירה על פרק ט׳

50. מבוא ל-svg ומבנה path

51. אנימציית svg בסיסית

52. הדרכת תרגול – קווים מצטיירים לכל אורך העמוד

53. אנימציית svg עם מסיכה לקווים מקווקווים

54. תזוזת אלמנטים לפי מסלול – MotionPath

55. הדרכת תרגול – אלמנט נע על קו בגלילה

56. חיבור צורות עם Morph SVG

פרק י״א | DRAGGBLE

חזרה מהירה על פרק י׳

57. יצירת אנימציית גרירה בסיסית

58. הדרכת תרגול – אנימציית אותיות נגררות

59. יצירת אפקט פיזיקלי עם פלאגין Inertia

60. טרגוט אנימציות עם אירועים גרירה

פרק י״ב | עיצוב אינטראקטיבי

חזרה מהירה על פרק י״א

61. חשיבה יצירתית ושיטות לעיצוב ייחודי

62. הכנה לעיצוב ועבודה עם השראות

63. עיצוב סטוריטלינג ותכנון אנימציה

פרק י״ג | סיכום

חזרה מהירה על פרק י״ב

64. תמחורים ושיווק

65. התנהלות עם אנימציות ולקוחות

66. הדרכת תרגול א׳ עד ת׳ – יצירת אזור אינטראקטיבי באתר

תרגולילה

תרגולילה #1 – אנימציות לחיצה

תרגולילה #2 – אנימציות לחיצה על טאבים + מעבר עכבר

תרגולילה #3 – אנימציית גלילה

השיעור הקודם

הנושא הבא

חזרה מהירה על פרק ב׳