‏انیمیشن‌های scroll-triggered توی CSS اومدن

سید استامپل توی این یادداشت می‌گه خودش هم تازه فهمیده انیمیشن‌های scroll-triggered (یعنی انیمیشنی که رسیدن به یه نقطه از اسکرول راه‌ش می‌ندازه) توی مرورگرهای Chromium فعال شدن. اون هم وقتی برموس فان دامه زیر پست کوین پاول بهش اشاره کرده. به گفته نویسنده این ویژگی هنوز حتی روی MDN مستند نشده و تقریباً هیچ تبلیغی براش نشده، برای همین خیلی‌ها از قلم انداختنش.

فرق سه مدل انیمیشن ساده‌ست. انیمیشن معمولی بلافاصله یا بعد از یه delay شروع می‌شه و طولش رو زمان تعیین می‌کنه. انیمیشن scroll-driven پیشرفتش به موقعیت اسکرول گره خورده، پس کاربر می‌تونه هر لحظه وسط راه وایسه. انیمیشن scroll-triggered فقط با فعال شدن یه trigger راه می‌افته و بعدش روی تایم‌لاین زمانی خودش تا آخر می‌ره، هرچند با خارج شدن از محدوده فعال می‌شه قطعش کرد.

نویسنده می‌گه همین تفاوت باعث می‌شه scroll-triggered برای ریویل متن و انیمیشن‌هایی که فقط یک‌بار باید پخش بشن انتخاب بهتری باشه، چون لازم نیست نگران باشی کی‌فریم وسط راه بد به‌نظر بیاد. در عوض scroll-driven هنوز برای پارالاکس و نوار پیشرفت اسکرول جای خودش رو داره.

ساختنش دو تیکه لازم داره: روی عنصر trigger مجموعه timeline-trigger-* و روی عنصری که انیمیت می‌شه، خود انیمیشن به‌علاوه animation-trigger. نکته مهم اینه که animation-trigger رو نمی‌شه داخل شورت‌هند animation نوشت و باید جدا و بعد از اون بیاد تا بازنویسی نشه:

.trigger {
  timeline-trigger-name: --trigger;
  timeline-trigger-source: view();
  timeline-trigger-activation-range: entry 10% exit 100%;
}

.animation-element {
  animation-name: clip-in;
  animation-trigger: --trigger play-forwards play-backwards;
}

جایی که نویسنده می‌گه چند بار سرش گیج شده، تفاوت activation range و active range ـه. مقدارهای activation فقط تا وقتی اعمال می‌شن که trigger هنوز فعال نشده، و active range وقتی اعمال می‌شه که انیمیشن فعال شده باشه؛ اگه ننویسیش، همون مقدارهای activation رو به ارث می‌بره. اکشن‌ها هم دوتایی نوشته می‌شن: اولی موقع ورود به محدوده فعال و دومی موقع خروج. گزینه‌ها play، play-forwards، play-backwards، play-once، pause، replay، reset و none هستن.

محدودیت‌ها هم کم نیست. پشتیبانی فعلاً فقط Chromium ـه، پس نویسنده توصیه می‌کنه به‌عنوان enhancement ازش استفاده کنین: مرورگر بی‌پشتیبانی این property ها رو نادیده می‌گیره و انیمیشن بلافاصله پخش می‌شه، و اگه انیمیشن عنصر رو مخفی می‌کنه بهتره داخل یه at-rule از نوع supports بذاریدش. نکته دیگه اینه که محدوده انیمیشن رو عنصر trigger تعیین می‌کنه نه عنصری که انیمیت می‌شه، که گاهی مجبورت می‌کنه عنصر اضافه بسازی. و مثل همیشه، انیمیشن‌ها باید داخل prefers-reduced-motion بیان.

نکات کلیدی:

• scroll-triggered فقط شروع انیمیشن رو به اسکرول وصل می‌کنه و پیشرفتش زمانیه، برخلاف scroll-driven
• حداقل چیزی که لازمه: timeline-trigger-name، timeline-trigger-source و animation-trigger
• اسکوپ تریگرها به‌صورت پیش‌فرض global ـه و با trigger-scope محدود می‌شه
• هشت اکشن موجوده: play، play-forwards، play-backwards، play-once، pause، replay، reset، none
• پشتیبانی فقط توی مرورگرهای Chromium ـه و ویژگی هنوز روی MDN مستند نشده