Menganimasikan elemen saat men-scroll dengan animasi berbasis Scroll

Pelajari cara menggunakan Linimasa Scroll dan Linimasa Tampilan untuk membuat animasi berbasis scroll secara deklaratif.

Bramus

Dipublikasikan: 5 Mei 2023

Animasi berbasis scroll

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Animasi yang digerakkan scroll adalah pola UX umum di web. Animasi berbasis scroll ditautkan ke posisi scroll dalam container scroll. Artinya, saat Anda melakukan scroll ke atas atau ke bawah, animasi tertaut akan bergerak maju atau mundur sebagai respons langsung. Contohnya adalah efek seperti gambar latar paralaks atau indikator baca yang bergerak saat Anda men-scroll.

Indikator membaca di atas dokumen, yang didorong oleh scroll.

Jenis animasi berbasis scroll yang serupa adalah animasi yang ditautkan ke posisi elemen dalam container scroll-nya. Dengan begitu, misalnya, elemen dapat muncul secara perlahan saat memasuki tampilan.

Gambar di halaman ini muncul secara bertahap saat terlihat.

Cara klasik untuk mencapai efek semacam ini adalah dengan merespons peristiwa scroll di thread utama, yang menimbulkan dua masalah utama:

  • Browser modern melakukan scrolling pada proses terpisah dan oleh karena itu mengirimkan peristiwa scroll secara asinkron.
  • Animasi thread utama dapat mengalami jank.

Hal ini membuat pembuatan animasi yang digerakkan oleh scroll yang berperforma tinggi dan sinkron dengan scrolling menjadi tidak mungkin atau sangat sulit.

Mulai Chrome versi 115, ada serangkaian API dan konsep baru yang dapat Anda gunakan untuk mengaktifkan animasi berbasis scroll deklaratif: Linimasa Scroll dan Linimasa Tampilan.

Konsep baru ini terintegrasi dengan Web Animations API (WAAPI) dan CSS Animations API yang sudah ada, sehingga memungkinkan mereka mewarisi keunggulan yang dibawa oleh API yang sudah ada ini. Hal ini mencakup kemampuan untuk menjalankan animasi yang digerakkan scroll di luar thread utama. Ya, Anda tidak salah baca: kini Anda dapat memiliki animasi yang sangat lancar, yang didorong oleh scroll, berjalan di luar thread utama, hanya dengan beberapa baris kode tambahan. Apa yang tidak disukai?!

Animasi di web, ringkasan singkat

Animasi di web dengan CSS

Untuk membuat animasi di CSS, tentukan serangkaian keyframe menggunakan aturan @@keyframes. Tautkan ke elemen menggunakan properti animation-name sekaligus menetapkan animation-duration untuk menentukan durasi animasi. Ada lebih banyak properti panjang animation-* yang tersedia–animation-easing-function dan animation-fill-mode hanyalah beberapa di antaranya–yang semuanya dapat digabungkan dalam singkatan animation.

Misalnya, berikut adalah animasi yang menskalakan elemen pada sumbu X sekaligus mengubah warna latar belakangnya:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

Animasi di web dengan JavaScript

Di JavaScript, Web Animations API dapat digunakan untuk mencapai hal yang sama persis. Anda dapat melakukannya dengan membuat instance Animation dan KeyFrameEffect baru, atau menggunakan metode Element animate() yang jauh lebih singkat.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Hasil visual cuplikan JavaScript di atas sama dengan versi CSS sebelumnya.

Linimasa animasi

Secara default, animasi yang terkait dengan suatu elemen berjalan di linimasa dokumen. Waktu asalnya dimulai dari 0 saat halaman dimuat, dan mulai bergerak maju seiring berjalannya waktu. Ini adalah linimasa animasi default, dan sampai sekarang, merupakan satu-satunya linimasa animasi yang dapat Anda akses.

