Reduced Motion

Chapter penutup section Transitions dan Animations sudah memperkenalkan prefers-reduced-motion beserta pola globalnya. Kali ini kita menengah lebih dalam pada empat hal yang belum sempat dibahas: penyempurnaan kecil pada pola global yang menutup celah delay, pola kebalikannya yang membungkus animasi dalam no-preference, dua sumber gerakan yang sering lolos — scroll-behavior: smooth dan efek parallax — dan cara menguji semuanya dari DevTools tanpa mengubah setelan sistem operasi. Tujuan akhirnya tetap sama: gerakan adalah pelengkap, bukan syarat.

Siapa yang Dilayani Preferensi Ini #

Gangguan vestibular — kondisi pada sistem keseimbangan — membuat gerakan di layar memicu pusing dan mual, mirip motion sickness saat bepergian. Di sekitarnya masih ada beberapa kelompok yang sama-sama diuntungkan: pengguna yang sedang pulih dari cedera kepala, pemicu migrain, kecemasan yang diperberat gerakan berdenyut, hingga pengguna dengan perangkat yang tertinggal saat animasi berat berjalan. Setelan reduce motion di sistem operasi adalah cara kelompok ini menyatakan kebutuhannya, dan media query adalah jembatannya ke CSS:

@media (prefers-reduced-motion: reduce) {
  /* pengguna meminta gerakan sesedikit mungkin */
}

Satu penegasan dari chapter sebelumnya yang tetap berlaku: nilai reduce bukan perintah menghapus semua animasi. Umpan balik berupa perubahan warna atau bayangan tetap aman; yang perlu dihentikan adalah perpindahan, denyut berulang, dan gulir yang bergerak sendiri.

Pola Global yang Disempurnakan #

Pola global dari chapter Transitions menekan semua durasi hingga nyaris nol. Versi yang disempurnakan menutup satu celah yang sering terlewat — delay:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Kenapa delay ikut di-nolkan? Bila sebuah elemen masuk dengan animation-delay: 2s, penekanan durasi saja membuatnya tertahan di keadaan awal — mungkin transparan — selama dua detik penuh sebelum animasi selesai seketika. Dengan delay nol, perubahan menuju keadaan akhir terjadi hampir seketika, apa pun ritme aslinya.

Pola kebalikannya juga layak dikuasai. Alih-alih membatalkan animasi pada kondisi reduce, bungkus animasi dalam kondisi no-preference — animasi hanya lahir bila pengguna tidak menyatakan keberatan:

@media (prefers-reduced-motion: no-preference) {
  .kartu-produk {
    transition: transform 0.3s ease;
  }

  .kartu-produk:hover {
    transform: translateY(-4px);
  }
}

Keunggulan pola kedua: stylesheet dasar tetap tenang secara default, dan penambahan animasi tidak pernah bisa lupa mengatur pengecualiannya. Pola global tetap dipasang sebagai jaring pengaman, sementara fitur baru ditulis dengan pola no-preference.

scroll-behavior: smooth dan Gerakan Gulir #

Gulir halus adalah gerakan panjang sepanjang layar — tepat jenis gerakan yang dilaporkan mengganggu. Karena itu deklarasi scroll-behavior: smooth wajib punya penawar:

html {
  scroll-behavior: smooth; /* lompatan anchor terasa lancar */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* kembali ke lompatan langsung */
  }
}

Perhatikan batasnya: media query hanya menyetir CSS. Pemanggilan gulir dari JavaScript — misalnya scrollIntoView({ behavior: "smooth" }) — berada di luar jangkauan aturan ini dan perlu dibaca dari API preferensi yang sama di sisi skrip. Untuk pekerjaan CSS murni, pasangan dua blok di atas sudah menutup kebutuhan lompatan anchor.

Demo berikut memuat dua sumber gerakan sekaligus: kotak yang menggulir halus menuju paragraf tujuan, dan titik status yang berdenyut tanpa henti — keduanya menuruti preferensi yang sama. Bandingkan perilaku normal dan reduce lewat emulasi Rendering dari DevTools:

Teks status “Koneksi tersambung” memastikan informasinya tidak pernah bergantung pada denyutan.

Parallax dan Transform yang Terikat Gulir #

Efek parallax menggerakkan lapisan latar dengan kecepatan berbeda saat halaman digulir — kombinasi gerakan besar, terus-menerus, dan tidak bisa dijeda pengguna. Kelompok yang sama perlu diwaspadai pada background-attachment: fixed dan animasi translate/scale berjarak jauh yang dipicu posisi gulir. Dua pendekatan yang sehat:

• Nonaktifkan pada kondisi reduce. Lapisan parallax kembali bergerak seragam atau menjadi latar statis; halaman tetap lengkap, hanya lebih tenang.
• Jaga informasi tetap terbaca tanpa gerakan. Konten yang hanya terungkap lewat efek masuk perlu keadaan akhir yang tampil tanpa syarat — prinsip yang sama dengan chapter sebelumnya.

Menguji Tanpa Mengubah Setelan OS #

Chapter Transitions menutup dengan keterbatasan: preferensi dibaca saat halaman dimuat, sehingga memverifikasi kedua kondisi berarti mengubah setelan sistem operasi dan memuat ulang. DevTools menutup celah itu lewat panel Rendering:

DevTools (Chrome/Edge)
└─ Menu tiga titik (⋮) → More tools → Rendering
   └─ Drawer Rendering di bagian bawah
      └─ "Emulate CSS media feature prefers-reduced-motion"
         └─ pilih reduce / no-preference

Dengan emulasi aktif, media query langsung membaca nilai tiruan — tanpa menyentuh setelan sistem, tanpa memuat ulang. Panel yang sama menyediakan emulasi prefers-color-scheme dan simulasi kekurangan penglihatan (kabur, buta warna) yang membantu menilai kontras dari mata pengguna lain.

Kesalahan Umum #

Ringkasan #

Penghormatan reduced motion kini lengkap di dua arah: pola global — kini dengan reset delay — sebagai jaring pengaman, dan pola no-preference sebagai kebiasaan menulis fitur baru. Gerakan gulir halus, parallax, dan latar tetap masuk daftar yang dijaga, dan DevTools memberi cara menguji kedua kondisi tanpa menyentuh setelan sistem. Dari gerakan kita berpindah ke ukuran: chapter berikutnya memastikan halaman tetap utuh saat pengguna memperbesar teks hingga 200%.