מעברי עמוד חלקים עם Framer Motion ו-View Transitions API

מעברי עמוד חלקים: Framer Motion ו-View Transitions API

תארו לעצמכם: משתמש לוחץ על מוצר בקטלוג, רואה הבזק לבן, ושנייה לאחר מכן—עמוד חדש. זה לא רק מעצבן אלא גם פוגע ב-Core Web Vitals—LCP ו-CLS. כתוצאה מכך, האתר מאבד המרות: לפי הפרויקטים שלנו, מעברים חלקים מגדילים את שימור המשתמשים ב-15–25%. אנחנו עובדים עם פרויקטים בכל היקף—מעמודי נחיתה ועד מרקטפלייסים עם 10,000+ עמודים. מעברים חלקים חשובים במיוחד למסחר אלקטרוני, שבו 80% מהאינטראקציות הן ניווט בקטלוג. הטמעת אנימציות מחזירה את ההשקעה תוך 1–2 חודשים בזכות גידול בהמרות. הצוות שלנו מטמיע מעברים שמפחיתים את זמן הטעינה הנתפס ב-30–40% ומשפרים את חוויית המשתמש. הזמינו ביקורת על המעברים הנוכחיים שלכם—זה לוקח יום אחד.

שלוש בעיות מרכזיות שמעברי אנימציה פותרים

מעברי אנימציה פותרים שלוש משימות: הקשר מרחבי (המשתמש מבין לאן הוא נווט), תפיסת מהירות (מסיכת זמן טעינה), ומניעת הבהובים (ללא הבזקים לבנים). טעויות יישום אופייניות: מעברים זהים קדימה/אחורה, התעלמות מנגישות, ואנימציות ארוכות מ-300 אלפיות השנייה. משך זמן אופטימלי הוא 200–250 אלפיות השנייה.

איך לבחור בין framer-motion ל-View Transitions API?

הבחירה תלויה בטכנולוגיה ובהתאמה הנדרשת. Framer-motion גמיש יותר אך דורש קוד נוסף. View Transitions API היא גישה טבעית, נוחה במיוחד עבור MPA ו-Next.js. לתרחישים מורכבים (מעברים מכוונים, אלמנטים משותפים), אנו ממליצים על framer-motion: הוא נותן שליטה מלאה. צרו קשר לייעוץ—נעזור לכם לבחור את הפתרון האופטימלי.

יישום מעברים מכוונים עם framer-motion

לניווט היררכי (קטלוג → מוצר → עגלה), המעבר צריך להיות מכוון: קדימה—החלקה ימינה, אחורה—החלקה שמאלה. ב-framer-motion, זה מיושם באמצעות וריאנטים מותאמים אישית עם מעקב אחר היסטוריית הניווט. שלב אחר שלב:

1. צרו useNavigationDirection hook שעוקב אחר ההיסטוריה ומחזיר 1 (קדימה) או -1 (אחורה).
2. הגדירו אובייקט וריאנטים עם פונקציות שמקבלות כיוון.
3. השתמשו ב-<AnimatePresence mode="wait"> ועטפו את תוכן העמוד ב-<motion.div key={location.pathname} custom={direction} variants={variants} initial="initial" animate="animate" exit="exit" />.

דוגמת קוד:

const useNavigationDirection = () => {
  const [direction, setDirection] = useState(0);
  const location = useLocation();
  const prevLocation = useRef(location);
  const navHistory = useRef<string[]>([location.pathname]);

  useEffect(() => {
    const currentPath = location.pathname;
    const history = navHistory.current;
    const prevIndex = history.lastIndexOf(prevLocation.current.pathname);
    const currentIndex = history.indexOf(currentPath);

    if (currentIndex > prevIndex) setDirection(1); // вперёд
    else setDirection(-1); // назад

    if (currentIndex === -1) {
      navHistory.current = [...history, currentPath];
    }

    prevLocation.current = location;
  }, [location]);

  return direction;
};

const variants = {
  initial: (dir: number) => ({ x: dir > 0 ? '100%' : '-100%', opacity: 0 }),
  animate: { x: 0, opacity: 1 },
  exit: (dir: number) => ({ x: dir > 0 ? '-100%' : '100%', opacity: 0 }),
};

מה זה View Transitions API ואיך להשתמש בו?

ה-View Transitions API הוא מנגנון דפדפן טבעי למעברים חלקים בין עמודים. נתמך ב-Chrome 111+ וב-Safari 18+. עבור MPA ו-Next.js, נדרש קוד מינימלי:

async function navigateTo(url) {
  if (!document.startViewTransition) {
    window.location.href = url;
    return;
  }
  const transition = document.startViewTransition(async () => {
    const html = await fetch(url).then(r => r.text());
    const doc = new DOMParser().parseFromString(html, 'text/html');
    document.querySelector('main').replaceWith(doc.querySelector('main'));
    history.pushState({}, '', url);
  });
  await transition.ready;
}