Spesifikasi Animasi Berbasis Scroll menentukan dua jenis linimasa baru yang dapat Anda gunakan:

  • Linimasa Progres Scroll: linimasa yang dikaitkan dengan posisi scroll dalam container scroll di sepanjang sumbu tertentu.
  • Linimasa Progres Tampilan: linimasa yang dikaitkan dengan posisi relatif elemen tertentu dalam container scroll-nya.

Linimasa Progres Scroll

Linimasa Progres Scroll adalah linimasa animasi yang dikaitkan dengan progres pada posisi scroll dalam container scroll yang juga disebut sebagai area scroll atau scroller di sepanjang sumbu tertentu. Linimasa ini mengonversi posisi dalam rentang scroll menjadi persentase progres.

Posisi scroll awal menggambarkan progres 0% dan posisi scroll akhir menggambarkan progres 100%. Dalam visualisasi berikut, Anda dapat melihat bahwa progres terus meningkat dari 0% ke 100% saat Anda men-scroll scroller dari atas ke bawah.

Visualisasi Linimasa Progres Scroll. Saat Anda men-scroll ke bagian bawah scroller, nilai progres akan bertambah dari 0% hingga 100%.

✨ Coba sendiri

Linimasa Progres Scroll sering disingkat menjadi “Linimasa Scroll”.

Linimasa Progres Tampilan

Jenis linimasa ini dikaitkan dengan progres relatif dalam elemen tertentu di dalam container scroll. Seperti halnya Linimasa Progres Scroll, offset scroll di scroller akan dilacak. Berbeda dengan Linimasa Progres Scroll, posisi subjek yang relatif dalam scroller tertentu adalah yang menentukan progresnya.

Hal ini agak sebanding dengan cara kerja IntersectionObserver, yang dapat melacak seberapa besar suatu elemen terlihat dalam scroller. Jika tidak terlihat dalam scroller, berarti elemen tersebut tidak berpotongan. Jika terlihat dalam scroller, sekalipun untuk bagian terkecil, berarti elemen tersebut berpotongan.

Linimasa Progres Tampilan dimulai sejak subjek mulai berpotongan dengan scroller dan berakhir saat subjek berhenti berpotongan dengan scroller. Dalam visualisasi berikut, Anda dapat melihat bahwa progres mulai dihitung naik dari 0% saat subjek masuk ke container scroll dan mencapai 100% tepat saat subjek keluar dari container scroll.

Visualisasi Linimasa Progres Tampilan. Progres dihitung naik dari 0% hingga 100% saat subjek (kotak hijau) melintasi scroller.

✨ Coba sendiri

Linimasa Progres Tampilan sering disingkat menjadi “Linimasa Tampilan”. Anda dapat menargetkan bagian tertentu dari Linimasa Tampilan berdasarkan ukuran subjek, tetapi akan dibahas lebih lanjut nanti.

Mempraktikkan Linimasa Progres Scroll

Membuat Linimasa Progres Scroll anonim di CSS

Cara termudah untuk membuat Linimasa Scroll di CSS adalah menggunakan fungsi scroll(). Linimasa Scroll anonim yang dibuat dapat Anda tetapkan sebagai nilai untuk properti animation-timeline baru.

Contoh:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

Fungsi scroll() menerima <scroller> dan argumen <axis>.

Nilai yang diterima untuk argumen <scroller> adalah sebagai berikut:

  • nearest: Menggunakan container scroll ancestor terdekat (default).
  • root: Menggunakan area pandang dokumen sebagai container scroll.
  • self: Menggunakan elemen itu sendiri sebagai container scroll.

Nilai yang diterima untuk argumen <axis> adalah sebagai berikut:

  • block: Menggunakan pengukuran progres di sepanjang sumbu blok dalam container scroll (default).
  • inline: Menggunakan pengukuran progres di sepanjang sumbu yang sejajar dalam container scroll.
  • y: Menggunakan pengukuran progres di sepanjang sumbu y dalam container scroll.
  • x: Menggunakan pengukuran progres di sepanjang sumbu x dalam container scroll.

Misalnya, untuk mengikat animasi ke scroller root di sumbu blok, nilai yang akan diteruskan ke scroll() adalah root dan block. Jika digabungkan, nilainya adalah scroll(root block).

