کی انیمیشن را نمی‌آوریم
روی مقاله‌ها و وقتی prefers-reduced-motion روشن است، GSAP و Lenis گرفته نمی‌شوند. معرفی خانه را همان لحظه می‌شود رد کرد، پیش از تمام شدن ذره‌ها.
نوشتهی محمد هنرور· ۷ دقیقه مطالعه
از انیمیشن در حرف آسان می‌شود دفاع کرد و در فایلی که واقعاً می‌رسد گران است. کتابخانه باید گرفته شود، حالت شروع باید نامرئی باشد تا ورود جایی برای آغاز داشته باشد، و گرفتن اسکرول باید بیشتر از چرخی بیارزد که خواننده از قبل دارد. در این سایت این هزینه‌ها دروازه دارند. مقاله آن‌ها را نمی‌پردازد. کسی که حرکت کمتر خواسته هم نمی‌پردازد.
قلم، عرض سطر، و تصمیم به نبریدن فارسی به حرف، در حروف، فاصله، و حرکت صفحه است. این یادداشت فقط درباره‌ی لحظه‌ای است که حرکت اجازه دارد شروع شود.
سند یک پرچم دارد
چیدمان data-motion را rich یا plain می‌گذارد. صفحه‌ی مقاله حرکت را خاموش می‌گذراند، پس نوشته plain است. فهرست وبلاگ، خانه، پروژه‌ها و درباره پیش‌فرض را نگه می‌دارند و پیش‌فرض rich است. صفحه‌ی همکاری هم ساده است. ساده پوسته‌ی بصری نیست. امتناع از وارد کردن کتابخانه‌ی انیمیشن است.
اسکریپت کوتاهی در سر صفحه prefers-reduced-motion را چک می‌کند. اگر جور باشد، عنصر ریشه پیش از خوانده شدن بدنه کلاس no-motion می‌گیرد. ماژول حرکت صفحه را کم‌حرکت می‌داند اگر آن کلاس باشد یا خود پرسش رسانه جداگانه جور شود. هر دو چک هست چون یکی می‌تواند پیش از دیگری راست باشد.
GSAP و ScrollTrigger و Lenis واردات پویا داخل یک شرط‌اند: حرکت غنی باشد و صفحه کم‌حرکت نباشد. اگر هر نیمه خراب شود آن ماژول‌ها گرفته نمی‌شوند. بالای اسکریپت حرکت، Lenis فقط به‌صورت نوع وارد شده و این کتابخانه را نمی‌فرستد. ورودها، شمارش عدد، نمونه‌ی اسکرول نرم، و بالا آمدن کلمه‌ها همه در همان بلوک‌اند. بلوک را رد کنی هیچ‌کدام اجرا نمی‌شود.
نگرفتن آن دانلود خودش نکته است. از آن امتیاز سرعت نمی‌سازم.
نوشته کتابخانه‌ی اسکرول نمی‌خواهد
Lenis وقتی واقعاً شروع شود lerp برابر 0.1 دارد و تیک GSAP را می‌راند. چرخ را می‌گیرد. روی خانه‌ی کوتاه این معامله را قبول دارم. روی نوشته نه. خواننده آمده پاراگراف‌ها را با نرخ خودش رد کند، از جمله نرخ نوار اسکرول، صفحه‌کلید، یا پرش پیدا کردن در صفحه. اسکرول صاف‌شده با هر سه می‌جنگد.
صفحه‌ی مقاله اسکرولر بومی را نگه می‌دارد. نواری بالای صفحه به ارتفاع سه پیکسل از جای اسکرول scaleX می‌گیرد. مبدأش وقتی جهت سند راست‌به‌چپ است به راست برمی‌گردد. تراشه‌ای دقیقه‌های مانده را از مستطیل بلوک نثر می‌شمارد. فهرست مطالب عنوان‌ها را با ناظر تقاطع نگاه می‌کند و در صفحه‌ی باریک پیوند فعال را در نوار افقی می‌آورد. اگر حرکت کم باشد آن اسکرول کوچک auto است نه smooth. هیچ‌کدام Lenis را وارد نمی‌کند.
دکمه‌ی بازگشت به بالا همان شکاف را دنبال می‌کند. اگر صفحه کم‌حرکت باشد scrollTo(0, 0) را صدا می‌زند و تمام. وگرنه رویداد site-scroll را می‌فرستد. اگر نمونه‌ی Lenis باشد، همان نمونه در 1.05 ثانیه می‌رود. اگر نباشد صفحه اسکرول نرم بومی را به کار می‌برد، یا با حرکت کم auto را. مقاله آن نمونه را هرگز ندارد، پس دکمه نمی‌تواند کتابخانه‌ای را پیشنهاد کند که نگرفته.
شکستن کلمه هنوز برای هر عنصر data-split اجرا می‌شود، چون آن حلقه بیرون از واردات کتابخانه است. رشته را روی فاصله‌ی سفید می‌بُرد و کلمه را می‌پیچد نه حرف را، تا اتصال فارسی بماند. عنوان مقاله برای شکستن علامت نخورده. عنوان فهرست وبلاگ چرا. در صفحه‌ی کم‌حرکت پیچیدن هنوز ممکن است باشد، ولی بالا آمدن — yPercent: 110 و درنگ — داخل بلوک GSAP است و اجرا نمی‌شود.
ورودهایی که نامرئی شروع می‌شوند
بلوک‌های کلاس reveal از شفافیت صفر و translateY(30px) شروع می‌کنند. این وقتی عمدی است که GSAP قرار است آن‌ها را ظاهر کند. اگر GSAP هرگز نرسد اشکال است. استایل این سوراخ را می‌بندد. زیر html.no-motion و زیر prefers-reduced-motion، .reveal شفافیت ۱ دارد و تبدیلی ندارد. ترجیح می‌دهم ورود را از دست بدهم تا بخشی منتظر محوی بماند که اتفاق نمی‌افتد.
گذار نما هم جزو همین معامله است. استایل برای ناوبری همان مبدأ یک انیمیشن شفافیت 0.28s روی ریشه می‌گذارد و وقتی حرکت کم باشد یا no-motion روی ریشه باشد آن ناوبری را خاموش می‌کند. اسکریپت حرکت همچنین به pageswap گوش می‌دهد. اگر صفحه کم‌حرکت باشد گذار را فوراً رد می‌کند. اگر گذاری در جریان باشد و تا 400ms تمام نشده باشد آن را هم رد می‌کند. گذار حق دارد کوتاه باشد. حق ندارد خودش صفحه شود.
کناره‌گیری آرام‌تری روی خود مقاله هست. حالت تمرکز، که پاراگراف‌های بیرون نوار میانی را تا شفافیت 0.55 کم‌رنگ می‌کند، فقط وقتی اضافه می‌شود که حرکت کم تنظیم نشده باشد. ستون خواندن به آن وابسته نیست. عرض سطر، و ضرب خواندن جای مشخص شدن آن ستون است. این‌جا کافی است که کم‌رنگ شدن حرکت است و حرکت را می‌شود نخواست.
معرفی از همان قاب اول اختیاری است
معرفی فقط روی خانه است. چیدمان وقتی صفحه بخواهد آن را می‌سازد و خانه همان صفحه‌ای است که می‌خواهد. لایه‌ای شفاف روی سند است، نه صفحه‌ای مات روی عنوان. عنوان از قبل در HTML است. دو سطر اسم به شکل ذره روی بوم کشیده می‌شود، به رنگ تأکیدی، بعد از اینکه document.fonts.load برای وزیرمتن و Inter در وزن همان نقاشی حل شود. اگر آن بار رد شود نقاشی ادامه پیدا می‌کند. ذره‌ها کمی بیشتر از یک ثانیه می‌روند مگر چیزی متوقفشان کند.
چیزی می‌تواند همان لحظه متوقفشان کند. دکمه‌ی رد کردن از اول در لایه است، رویداد اشاره‌گر مال خودش را دارد، و نه منتظر قلم می‌ماند نه منتظر قاب اول ذره‌ها. Escape همان پایان را صدا می‌زند. پایان نشست را علامت می‌زند، لایه را محو می‌کند، و به بقیه‌ی صفحه می‌گوید معرفی تمام شد تا ورودها بتوانند شروع شوند. گره بعد از محو شدن، با زمان‌سنج 900ms، برداشته می‌شود. لازم نیست رسیدن ذره‌ها را تماشا کنی.
دو حالت معرفی را پیش از آنکه آن اسکریپت بوم را بسازد برمی‌دارند. اسکریپت خطی داخل کامپوننت sessionStorage را برای intro-seen چک می‌کند و prefers-reduced-motion را هم. اگر یکی راست باشد عنصر فوراً حذف می‌شود. بازگشت در همان نشست دوباره پخشش نمی‌کند. کسی که حرکت کمتر خواسته بوم را اصلاً نمی‌گیرد. پرس‌وجوی intro=1 نشان ذخیره‌شده را پاک می‌کند تا لایه را بشود عمداً دوباره دید. این کلید دیدن معرفی است، نه دروازه‌ای جلوی عنوان.
معرفی Three.js نیست. بوم دوبعدی است. قاطی کردن این دو، خانه را سنگین‌تر از مسیری نشان می‌دهد که واقعاً اجرا می‌شود.
صحنه هنوز کجا اجازه دارد شروع شود
Three.js به دو جا محدود است. هیروی خانه یک بوم سوار می‌کند و از فراخوان بیکاری ماژول صحنه را می‌آورد. اگر حرکت کم جور باشد آن بوم پیش از واردات برداشته می‌شود، پس کتابخانه برای هیرو گرفته نمی‌شود. پروژه‌ها بوم دیگری دارند، شهر کامیت. ماژولش وقتی بوم به دید می‌آید وارد می‌شود، نه در نقاشی اول. داخل آن ماژول حرکت کم چرخش خودکار را خاموش می‌کند و حلقه‌ی پیوسته‌ی انیمیشن نگه نمی‌دارد. صحنه وقتی دوربین عوض شود یا اشاره‌گر تکان بخورد رسم می‌شود. قالب مقاله هیچ‌کدام از این بوم‌ها را سوار نمی‌کند، پس نوشته هیچ‌کدام از این واردات را شروع نمی‌کند.
دلیل آن دو صحنه، و دلیل اینکه صفحه‌های دیگر شریکشان نیستند، در صفحه‌ی استاتیک، و وقتی صحنه هزینه‌اش را درمی‌آورد است. این یادداشت قاعده‌ی تنگ‌تر است: اگر صفحه نخواسته انیمیشن را شروع نکن، و اگر خواننده از قبل رد کرده شروع نکن.
چند رفتار کوچک‌تر پیش از وصل شدن چک می‌کنند. مکان‌نمای ساختگی اشاره‌گر دقیق می‌خواهد و نبود حرکت کم. کج شدن کارت با صفحه‌ی کم‌حرکت فوراً برمی‌گردد. صفحه‌ی لمسی مکان‌نمای جعلی بزرگ نمی‌کند. این‌ها کنار GSAP آسان گم می‌شوند و همان تصمیم‌اند در اندازه‌ی کوچک‌تر.
چه چیزی هنوز اجازه دارد تکان بخورد
در صفحه‌ی غنی، بی‌ترجیح حرکت کم، کتابخانه‌ها واقعاً بار می‌شوند. عددها می‌شمارند. .reveal ظاهر می‌شود. کلمه‌های عنوان شکسته بالا می‌آیند. Lenis اسکرول را می‌گیرد. صحنه‌ی خانه می‌تواند بعد از معرفی بیاید، یا همان لحظه اگر عنصر معرفی نباشد. این نسخه‌ای از سایت است که می‌خواهم وقتی کسی از من نخواسته ساکت‌تر باشم.
نسخه‌ی دیگر همان است که مقاله همیشه می‌گیرد، و هر صفحه وقتی prefers-reduced-motion باشد می‌گیرد. متن با وزن واقعی، اسکرول بومی، ظهورهایی که از قبل دیده‌اند، بدون بوم معرفی، بدون رندرر هیرو. صفحه‌ی استاتیک به خواننده چه بدهکار است قول زیر این نسخه است: کلمه‌ها در فایل‌اند پیش از آنکه این اسکریپت‌ها تصمیم بگیرند اجرا شوند. چه کاری را برمی‌دارم و چه چیزی روی این دامنه نمی‌ماند در همکاری است.
اگر یک درخواست را دنبال کنی، مقاله‌ای را دنبال کن که حرکت کم روشن است. سند plain است و no-motion. GSAP و Lenis وارد نمی‌شوند. صحنه‌ی خانه روی صفحه نیست. معرفی روی صفحه نیست. آنچه می‌ماند ستون است، با همان عرضی که قالب از قبل انتخاب کرده.