ทำไมเราไม่ใช้ AOS ทำอนิเมชั่นตอนเลื่อนหน้า

AOS เป็นไลบรารีที่ใช้กันแพร่หลายมากสำหรับทำเอฟเฟกต์ให้เนื้อหาค่อย ๆ ปรากฏเมื่อเลื่อนหน้าจอลงมาถึง มันติดตั้งง่าย เขียนแค่ attribute เดียวก็ใช้ได้ และนั่นคือเหตุผลที่มันได้รับความนิยม

ปัญหาเริ่มตอนใช้กับเว็บที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ AOS ทำงานหลังจากหน้าเว็บ hydrate เสร็จแล้ว แปลว่าช่วงเสี้ยววินาทีแรกเนื้อหาจะแสดงตามปกติ จากนั้นจึงถูกซ่อนแล้วค่อยเฟดกลับเข้ามา ผู้ใช้เห็นเป็นการกระพริบ และเครื่องมือวัด Core Web Vitals เห็นเป็น Cumulative Layout Shift

ทางแก้คือย้ายสถานะเริ่มต้นไปไว้ใน CSS ให้สถานะ "ซ่อน" ถูกส่งมาพร้อม HTML ตั้งแต่เซิร์ฟเวอร์ แล้วให้ JavaScript ทำหน้าที่เดียวคือเติม attribute เมื่อ IntersectionObserver แจ้งว่าองค์ประกอบเข้ามาในจอแล้ว

ผลที่ได้คือไม่มีการกระพริบ ไม่มี layout shift และไม่ต้องโหลดไลบรารีเพิ่มเลย โค้ดทั้งหมดประมาณสี่สิบบรรทัด

ข้อสำคัญที่มักถูกมองข้ามคือกรณีที่ JavaScript ไม่ทำงาน ถ้าเราซ่อนเนื้อหาด้วย opacity: 0 แล้วพึ่ง JavaScript อย่างเดียว เว็บที่เปิดโดยไม่มี JavaScript จะกลายเป็นหน้าขาว ซึ่งรวมถึงกรณีที่สคริปต์โหลดไม่สำเร็จด้วย ทางแก้คือใส่กฎใน noscript เพื่อยกเลิกการซ่อนทั้งหมด

สุดท้ายคือเรื่องการเข้าถึง ผู้ใช้บางคนตั้งค่าระบบให้ลดการเคลื่อนไหวเพราะอาการเวียนศีรษะ การเคารพ prefers-reduced-motion ไม่ใช่ทางเลือก แต่เป็นข้อกำหนดใน WCAG และการเขียนเองทำให้ควบคุมจุดนี้ได้โดยตรง