Demo: Indikator progres membaca

Demo ini memiliki indikator progres membaca yang tetap berada di bagian atas area pandang. Saat Anda men-scroll halaman ke bawah, status progres akan bertambah hingga memenuhi lebar area tampilan saat mencapai akhir dokumen. Linimasa Progres Scroll anonim digunakan untuk mendorong animasi.

Demo: Indikator progres membaca.

✨ Coba sendiri

Indikator progres membaca diposisikan di bagian atas halaman menggunakan posisi tetap. Untuk memanfaatkan animasi yang dikomposisikan, bukan width yang dianimasikan, tetapi elemen diperkecil pada sumbu x menggunakan transform.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Linimasa untuk animasi grow-progress pada elemen #progress ditetapkan ke linimasa anonim yang dibuat menggunakan scroll(). Tidak ada argumen yang diberikan ke scroll() sehingga akan kembali ke nilai defaultnya.

Penggeser default yang dilacak adalah nearest, dan sumbu default adalah block. Hal ini secara efektif menargetkan scroller root karena merupakan scroller terdekat dari elemen #progress, sekaligus melacak arah bloknya.

Membuat Linimasa Progres Scroll bernama di CSS

Cara alternatif untuk menetapkan Linimasa Progres Scroll adalah menggunakan Linimasa yang bernama. Cara ini sedikit lebih panjang, tetapi bisa jadi berguna saat Anda tidak menargetkan scroller induk atau scroller root, atau saat halaman menggunakan beberapa linimasa atau saat pencarian otomatis tidak berfungsi. Dengan cara ini, Anda dapat mengidentifikasi Linimasa Progres Scroll berdasarkan nama yang Anda berikan.

Untuk membuat Linimasa Progres Scroll bernama pada suatu elemen, tetapkan nilai properti CSS scroll-timeline-name dalam container scroll ke ID sesuai keinginan Anda. Nilai harus diawali dengan --.

Untuk mengubah sumbu yang akan dilacak, deklarasikan juga properti scroll-timeline-axis. Nilai yang diizinkan sama dengan argumen <axis> dari scroll().

Terakhir, untuk menautkan animasi ke Linimasa Progres Scroll, tetapkan properti animation-timeline di elemen yang perlu dianimasikan ke nilai sama seperti yang digunakan ID untuk scroll-timeline-name.

Contoh Kode:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Jika mau, Anda dapat menggabungkan scroll-timeline-name dan scroll-timeline-axis dalam singkatan scroll-timeline. Contoh:

scroll-timeline: --my-scroller inline;

Demo ini menampilkan indikator langkah yang ditampilkan di atas setiap carousel gambar. Jika carousel berisi tiga gambar, kolom indikator dimulai dengan lebar 33% untuk menunjukkan bahwa Anda saat ini melihat gambar pertama dari tiga gambar. Saat gambar terakhir terlihat–ditentukan oleh scroller yang telah di-scroll ke akhir–indikator akan memenuhi seluruh lebar scroller. Linimasa Progres Scroll bernama digunakan untuk mendorong animasi.

Demo: Indikator langkah carousel horizontal.

✨ Coba sendiri

Markup dasar untuk galeri adalah sebagai berikut:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

Elemen .gallery__progress diposisikan secara mutlak dalam elemen wrapper .gallery. Ukuran awalnya ditentukan oleh properti kustom --num-images.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer menata elemen .gallery__entry yang ditampung secara horizontal dan merupakan elemen yang di-scroll. Dengan melacak posisi scroll-nya, .gallery__progress akan dianimasikan. Hal ini dilakukan dengan merujuk ke Linimasa Progres Scroll bernama --gallery__scrollcontainer.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Membuat Linimasa Progres Scroll dengan JavaScript

