Menguasai CSS @scroll-timeline: Mengontrol Animasi Melalui Progres Gulir

Dalam lanskap pengembangan web yang terus berkembang, menciptakan pengalaman pengguna yang menarik dan interaktif adalah hal yang terpenting. CSS menawarkan berbagai alat untuk mencapai ini, dan salah satu yang paling kuat, namun sering terlewatkan, adalah at-rule @scroll-timeline. Fitur ini memungkinkan pengembang untuk mengikat animasi secara langsung ke progres gulir suatu elemen, menciptakan animasi berbasis gulir yang menawan. Artikel ini memberikan eksplorasi komprehensif tentang @scroll-timeline, mencakup sintaksis, properti, penggunaan praktis, dan teknik animasi tingkat lanjut untuk meningkatkan desain web Anda.

Apa itu CSS @scroll-timeline?

@scroll-timeline adalah sebuah at-rule CSS yang mendefinisikan linimasa gulir (scroll timeline), yang pada dasarnya adalah urutan status yang sesuai dengan posisi gulir dari elemen yang ditentukan. Alih-alih mengandalkan animasi berbasis waktu tradisional, @scroll-timeline menghubungkan progres animasi dengan tindakan menggulir pengguna. Hal ini menghasilkan animasi yang lebih alami dan responsif, karena kecepatan animasi dikontrol langsung oleh perilaku menggulir pengguna.

Ini membuka kemungkinan menarik untuk:

• Penceritaan visual: Mengungkap konten secara progresif saat pengguna menggulir.
• Visualisasi data interaktif: Menganimasikan bagan dan grafik saat pengguna menjelajahi data.
• Efek paralaks: Menciptakan kedalaman dan dimensi dengan menganimasikan elemen yang berbeda pada kecepatan yang bervariasi berdasarkan posisi gulir.
• Indikator progres: Merepresentasikan progres pengguna secara visual melalui dokumen yang panjang.

Sintaksis dan Properti

Sintaksis dasar dari at-rule @scroll-timeline adalah sebagai berikut:

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Mari kita bedah setiap properti:

timeline-name

Ini adalah pengidentifikasi unik untuk linimasa gulir Anda. Anda akan menggunakan nama ini untuk merujuk ke linimasa saat menerapkannya pada sebuah animasi.

Contoh:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

Properti ini menentukan elemen yang posisi gulirnya akan mendorong animasi. Ini bisa memiliki dua nilai:

• auto: Browser secara otomatis menentukan elemen yang menggulir. Ini sering kali adalah viewport dokumen (jendela browser).
• <element-selector>: Sebuah selektor CSS yang mengidentifikasi elemen spesifik untuk digunakan sebagai sumber gulir. Ini memungkinkan Anda untuk menargetkan kontainer atau bagian tertentu di halaman Anda.

Contoh (menggunakan viewport sebagai sumber):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Menggunakan viewport */
  /* ... */
}

            

              
                Copy
              
            
          

Contoh (menggunakan elemen spesifik sebagai sumber):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Menggunakan elemen dengan ID "scrollable-container" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Properti ini menentukan arah gulir yang akan digunakan untuk linimasa. Ini menentukan apakah animasi didorong oleh gulir vertikal atau horizontal. Ini bisa memiliki tiga nilai:

• auto: Browser secara otomatis menentukan arah gulir berdasarkan arah gulir dominan dari elemen sumber.
• block: Menggunakan arah gulir blok (vertikal, dalam sebagian besar mode penulisan).
• inline: Menggunakan arah gulir inline (horizontal, dalam sebagian besar mode penulisan).

Contoh (menggunakan gulir vertikal):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Gulir vertikal */
  /* ... */
}

            

              
                Copy
              
            
          

Contoh (menggunakan gulir horizontal):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Gulir horizontal */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Properti ini mendefinisikan posisi gulir yang sesuai dengan titik-titik tertentu dalam animasi. Ini adalah properti opsional, dan jika tidak ditentukan, animasi akan diputar dari awal hingga akhir area yang dapat digulir. Saat digunakan, Anda dapat mendefinisikan satu atau lebih offset gulir, masing-masing menentukan posisi gulir dan titik yang sesuai dalam progres animasi.

