Matilah scroll fade

• Mengkritik efek ‘scroll fade’ di situs web, yaitu elemen yang muncul perlahan saat halaman digulir, serta menyoroti ketidaknyamanan visual dan kompleksitas pengembangannya
• Dijelaskan bahwa sebagian besar implementasi merusak pengalaman pengguna karena efek transisi yang berlebihan dan timing yang tidak tepat, sekaligus membebani developer
• Disebutkan dampak negatif terhadap pengguna nyata, termasuk masalah aksesibilitas dan gangguan vestibular (vestibular disorders)
• Efek seperti ini juga dapat menyebabkan penurunan performa dan memburuknya Core Web Vitals (seperti LCP), dan sering diterapkan tanpa pengujian maupun validasi yang memadai
• Tulisan ini menegaskan bahwa “scroll fade bukan solusi cepat, melainkan fitur kompleks yang harus dirancang sejak awal”, dan dengan tegas menyerukan agar praktik ini dihentikan

---

Masalah pada scroll fade

• Scroll fade adalah efek visual saat elemen muncul perlahan ketika pengguna menggulir halaman, sering dipakai bersama transformasi transform pada sumbu Y
  • Penulis menyebutnya sebagai “pengalaman yang mengerikan” dan mengatakan efek ini biasanya diterapkan sama rata ke semua pengguna
• Meskipun efek ini mungkin bisa diterima jika diatur dengan sangat halus, dalam kebanyakan kasus efeknya diterapkan berlebihan sehingga terasa tidak nyaman secara visual
  • Disebutkan juga kasus ketika permintaan “buat semua elemen jadi fade” muncul saat proyek sudah hampir selesai
• Penulis menilai ini sebagai “upaya keliru untuk menghilangkan kebosanan”, yang justru membuat situs terlihat lebih kasar dan murahan

Aksesibilitas dan dampak pada pengguna

• Banyak developer menjadikan aksesibilitas (accessibility) sebagai alasan utama untuk menolak efek ini
  • Khususnya, pengguna dengan gangguan vestibular (vestibular disorders) dapat mengalami ketidaknyamanan akibat efek gerakan
  • Memang ada perlindungan sebagian melalui media query CSS prefers-reduced-motion, tetapi penulis berpendapat bahwa gerakan seharusnya nonaktif secara default (opt-in)
• Masalah beban kognitif (cognitive overload) dan distraksi perhatian juga disorot
  • Disebutkan pula bahwa banyak situs yang dibuat dengan perangkat Apple berperilaku berbeda di lingkungan Windows, Linux, dan Android

Masalah pengujian dan performa

• Ditekankan bahwa sebelum menerapkan efek scroll fade, perlu ada pengujian pengguna nyata dan validasi performa
  • Harus dipastikan apakah pengguna masih bisa menyelesaikan tugasnya, dan apakah bounce rate meningkat atau tidak
  • Jika tidak ada niat untuk menguji, penulis memperingatkan agar “jangan ambil risiko itu”
• Penulis menyebut skripnya memanfaatkan teknik “This CSS Will Self-Destruct” dari Scott Jehl
  • Teknik ini diperkenalkan sebagai bentuk perlindungan jika JavaScript dinonaktifkan

Dampak pada Core Web Vitals dan SEO

• Scroll fade dinilai sangat mungkin memperburuk metrik Core Web Vitals, termasuk Largest Contentful Paint (LCP)
  • Meski tidak menyajikan data langsung, penulis mengatakan bahwa situs-situs yang pernah ia cek sebelumnya menunjukkan “LCP yang mengerikan”
• Soal dampak SEO, penulis bersikap sinis dan satiris, dengan mengatakan bahwa “Google juga disebut-sebut menyajikan konten berkualitas rendah”
  • Meski begitu, ia tetap menunjukkan niat untuk membantu mengusir efek ini dari tren lewat tulisan blognya

Kesimpulan: deklarasi larangan scroll fade