Untuk membuat Scroll Timeline di JavaScript, buat instance baru class ScrollTimeline. Teruskan paket properti dengan source dan axis yang ingin Anda lacak.

  • source: Referensi ke elemen yang scroller-nya ingin Anda lacak. Gunakan document.documentElement untuk menargetkan scroller root.
  • axis: Menentukan sumbu yang akan dilacak. Mirip dengan varian CSS, nilai yang diterima adalah block, inline, x, dan y.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Untuk melampirkannya ke Animasi Web, teruskan sebagai properti timeline dan hapus duration jika ada.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demo: Indikator progres membaca, dikunjungi kembali

Untuk membuat ulang indikator progres membaca dengan JavaScript, sambil menggunakan markup yang sama, gunakan kode JavaScript berikut:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Hasil visualnya identik dalam versi CSS: timeline yang dibuat melacak scroller root dan menskalakan #progress pada sumbu x dari 0% hingga 100% saat Anda men-scroll halaman.

✨ Coba sendiri

Mempraktikkan Linimasa Progres Tampilan

Membuat Linimasa Progres Tampilan Anonim di CSS

Untuk membuat Linimasa Progres Tampilan, gunakan fungsi view(). Argumen yang diterima adalah <axis> dan <view-timeline-inset>.

  • <axis> adalah sama dengan dari Linimasa Progres Scroll serta menentukan sumbu yang akan dilacak. Nilai defaultnya adalah block.
  • Dengan <view-timeline-inset>, Anda dapat menentukan offset (positif atau negatif) untuk menyesuaikan batas saat elemen dianggap akan terlihat atau tidak. Nilainya harus berupa persentase atau auto, dengan auto sebagai nilai default.

Misalnya, untuk mengikat animasi ke elemen yang berpotongan dengan scroller-nya pada sumbu blok, gunakan view(block). Mirip dengan scroll(), tetapkan ini sebagai nilai untuk properti animation-timeline dan jangan lupa untuk menetapkan animation-duration ke auto.

Dengan menggunakan kode berikut, setiap img akan memudar saat melintasi area tampilan saat Anda men-scroll.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: Rentang Linimasa Tampilan

Secara default, animasi yang dikaitkan dengan Linimasa Tampilan terhubung ke seluruh rentang linimasa. Ini dimulai sejak subjek akan memasuki area scroll dan berakhir saat subjek telah keluar dari area scroll sepenuhnya.

Anda juga dapat mengaitkannya ke bagian tertentu dalam Linimasa Tampilan dengan menentukan rentang yang seharusnya dikaitkan. Ini dapat terjadi, misalnya, hanya saat subjek masuk ke scroller. Dalam visualisasi berikut, progres mulai dihitung naik dari 0% saat subjek masuk ke container scroll, tetapi sudah mencapai 100% sejak subjek sepenuhnya berpotongan.

Linimasa Tampilan yang ditetapkan untuk melacak rentang entri subjek. Animasi hanya berjalan saat subjek memasuki area scroll.

Rentang Linimasa Tampilan yang mungkin dapat Anda targetkan adalah sebagai berikut:

  • cover: Menggambarkan rentang penuh dari linimasa progres tampilan.
  • entry: Menggambarkan rentang selama kotak utama memasuki rentang visibilitas progres tampilan.
  • exit: Menggambarkan rentang selama kotak utama keluar dari rentang visibilitas progres tampilan.
  • entry-crossing: Menggambarkan rentang selama kotak utama bersilangan dengan tepi batas akhir.
  • exit-crossing: Menggambarkan rentang selama kotak utama bersilangan dengan tepi batas awal.
  • contain: Menggambarkan rentang selama kotak utama sepenuhnya tertampung atau sepenuhnya tercakup oleh rentang visibilitas progres tampilannya dalam area scroll. Hal ini bergantung pada apakah subjek lebih tinggi atau lebih pendek daripada scroller.

Untuk menentukan rentang, Anda harus menetapkan range-start dan range-end. Setiap rentang terdiri dari nama rentang (lihat daftar di atas) dan offset rentang untuk menentukan posisi dalam nama rentang tersebut. Offset rentang biasanya berupa persentase yang berkisar dari 0% hingga 100%, tetapi Anda juga dapat menentukan panjang tetap seperti 20em.