Sintaksis untuk <scroll-offset> adalah:

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Di mana:

• <length-percentage> pertama merepresentasikan posisi gulir di dalam area yang dapat digulir.
• at <length-percentage> yang opsional merepresentasikan progres animasi yang sesuai (0% hingga 100%). Jika dihilangkan, progres animasi didistribusikan secara merata di antara offset gulir yang ditentukan.

Contoh:

            /* Posisi gulir 200px sesuai dengan progres animasi 0% */
scroll-offsets: 200px at 0%;

/* Posisi gulir pada 50% dari area yang dapat digulir sesuai dengan progres animasi 50% */
scroll-offsets: 50% at 50%;

/* Beberapa offset: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Tanpa kata kunci "at" - progres animasi didistribusikan secara merata: */
scroll-offsets: 0px, 500px, 1000px; /* Setara dengan 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Pertimbangan Penting untuk scroll-offsets:

• Jika Anda menentukan scroll-offsets, pastikan bahwa offset tersebut mencakup rentang area yang dapat digulir untuk menghindari perilaku animasi yang tidak terduga.
• Progres animasi diinterpolasi di antara offset gulir yang ditentukan.
• Jika Anda tidak menentukan scroll-offsets, progres animasi akan didistribusikan secara merata di seluruh area yang dapat digulir.

Menerapkan Linimasa Gulir ke Animasi

Setelah Anda mendefinisikan linimasa gulir Anda, Anda perlu menerapkannya ke animasi CSS menggunakan properti animation-timeline.

Sintaksisnya sederhana:

            animation-timeline: timeline-name; /* Gunakan nama yang Anda definisikan di @scroll-timeline */

            

              
                Copy
              
            
          

Anda juga perlu mendefinisikan animasi CSS standar menggunakan @keyframes. Animasi ini mendefinisikan perubahan properti CSS yang akan terjadi saat pengguna menggulir. Lebih lanjut, Anda akan ingin memastikan properti CSS `animation-range` diatur. Ini mendefinisikan rentang linimasa gulir yang akan mengaktifkan animasi.

Berikut adalah contoh lengkap:

            /* Definisikan linimasa gulir */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Definisikan animasi */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Terapkan animasi dan linimasa gulir ke sebuah elemen */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry dan cover adalah nilai kata kunci untuk rentang awal dan akhir */
}

            

              
                Copy
              
            
          

Dalam contoh ini:

• @scroll-timeline bernama my-scroll-timeline didefinisikan, menggunakan viewport sebagai sumber dan gulir vertikal sebagai orientasi.
• @keyframes bernama fade-in mendefinisikan animasi fade-in dan slide-up sederhana.
• Kelas .animated-element memiliki animasi fade-in yang diterapkan, tetapi alih-alih dipicu oleh timer, animasi ini dikendalikan oleh my-scroll-timeline.
• animation-range mendefinisikan bahwa animasi harus dimulai ketika tepi atas elemen memasuki 25% bagian bawah viewport dan selesai ketika meninggalkan 25% bagian atas.

Contoh Praktis dan Kasus Penggunaan

Mari kita jelajahi beberapa contoh praktis tentang bagaimana Anda dapat menggunakan @scroll-timeline untuk menciptakan pengalaman web yang menarik.

1. Mengungkap Konten Secara Progresif

Ini adalah kasus penggunaan umum di mana Anda mengungkapkan konten saat pengguna menggulir ke bawah halaman. Bayangkan sebuah artikel panjang dengan bagian-bagian yang muncul secara fade-in saat masuk ke dalam pandangan.

HTML:

            <section class="content-section">
  <h2>Bagian 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Bagian 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

Dalam contoh ini, setiap .content-section akan muncul secara fade-in saat digulir ke dalam viewport. `animation-range` memastikan animasi dimulai ketika tepi atas bagian tersebut memasuki 25% bagian bawah viewport dan selesai ketika bagian tersebut meninggalkan 25% bagian atas.

