هوش مصنوعی ها توی انیمیشن‌های فرانت معمولاً خیلی بی‌منطق عمل می‌کنن؛ یه چیزی Fade میشه، یه چیزی Slide میاد، یکی Bounce می‌کنه و آخرش بیشتر شبیه دموی انیمیشن میشه تا یه محصول واقعی.
برای حل این مشکل یه Skill ساخته شده که اول ساختار صفحه و کامپوننت‌ها رو بررسی می‌کنه و بعد یه سیستم Motion یکدست و منطقی روی پروژه می‌ذاره.
اصل‌هاش هم ایناست:
هر بخش فقط وقتی Animate بشه که کاربر واقعاً بهش برسه.
انیمیشن‌ها یه مقدار روی هم بیفتن تا صفحه کند و مرحله‌مرحله حس نشه.
Motion ساده و نرم باشه؛ بیشتر با opacity و transform، بدون Bounce و افکت‌های الکی.
خروج از صفحه، منو یا مودال سریع‌تر از ورودش باشه که کاربر معطل نشه.
یه سری چیزای مهم مثل Reduced Motion، Accessibility، جلوگیری از Layout Shift و تکرار بی‌دلیل انیمیشن هم توش رعایت شده.
خلاصه اینکه: انیمیشن نباید فقط برای خوشگل‌کاری باشه؛ باید جزئی از رفتار طبیعی رابط کاربری باشه.

https://github.com/mathofdynamic/entrance-motion-skill

@DevTwitter | <Mohamad/>