Menerapkan Reduce Motion Pada Situs Web Kamu

Menerapkan Reduce Motion pada website sebenarnya adalah bare minimum yang harus dilakukan oleh developer. Ini bertujuan untuk menghormati preferensi sistem pengguna dengan mengurangi animasi berlebihan pada mereka yang sensitif terhadap gerakan visual ekstrim.

Biasanya memang selalu muncul pertanyaan baru:

"Emang ada website yang pake animasi ekstrem?"

Jawabannya tentu ada, dan pada artikel kali ini Sprouvy akan bahas bagaimana menerapkannya pada website kamu.

Daftar Isi

Sebelum memulai, kita harus tahu sekilas tentang Reduce Motion:

Apa itu Reduce Motion?

Reduce Motion atau yang dalam bahasa Indonesia berarti Kurangi Gerakan adalah fitur aksesibilitas yang memungkinkan sistem dan situs web mengurangi dengan menonaktifkan animasi, gerakan tiba-tiba, dan efek visual yang intens demi menjaga kenyamanan visual, fokus, serta kesehatan kognitif dan mental pengguna terutama bagi mereka yang sensitif terhadap gerakan.

Praktik Terbaik

Tentu saja aksesibilitas Reduce Motion SANGAT DISARANKAN bagi situs web atau aplikasi yang memiliki animasi dan transisi pada elemen-elemen mereka yang gerak dalam skala menengah hingga intens.

Sprouvy sendiri sudah menerapkan ini. Saat aksesibilitas pada perangkat kamu dalam keadaan Reduce Motion aktif, sebagian besar jendela sudah tidak ada animasi dan transisinya. Mengapa masih "sebagian besar", gak semua? Karena tidak semua animasi dan transisi itu mengganggu dan yang di-reduce adalah animasi dengan intensitas fatal. Reduce Motion menurunkan intensitasnya. Sesuai dengan namanya, Reduce = Kurangi.

Uji Coba Mekanismenya

Animasi di bawah ini akan berhenti saat kamu menyalakan reduce motion pada perangkatmu.

Sprouvy, help!!!!!!!!!!!!!

Galat sistem!

EXTREME ANIMATION CAN CAUSE SENSORY OVERLOAD, DIZZINESS, AND LOSS OF FOCUS. IT ALSO REDUCING COMFORT, COMPREHENSION, AND ACCESSIBILITY.

const bodyRect = document.body.getBoundingClientRect().top, const bodyRect = document.body.getBoundingClientRect().top, const bodyRect = document.body.getBoundingClientRect().top

Cara Mengaktifkan Reduce Motion Di Berbagai Perangkat

• macOS: Pengaturan Sistem -> Aksesibilitas -> Tampilan -> Aktifkan: Kurangi Gerakan
• Windows: Pengaturan -> Aksesibilitas -> Efek Visual -> Matikan: Efek Animasi
• iOS: Pengaturan -> Aksesibilitas -> Gerakan -> Aktifkan: Kurangi Gerakan
• Android: Pengaturan/Setelan -> Aksesibilitas -> Pengelihatan/Peningkatan Visibilitas -> Aktifkan: Hapus Animasi atau Kurangi Gerakan

Versi OS, Bahasa, Model dan Merek perangkat memengaruhi tata letak dan penamaan, silakan baca panduan perangkat kamu atau gunakan kolom pencarian di Pengaturan/Setelan.

Implementasi Reduce Motion untuk Situs Web Kamu

Setelah mengetahui mekanisme, penjelasan Reduce Motion itu sendiri, dan pratinjaunya, kita bisa langsung ke implementasi. Ada dua cara umum yang Sprouvy gunakan, yaitu JS dan CSS.

Melalui CSS (stylesheet)

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}.glitch,.shake,.parallax{animation: none !important;transform:none !important;}.fade,.collapse{transition-duration: 120ms;}}

Penanda merah: Matikan
Penanda hijau: Kurangi intensitasnya.
Pilih sesuai preferensi kamu antara mana yang dikurangi, dan mana yang dimusnahkan total.

Biasanya CSS aja sudah ampuh, tapi kalau masih bandel, suntik pake JS sekalian.

Melalui Javascript

const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
let prefersReducedMotion = motionQuery.matches;

const MOTION = {
  duration: prefersReducedMotion ? 0 : 400,
  shortDuration: prefersReducedMotion ? 0 : 160,
  delay: prefersReducedMotion ? 0 : 80,
  easing: prefersReducedMotion ? 'linear' : 'ease-out',
  iterations: prefersReducedMotion ? 1 : Infinity,
  translate: prefersReducedMotion ? 'none' : 'translateY(12px)',
  scale: prefersReducedMotion ? 1 : 1.05
};

function animateSafe(element, keyframes) {
  if (!element) return;
  element.animate(keyframes, {
    duration: MOTION.duration,
    easing: MOTION.easing,
    delay: MOTION.delay,
    fill: 'forwards',
    iterations: 1
  });
}

function animateIn(element) {
  animateSafe(element, [
    { opacity: 0, transform: 'none' },
    { opacity: 1, transform: MOTION.translate }
  ]);
}

let rafId = null;

function startLoop() {
  if (prefersReducedMotion) return;
  function loop() {
    rafId = requestAnimationFrame(loop);
  }
  loop();
}

function stopLoop() {
  if (rafId) {
    cancelAnimationFrame(rafId);
    rafId = null;
  }
}

let intervalId = null;

function startAutoPlay() {
  if (prefersReducedMotion) return;
  intervalId = setInterval(() => {}, 3000);
}

function stopAutoPlay() {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
}

function startAnimations() {
  prefersReducedMotion = motionQuery.matches;
  MOTION.duration = prefersReducedMotion ? 0 : 400;
  MOTION.delay = prefersReducedMotion ? 0 : 80;
  MOTION.easing = prefersReducedMotion ? 'linear' : 'ease-out';
  MOTION.translate = prefersReducedMotion ? 'none' : 'translateY(12px)';
  document.querySelectorAll('[data-animate]').forEach(el => animateIn(el));
  startLoop();
  startAutoPlay();
}

function stopAnimations() {
  stopLoop();
  stopAutoPlay();
}

motionQuery.addEventListener('change', event => {
  prefersReducedMotion = event.matches;
  prefersReducedMotion ? stopAnimations() : startAnimations();
});

document.addEventListener('DOMContentLoaded', () => {
  startAnimations();
});

Periksa lagi sesuai kebutuhan, karena ini merupakan cuplikan kode global, pusat. Jangan asal, soalnya malah bisa bikin berantakan.

Letakkan kode-kode di atas dalam space global, tentunya tanpa tag kondisional. Agar value diterapkan di seluruh web kamu.

Dengan membuat situs web/aplikasi kamu ramah bagi mereka yang sensitif terhadap gerakan berlebih, memiliki gangguan kecemasan, ADHD, autisme, gangguan vestibular, atau bahkan yang sekadar menginginkan pengalaman visual yang lebih tenang dan fokus, kamu sudah selangkah peduli terhadap mereka.

Kamu bisa memperoleh desain web maupun aplikasi yang ekstra rock and roll. Lalu bagi mereka yang tidak suka, bisa langsung mengurangi intensitas animasi-animasi itu di pengaturan perangkatnya.