2. Efek Paralaks

Efek paralaks menciptakan kesan kedalaman dengan menggerakkan elemen latar belakang pada kecepatan yang berbeda dari elemen latar depan. @scroll-timeline memudahkan implementasi gulir paralaks.

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Bagian Paralaks</h2>
    <p>Beberapa konten di sini...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Sesuaikan sesuai kebutuhan */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Ganti dengan gambar Anda */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Menciptakan efek paralaks */
  transform-origin: top;
  pointer-events: none; /* Memungkinkan klik pada elemen latar depan */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

Dalam contoh ini, .background-element diposisikan di belakang .foreground-element dan diperbesar menggunakan transform. Animasi `parallax-bg` kemudian diterapkan, menyebabkan latar belakang bergerak lebih lambat daripada latar depan saat pengguna menggulir, menciptakan efek paralaks. `animation-range` memastikan animasi berjalan di seluruh ketinggian viewport (0vh hingga 100vh).

3. Menganimasikan Bilah Progres

Anda dapat menggunakan @scroll-timeline untuk membuat bilah progres yang secara visual merepresentasikan progres gulir pengguna melalui sebuah dokumen.

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Konten Anda di sini -->
</div>

            

              
                Copy
              
            
          

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

Dalam contoh ini, lebar .progress-bar dianimasikan dari 0% hingga 100% saat pengguna menggulir dokumen. @scroll-timeline diberi nama `document-scroll-timeline`, membuatnya jelas apa yang diwakilinya.

Teknik Tingkat Lanjut

Setelah Anda memahami dasarnya, Anda dapat menjelajahi beberapa teknik tingkat lanjut untuk membuat animasi berbasis gulir yang lebih canggih.

1. Menggunakan scroll-offsets untuk Kontrol yang Presisi

Properti scroll-offsets memungkinkan Anda untuk memetakan posisi gulir spesifik ke nilai progres animasi spesifik. Ini berguna ketika Anda ingin memicu status animasi tertentu pada titik-titik yang tepat selama menggulir.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

Dalam contoh ini, animasi akan:

• Mulai pada translateX(-100px) dan opacity: 0 ketika posisi gulir adalah 100px.
• Mencapai translateX(0) dan opacity: 1 ketika posisi gulir adalah 500px.
• Berakhir pada translateX(100px) dan opacity: 0 ketika posisi gulir adalah 1000px.

2. Menggabungkan dengan JavaScript

Meskipun @scroll-timeline menawarkan kontrol animasi yang kuat melalui CSS, Anda dapat menggabungkannya dengan JavaScript untuk fleksibilitas yang lebih besar. Sebagai contoh, Anda mungkin menggunakan JavaScript untuk:

• Menghitung dan memperbarui scroll-offsets secara dinamis berdasarkan ukuran viewport atau perubahan konten.
• Memicu efek atau interaksi berbasis JavaScript tambahan berdasarkan progres gulir.
• Mengimplementasikan solusi fallback untuk browser yang tidak sepenuhnya mendukung @scroll-timeline.

Berikut adalah contoh dasar penggunaan JavaScript untuk membaca progres gulir dan memperbarui variabel CSS:

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

Anda kemudian dapat menggunakan variabel CSS ini di dalam animasi Anda:

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Nilai awal */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Memanfaatkan Fungsi Easing yang Berbeda

Meskipun animation-timing-function tidak berlaku secara langsung pada linimasa gulir itu sendiri (karena linimasa didorong oleh progres gulir, bukan waktu), Anda masih dapat menggunakan fungsi easing di dalam @keyframes Anda untuk mengontrol kecepatan dan ritme animasi pada berbagai tahap. Bereksperimenlah dengan berbagai fungsi easing seperti ease-in, ease-out, ease-in-out, atau bahkan kurva bezier kubik kustom untuk mencapai efek yang diinginkan.

Kompatibilitas Browser dan Fallback

Hingga akhir tahun 2023, @scroll-timeline menikmati dukungan browser yang relatif baik di browser modern seperti Chrome, Edge, Firefox, dan Safari. Namun, penting untuk memeriksa status kompatibilitas saat ini di situs web seperti Can I use... sebelum mengimplementasikannya di produksi.