CSS לשליטה באנימציה:

@keyframes slide-from-right {
  from {
    transform: translateX(100%);
  }
}
@keyframes slide-to-left {
  to {
    transform: translateX(-100%);
  }
}
::view-transition-old(root) {
  animation: 250ms ease slide-to-left;
}
::view-transition-new(root) {
  animation: 250ms ease slide-from-right;
}
.product-image {
  view-transition-name: product-hero;
}

מעברי אלמנטים משותפים—אנימציות גיבור שבהן אלמנט ספציפי (כרטיס מוצר) "הופך" בצורה חלקה לתמונת הגיבור בעמוד המוצר. זו התכונה המרשימה ביותר של View Transitions API.

מסכי שלד ונגישות אנימציה

במהלך מעברים, נתונים נטענים לעיתים קרובות בצורה אסינכרונית. ספינר מראה "טוען"—מסך שלד מראה את מבנה העמוד:

const ProductSkeleton: React.FC = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    className="skeleton-wrapper"
  >
    <div className="skeleton skeleton--image" />
    <div className="skeleton skeleton--title" />
    <div className="skeleton skeleton--text" />
    <div className="skeleton skeleton--text skeleton--short" />
  </motion.div>
);

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

נגישות אנימציה היא חובה: השתמשו ב-const useNavigationDirection = () => { const [direction, setDirection] = useState(0); const location = useLocation(); const prevLocation = useRef(location); const navHistory = useRef<string[]>([location.pathname]); useEffect(() => { const currentPath = location.pathname; const history = navHistory.current; const prevIndex = history.lastIndexOf(prevLocation.current.pathname); const currentIndex = history.indexOf(currentPath); if (currentIndex > prevIndex) setDirection(1); // вперёд else setDirection(-1); // назад if (currentIndex === -1) { navHistory.current = [...history, currentPath]; } prevLocation.current = location; }, [location]); return direction; }; const variants = { initial: (dir: number) => ({ x: dir > 0 ? '100%' : '-100%', opacity: 0 }), animate: { x: 0, opacity: 1 }, exit: (dir: number) => ({ x: dir > 0 ? '-100%' : '100%', opacity: 0 }), }; . ב-CSS, השבתת אנימציות עבור async function navigateTo(url) { if (!document.startViewTransition) { window.location.href = url; return; } const transition = document.startViewTransition(async () => { const html = await fetch(url).then(r => r.text()); const doc = new DOMParser().parseFromString(html, 'text/html'); document.querySelector('main').replaceWith(doc.querySelector('main')); history.pushState({}, '', url); }); await transition.ready; } ; ב-framer-motion, השתמשו ב-hook @keyframes slide-from-right { from { transform: translateX(100%); } } @keyframes slide-to-left { to { transform: translateX(-100%); } } ::view-transition-old(root) { animation: 250ms ease slide-to-left; } ::view-transition-new(root) { animation: 250ms ease slide-from-right; } .product-image { view-transition-name: product-hero; } עם const ProductSkeleton: React.FC = () => ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="skeleton-wrapper" > <div className="skeleton skeleton--image" /> <div className="skeleton skeleton--title" /> <div className="skeleton skeleton--text" /> <div className="skeleton skeleton--text skeleton--short" /> </motion.div> ); . במהלך ניווט מהיר, אנימציות צריכות להיות ניתנות להפרעה—framer-motion עושה זאת אוטומטית דרך AnimatePresence, ולאנימציות מותאמות אישית, פשוט קצרו את משך הזמן ל-150–200 אלפיות השנייה.

מה כלול בעבודה

• ביקורת על הניווט הנוכחי והביצועים (Core Web Vitals, מפל בקשות).
• בחירת גישה: framer-motion, View Transitions API, או שילוב.
• יישום אנימציות עם נגישות (prefers-reduced-motion).
• יצירת מסכי שלד לכל התבניות.
• אינטגרציה עם הנתב (React Router, Next.js, Vue Router).
• אופטימיזציה ל-Core Web Vitals (LCP < 2.5s, CLS < 0.1).
• תיעוד קוד והדרכת צוות.
• אחריות על אנימציות—6 חודשים לאחר ההשקה.

תהליך ולוחות זמנים

שלבים: אנליטיקה (ביקורת על הניווט הנוכחי) → עיצוב (בחירת גישה, אב-טיפוס) → יישום → בדיקת Core Web Vitals ונגישות → השקה. לוחות זמנים משוערים:

קבלו ייעוץ לפרויקט שלכם—לצוות שלנו ניסיון רב שנים בפיתוח אתרים ויותר מ-40 פרויקטים מיושמים עם אנימציות.