לכל אנימציה חייבת להיות סיבה מוצדקת!

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

טרנספורמציה (Transform)

שימושים נכונים:

  • יצירת אפקט מעבר עכבר לכרטיסי שירות, כך שכשהמשתמש עובר עם העכבר, הכרטיס מתקרב מעט (Scale 1.05) – זה מוסיף דינמיות בלי להציף את העין.
  • כפתור הנעה לפעולה – כשהמשתמש עובר עליו עם העכבר, הכפתור מקבל אפקט קל של Scale ו-Shadow להדגשת קליקביליות.

טעויות נפוצות:

  • יותר מדי אנימציות בו-זמנית – כפתור שעושה גם Scale, גם Rotate וגם זוהר ב-Box Shadow.
  • Scale מוגזם (1.2 ומעלה) – גורם לתחושה לא טבעית ולא מקצועית.
  • אנימציות קופצניות (Bounce על טקסטים או אייקונים) – יוצר עומס ויזואלי מיותר.

אפקטי גלילה (Scroll Effects)

שימושים נכונים:

  • אובייקטים שנכנסים בהדרגה – למשל, אלמנטים שנכנסים אחד אחרי השני בסדר מסוים.

טעויות נפוצות:

  • יותר מדי אלמנטים זזים בו-זמנית – למשל, גם תמונות, גם טקסטים וגם אייקונים זזים יחד.
  • אפקטים חדים ולא טבעיים – למשל, תמונה ש"עפה" מהר מדי מהצד (Slide In מהיר מדי).

אפקטי כניסה (Entrance Animations)

שימושים נכונים:

  • אובייקטים שנכנסים בהדרגה – למשל, אלמנטים שנכנסים אחד אחרי השני בסדר מסוים.

טעויות נפוצות:

  • יותר מדי אלמנטים זזים בו-זמנית – למשל, גם תמונות, גם טקסטים וגם אייקונים זזים יחד.
  • אפקטים חדים ולא טבעיים – למשל, תמונה ש"עפה" מהר מדי מהצד (Slide In מהיר מדי).

מיקום מוחלט (Entrance Animations)

שימושים נכונים:

  • אובייקטים שנכנסים בהדרגה – למשל, אלמנטים שנכנסים אחד אחרי השני בסדר מסוים.

טעויות נפוצות:

  • יותר מדי אלמנטים זזים בו-זמנית – למשל, גם תמונות, גם טקסטים וגם אייקונים זזים יחד.
  • אפקטים חדים ולא טבעיים – למשל, תמונה ש"עפה" מהר מדי מהצד (Slide In מהיר מדי).