Misalnya, jika Anda ingin menjalankan animasi sejak subjek masuk, pilih entry 0% sebagai awal rentang. Agar selesai pada saat subjek masuk, pilih entry 100% sebagai nilai untuk akhir rentang.

Di CSS, Anda menetapkannya menggunakan properti animation-range. Contoh:

animation-range: entry 0% entry 100%;

Di JavaScript, gunakan properti rangeStart dan rangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Gunakan alat yang disematkan di bawah untuk mengetahui arti dari tiap nama rentang dan bagaimana persentase memengaruhi posisi awal dan akhir. Coba setel range-start ke entry 0% dan range-end ke cover 50%, lalu tarik scrollbar untuk melihat hasil animasi.

Visualizer Rentang Linimasa Tampilan, tersedia di https://goo.gle/view-timeline-range-tool

Menonton rekaman

Seperti yang mungkin Anda perhatikan saat bereksperimen dengan alat Rentang Linimasa Tampilan ini, beberapa rentang dapat ditargetkan oleh dua kombinasi range-name + range-offset yang berbeda. Misalnya, entry 0%, entry-crossing 0%, dan cover 0% semuanya menargetkan area yang sama.

Jika range-start dan range-end menargetkan range-name yang sama dan mencakup seluruh rentang–dari 0% hingga 100%–Anda dapat mempersingkat nilai menjadi hanya nama rentang. Misalnya, animation-range: entry 0% entry 100%; dapat ditulis ulang menjadi animation-range: entry yang jauh lebih pendek.

Demo: Pengungkapan gambar

Demo ini memunculkan gambar secara bertahap saat memasuki area scroll. Hal ini dilakukan menggunakan Linimasa Tampilan Anonim. Rentang animasi telah disesuaikan sehingga setiap gambar memiliki opasitas penuh saat berada di tengah-tengah penggeser.

Demo: Pengungkapan gambar

✨ Coba sendiri

Efek meluas dicapai dengan menggunakan jalur klip yang dianimasikan. CSS yang digunakan untuk efek ini adalah:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Membuat Linimasa Progres Tampilan bernama di CSS

Mirip dengan cara Linimasa Scroll memiliki versi bernama, Anda juga dapat membuat Linimasa Tampilan bernama. Alih-alih properti scroll-timeline-*, Anda menggunakan varian yang memiliki awalan view-timeline-, yaitu view-timeline-name dan view-timeline-axis.

Jenis nilai yang sama berlaku, dan aturan yang sama untuk mencari linimasa bernama juga berlaku.

Demo: Pengungkapan gambar, yang diperbarui

Dengan memodifikasi demo pengungkapan gambar dari sebelumnya, kode yang direvisi akan terlihat seperti ini:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Dengan menggunakan view-timeline-name: revealing-image, elemen akan dilacak dalam scroller terdekatnya. Nilai yang sama kemudian digunakan sebagai nilai untuk properti animation-timeline. Output visualnya sama persis seperti sebelumnya.

✨ Coba sendiri

Membuat Linimasa Progres Tampilan di JavaScript

Untuk membuat View Timeline di JavaScript, buat instance baru class ViewTimeline. Teruskan paket properti dengan subject yang ingin Anda lacak, axis, dan inset.

  • subject: Referensi ke elemen yang ingin Anda lacak dalam scroller-nya sendiri.
  • axis: Sumbu yang akan dilacak. Mirip dengan varian CSS, nilai yang diterima adalah block, inline, x, dan y.
  • inset: Penyesuaian inset (positif) atau outset (negatif) pada area scroll saat menentukan apakah kotak terlihat.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Untuk melampirkannya ke Animasi Web, teruskan sebagai properti timeline dan hapus duration jika ada. Secara opsional, teruskan informasi rentang menggunakan properti rangeStart dan rangeEnd.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Coba sendiri

Hal lain yang dapat dicoba

Melampirkan ke beberapa rentang Linimasa Tampilan dengan satu set keyframe

