‏SSGOI؛ انیمیشن جابه‌جایی صفحه مثل اپ‌های موبایل

به گفته‌ی سازنده، مشکل وب اینه که صفحه‌ها موقع جابه‌جایی «ترنزیشن» ندارن و فقط یهو عوض می‌شن، درحالی‌که تو اپ‌های موبایل این جابه‌جایی‌ها نرم و باحسه. SSGOI اومده همین رو درست کنه و انیمیشن‌های حرفه‌ای بین صفحه‌ها رو به وب اضافه کنه.

نویسنده SSGOI رو با دو راه‌حل دیگه مقایسه می‌کنه. View Transition API خودِ مرورگر فقط تو کروم کار می‌کنه و بقیه‌ی کتابخونه‌ها هم SSR و فیزیک فنری رو کامل ندارن. مزیت SSGOI اینه که روی همه‌ی مرورگرها کار می‌کنه، مستقل از روتره، از SSR پشتیبانی می‌کنه و حتی حالت رفت‌وبرگشت با دکمه‌های عقب/جلو رو حفظ می‌کنه.

نکته‌ی فنی جالبش اینه که به گفته‌ی سازنده، فیزیک فنری از قبل حساب می‌شه و به کی‌فریم‌های Web Animation API تبدیل می‌شه. برای همین انیمیشن‌ها روی GPU اجرا می‌شن، ترد اصلی درگیر نمی‌شه و ۶۰ فریم بر ثانیه تضمین می‌شه.

راه‌اندازیش هم ساده‌ست؛ کل اپ رو تو یه provider می‌پیچی و برای هر مسیر، نوع ترنزیشن رو مشخص می‌کنی:

const config = {
  transitions: [
    drill({ enter: "/post/*", exit: "*" }),
    fade({ paths: ["/", "/about"] }),
  ],
};

هر ترنزیشن یه factory ـه که توی config.transitions می‌ذاری. بعضی‌هاشون متقارن‌ان (مثل fade که هر دو طرف یه‌جور انیمیشن می‌شن) و بعضی‌ها جهت‌دار (مثل drill که ورود و خروج فیزیک متفاوت دارن). ترنزیشن‌های آماده‌ی زیادی هست: fade، drill، slide، scroll، axis، sheet، hero، zoom و چند تای دیگه.

SSGOI برای فریم‌ورک‌های مختلف پکیج جدا داره: React/Next، Svelte، Vue/Nuxt، Solid، Angular و یه هسته‌ی مستقل از فریم‌ورک. تو React با یه ابزار مرزی که pathname رو می‌خونه کار می‌کنه، ولی تو SvelteKit و Nuxt باید هر صفحه رو مستقیم با data-ssgoi-transition علامت بزنی، چون این فریم‌ورک‌ها محتوای اسلات رو زنده رندر می‌کنن.

نکات کلیدی:

• SSGOI به صفحه‌های وب انیمیشن جابه‌جایی شبیه اپ‌های نیتیو موبایل می‌ده
• برخلاف View Transition API روی همه‌ی مرورگرها و با SSR کار می‌کنه
• فیزیک فنری از قبل به کی‌فریم تبدیل می‌شه تا ۶۰ فریم روون و GPU-محور بمونه
• مستقل از روتره و حالت دکمه‌های عقب/جلو رو حفظ می‌کنه
• برای React، Svelte، Vue، Solid و Angular پکیج جدا داره