Untuk browser yang tidak mendukung @scroll-timeline, Anda dapat menyediakan fallback menggunakan event listener gulir berbasis JavaScript tradisional dan pustaka animasi seperti GSAP (GreenSock Animation Platform) atau Anime.js. Anda juga dapat menggunakan query fitur CSS (@supports) untuk menerapkan animasi berbasis @scroll-timeline atau fallback berbasis JavaScript secara kondisional.

            @supports (animation-timeline: scroll()) {
  /* Terapkan animasi berbasis @scroll-timeline */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* Terapkan fallback berbasis JavaScript */
  .animated-element {
    /* Sembunyikan pada awalnya */
    opacity: 0;
  }

  /* (Kode JavaScript untuk mendeteksi gulir dan menerapkan opacity) */
}

            

              
                Copy
              
            
          

Pertimbangan Aksesibilitas

Saat menggunakan @scroll-timeline atau teknik animasi apa pun, sangat penting untuk mempertimbangkan aksesibilitas. Pastikan animasi Anda tidak menyebabkan:

• Kejang: Hindari animasi yang berkedip atau berubah dengan cepat.
• Distraksi: Sediakan cara bagi pengguna untuk menjeda atau menonaktifkan animasi, terutama jika animasi tersebut panjang atau mengganggu.
• Beban kognitif berlebih: Gunakan animasi secukupnya dan pastikan animasi tersebut memiliki tujuan yang jelas, bukan sekadar dekoratif.
• Mabuk gerak: Berhati-hatilah dengan efek paralaks, karena dapat memicu mabuk gerak pada beberapa pengguna.

Pertimbangkan untuk menyediakan cara alternatif untuk mengakses informasi yang disajikan melalui animasi, seperti konten statis atau teks deskriptif. Gunakan atribut ARIA untuk memberikan makna semantik dan konteks kepada teknologi bantu.

Praktik Terbaik

Berikut adalah beberapa praktik terbaik yang perlu diingat saat bekerja dengan @scroll-timeline:

• Gunakan nama linimasa yang deskriptif: Pilih nama linimasa yang dengan jelas menunjukkan tujuannya (misalnya, parallax-background-timeline, reveal-section-timeline).
• Jaga agar animasi tetap berperforma: Optimalkan animasi Anda untuk menghindari hambatan kinerja. Gunakan properti CSS yang dipercepat perangkat keras seperti transform dan opacity bila memungkinkan.
• Uji secara menyeluruh: Uji animasi Anda di berbagai perangkat dan browser untuk memastikan animasi berfungsi seperti yang diharapkan dan tidak menimbulkan masalah aksesibilitas atau kinerja.
• Mulai dari yang Sederhana: Mulailah dengan animasi sederhana dan secara bertahap tambahkan kompleksitas seiring bertambahnya pengalaman Anda.
• Pertimbangkan Pengalaman Pengguna: Pastikan animasi Anda meningkatkan pengalaman pengguna, bukan menguranginya. Hindari animasi yang terlalu rumit atau mengganggu.
• Gunakan properti CSS `animation-range`: Pastikan animasi hanya terpicu ketika elemen berada di viewport untuk pengalaman yang mulus dan dapat diprediksi.

Kesimpulan

@scroll-timeline adalah fitur CSS yang kuat yang memungkinkan pengembang untuk membuat animasi berbasis gulir yang menarik dan interaktif. Dengan menghubungkan animasi dengan perilaku menggulir pengguna, Anda dapat menciptakan pengalaman web yang lebih alami dan responsif. Dengan memahami sintaksis, properti, dan teknik tingkat lanjutnya, Anda dapat memanfaatkan @scroll-timeline untuk meningkatkan desain web Anda dan menciptakan perjalanan pengguna yang menawan. Ingatlah untuk mempertimbangkan kompatibilitas browser, aksesibilitas, dan kinerja saat mengimplementasikan @scroll-timeline, dan selalu prioritaskan pengalaman pengguna.