• Di bawah judul “5 efek scroll fade keren”, penulis menutup secara satiris dengan mengulang “jangan lakukan” lima kali
• Ia menekankan bahwa scroll fade bukan solusi cepat, melainkan fitur kompleks yang harus dirancang sejak awal dengan mempertimbangkan keseluruhan struktur situs
• Tulisan ditutup dengan candaan bahwa para developer sebaiknya secara kolektif menyatakan ini “tidak mungkin secara teknis”
• Pesan akhirnya jelas: “Matilah scroll fade (Death to scroll fade)”

[GN⁺]

Komentar Hacker News

• Secara pribadi ada elemen terkait scroll yang benar-benar aku benci
  yaitu sticky header yang hilang saat scroll ke bawah lalu muncul lagi saat scroll ke atas
  Gerakan berkedip itu sangat mengganggu setiap kali halaman bergerak naik-turun
  Kalau dihilangkan dengan sesuatu seperti uBlock, header malah menghilang juga saat berada di bagian paling atas halaman, jadi merepotkan

  • Sangat setuju. Aku punya kebiasaan selalu menempatkan kalimat yang sedang kubaca di bagian paling atas layar, jadi kalau mau membaca ulang kalimat itu aku harus melewati header setiap kali
  • Ini memang hanya mudah dipakai di desktop, tapi ada solusi yang cukup memuaskan
    Aku merekomendasikan skrip Kill Sticky Headers
  • Safari punya fitur “Remove Distracting Elements”
    Beberapa situs memang begitu mengganggu sampai rasanya perlu membawa ‘alat pembasmi hama’

• “Reader Mode” seharusnya bukan mode khusus, melainkan pengalaman browsing default
  Justru kalau ingin styling yang heboh, menurutku harus menyalakan “Clown Mode”

  • Aku ingin reader mode yang merender seluruh halaman sebagai satu gambar panjang lalu menggulirkannya
    Browser seolah-olah menipu halaman dengan mengatakan, “semua konten sudah ada di layar”
  • Alasan reader mode bukan default adalah karena ingin mencegah pembuat situs sengaja merusak fitur itu
  • Di macOS dan iOS, reader mode bisa diatur sebagai default
  • Akan bagus jika reader mode otomatis aktif saat halaman dibuka, lalu bila perlu bisa dimatikan dengan ESC dalam beberapa detik
  • Ungkapan “Clown Mode” itu lucu sekali. Jadi teringat tema “Fisher-Price” di Windows XP dulu

• Awalnya kukira ini membahas iOS
  Sejak iOS 26, ada efek bagian atas halaman web yang memudar menjadi abu-abu, dan itu sangat mengganggu
  Warna teks berubah secara dinamis sehingga pandangan terus tertarik ke atas
  Sulit dipercaya Apple tidak sadar soal gangguan visual seperti ini, jadi aku heran kenapa desainnya dibuat begitu

  • Contoh yang lebih parah, aplikasi Music di iOS memindahkan kontrol pemutaran ke atas konten sehingga menumpuk secara transparan
    Konten di bawahnya juga terkena efek scroll fade
  • Jika menyalakan “Reduce Transparency”, bagian atas dan bawah berubah menjadi ruang kosong putih
    Lucu juga karena iPhone-ku jadi terlihat seperti desain era tombol Home lagi