Mari kita lihat demo daftar kontak ini yang menampilkan animasi entri daftar. Saat entri daftar memasuki area scroll dari bawah, entri akan meluncur+memudar, dan saat keluar dari area scroll di bagian atas, entri akan meluncur+memudar.

Demo: Daftar kontak

✨ Coba sendiri

Untuk demo ini, setiap elemen dihiasi dengan satu Linimasa Tampilan yang melacak elemen saat melintasi scrollport-nya, tetapi dua animasi yang digerakkan oleh scroll terlampir padanya. Animasi animate-in dilampirkan ke rentang entry linimasa, dan animasi animate-out ke rentang exit linimasa.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

Alih-alih menjalankan dua animasi berbeda yang dikaitkan ke dua rentang yang berbeda, Anda juga dapat membuat satu set keyframe yang sudah berisi informasi rentang.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Karena keyframe berisi informasi rentang, Anda tidak perlu menentukan animation-range. Hasilnya persis sama seperti sebelumnya.

✨ Coba sendiri

Melampirkan ke Linimasa Scroll non-turunan

Mekanisme pencarian untuk Linimasa Scroll bernama dan Linimasa Tampilan bernama hanya terbatas pada elemen induk scroll. Namun, sering kali elemen yang perlu dianimasikan bukanlah turunan dari scroller yang perlu dilacak.

Agar ini berfungsi, properti timeline-scope berperan. Anda menggunakan properti ini untuk mendeklarasikan linimasa dengan nama tersebut tanpa benar-benar membuatnya. Tindakan ini akan memberikan cakupan yang lebih luas pada linimasa dengan nama tersebut. Dalam praktiknya, Anda menggunakan properti timeline-scope pada elemen induk bersama sehingga linimasa scroller turunan dapat dilampirkan ke elemen tersebut.

Contoh:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

Dalam cuplikan ini:

  • Elemen .parent mendeklarasikan linimasa dengan nama --tl. Turunannya dapat menemukan dan menggunakannya sebagai nilai untuk properti animation-timeline.
  • Elemen .scroller sebenarnya menentukan Linimasa Scroll dengan nama --tl. Secara default, hanya akan terlihat oleh turunannya, tetapi karena .parent menetapkannya sebagai scroll-timeline-root, maka akan dilampirkan ke scroll-timeline-root.
  • Elemen .subject menggunakan rentang waktu --tl. Objek ini menelusuri struktur ancestor-nya dan menemukan --tl di .parent. Dengan --tl pada .parent yang mengarah ke --tl dari .scroller, .subject pada dasarnya akan melacak Linimasa Progres Scroll .scroller.

Dengan kata lain, Anda dapat menggunakan timeline-root untuk memindahkan linimasa ke ancestor (alias pengangkatan), sehingga semua turunan ancestor dapat mengaksesnya.

Properti timeline-scope dapat digunakan dengan Linimasa Scroll dan Linimasa Tampilan.

Demo dan referensi lainnya

Semua demo yang dibahas dalam artikel ini ada di mini-situs scroll-driven-animations.style. Situs ini menyertakan lebih banyak demo untuk menyoroti apa yang dapat dilakukan dengan Animasi yang digerakkan scroll.

Salah satu demo tambahan adalah daftar sampul album ini. Setiap sampul berputar dalam 3D saat menjadi sorotan utama.

Demo: Cover Flow

✨ Coba sendiri

Atau demo kartu bertumpuk ini yang memanfaatkan position: sticky. Saat kartu ditumpuk, kartu yang sudah tertempel akan diperkecil, sehingga menciptakan efek kedalaman yang bagus. Pada akhirnya, seluruh tumpukan akan keluar dari tampilan sebagai satu grup.

Demo: Menumpuk kartu.

✨ Coba sendiri

Juga ditampilkan di scroll-driven-animations.style adalah kumpulan alat seperti visualisasi Progres Rentang Linimasa Tampilan yang disertakan sebelumnya dalam postingan ini.

Animasi berbasis scroll juga dibahas dalam Yang baru di Animasi Web di Google I/O ’23.