• Katanya efek ini sudah menyebar ke seluruh web, tapi aku baru melihatnya kali ini
  Kalau ada animasi bergerak di depan mata, aku tidak bisa membaca tulisan
  Meski begitu, animasi ikan mas di bagian bawah keren juga dan ingin kupakai terpisah

  • Aku sering melihat efek ini di situs-situs Anthropic
    Misalnya di halaman Claude Agents efeknya terlihat jelas
    Tampaknya style guide Claude menyebar juga ke situs lain berbasis LLM
  • Sebenarnya efek seperti ini sangat umum di halaman pemasaran SaaS
    Bukan cuma fade-in sederhana, tetapi juga sering muncul sebagai slide dari samping
  • Aku juga sedang mendesain ulang situs, dan Claude sempat menyarankan animasi seperti ini
    Jika Claude merekomendasikannya dengan begitu yakin, mungkin artinya sudah banyak orang yang menirunya
  • Kalau diimplementasikan dengan baik, ini bisa menjadi efek halus dan menyenangkan untuk mengarahkan perhatian
    Situs ini adalah contoh yang sengaja dibuat berlebihan
  • Situs seperti history-of-animation.webflow.io juga layak dijadikan referensi

• Menurutku tren scroll fade ini berasal dari salah paham akibat bug
  Awalnya itu cuma kedipan karena lazy loading gambar
  Lalu para desainer salah mengira itu sebagai efek yang disengaja dan berpikir, “ayo kita bikin fade yang cantik”

  • Tapi pada kenyataannya ini cuma desain berlebihan demi terlihat keren
    Ada kecenderungan terobsesi pada scroll itu sendiri, bukan pada kontennya
  • Meski begitu, rasanya ini tetap arus yang berbeda, bukan sekadar bug semata

• Aku mau bilang lebih jauh lagi — parallax scrolling juga harus menghilang
  Aku berharap semua animasi saat scroll lenyap saja

  • Scroll cukup menjadi gerakan sederhana yang memindahkan tampilan berukuran tetap ke atas dan ke bawah
  • Tentu saja paralaks gambar yang halus masih oke
    Tapi kalau berbagai elemen bergerak dengan kecepatan berbeda seenaknya, itu yang paling buruk
  • Aku bukan menentang animasi itu sendiri, tapi kalau dipakai berlebihan tanpa tujuan rasanya seperti makanan yang kebanyakan disiram saus tomat
  • Aku sangat tidak suka ketika event scroll dioverride
    Itu merusak smooth scrolling milik Vimium

• Halaman ini benar-benar puncak pemicu mabuk gerak
  Aku mengalami mabuk perjalanan parah sejak kecil, dan sampai sekarang bus atau lift tetap menyiksa
  Melihat halaman ini beberapa detik saja sudah membuatku ingin muntah, jadi langsung kuubah ke reader mode
  Meski begitu, aku senang kesadaran terhadap masalah seperti ini makin meningkat

  • Aku juga sama-sama mengalami mabuk perjalanan parah
    Kalau bukan duduk di kursi pengemudi, rasanya menyiksa, dan orang lain tidak memahaminya
    Terutama kebiasaan mengemudi yang berulang kali akselerasi-deselerasi, itu benar-benar seperti siksaan
  • Syukurlah bukan cuma aku
    Baru melihatnya beberapa menit saja sudah cukup membuat migrain datang
  • Aku tidak punya mabuk perjalanan pun, tapi halaman ini tetap membuatku merasa mual
    Pengalaman yang benar-benar mengerikan

• Dulu aku pernah bekerja dengan klien yang menyukai scrolljacking
  Begitu dia menemukan efek paralaks, dia langsung tergila-gila padanya dan akhirnya memecatku
  Sekarang situs itu tersendat-sendat di semua perangkat selain iPhone 16+

• Detail terakhir yang menonjol — bagian yang membuat teks tidak terlihat saat dipilih
  Secara realistis, jarang ada situs yang sulit dibaca sampai memperhatikan detail sekecil itu

  • Biasanya mereka malah memblokir pemilihan teks itu sendiri demi melindungi “teks suci”

• Saat menangani animasi, aku memakai aturan yang sangat sederhana

  animationCount = 0
  animateElement(el) {
    el.animate({duration: BASE_DURATION / animationCount})
    animationCount++
  }
  

  Caranya adalah mengurangi durasi animasi setiap kali berulang
  Awalnya terasa kuat, tetapi makin lama makin singkat sehingga keseluruhannya memberi kesan ringan dan gesit