Menganimasikan elemen saat men-scroll dengan animasi berbasis Scroll

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

Animasi berbasis scroll

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

Jenis animasi berbasis scroll yang serupa adalah animasi yang ditautkan ke posisi elemen dalam container scroll-nya. Dengannya, misalnya, elemen dapat memudar saat muncul di tampilan.

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

• Browser modern men-scroll pada proses terpisah sehingga menayangkan peristiwa scroll secara asinkron.
• Animasi thread utama bergantung pada jank.

Hal ini membuat pembuatan animasi berbasis scroll berperforma tinggi yang sinkron dengan scroll tidak mungkin dilakukan atau sangat sulit.

Mulai Chrome versi 115, ada sekumpulan 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 ada, sehingga dapat mewarisi keuntungan yang diberikan API yang sudah ada ini. Hal ini mencakup kemampuan untuk menjalankan animasi berbasis scroll yang berjalan di luar thread utama. Ya, baca dengan benar: sekarang Anda bisa memiliki animasi yang mulus, didorong oleh scroll, berjalan keluar dari thread utama, hanya dengan beberapa baris kode tambahan. Apa yang tidak disukai?!

Animasi di web, rangkuman kecil

Animasi di web dengan CSS

Untuk membuat animasi di CSS, tentukan kumpulan keyframe menggunakan @keyframes pada aturan. Tautkan ke elemen menggunakan properti animation-name sambil menyetel animation-duration untuk menentukan durasi animasi. Ada lebih banyak animation-* properti longgar yang tersedia–animation-easing-function dan animation-fill-mode, sebagai beberapa contoh, yang semuanya dapat digabungkan dalam singkatan animation.

Misalnya, berikut adalah animasi yang meningkatkan skala elemen pada sumbu X sembari juga 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

Dalam JavaScript, Web Animations API dapat digunakan untuk mencapai hasil 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 pada 0 saat halaman dimuat, dan mulai berdetak maju seiring berjalannya waktu jam. 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 ditautkan ke posisi scroll container scroll di sepanjang sumbu tertentu.
• Linimasa Progres Tampilan: linimasa yang ditautkan ke posisi relatif elemen tertentu dalam container scroll-nya.

Linimasa Progres Scroll

Linimasa Progres Scroll adalah linimasa animasi yang dikaitkan dengan progres dalam posisi scroll dalam container scroll, yang juga disebut sebagai scrollport atau scroller, di sepanjang sumbu tertentu. Fungsi 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.

✨ Coba sendiri

Linimasa Progres Scroll sering kali 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.

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.

✨ Coba sendiri

Linimasa Progres Tampilan sering kali disingkat menjadi “Linimasa Tampilan”. Anda dapat menargetkan bagian tertentu pada Linimasa Tampilan berdasarkan ukuran subjek, tetapi kita akan membahasnya lebih lanjut nanti.

Berlatih dengan Linimasa Progres Scroll

Membuat Linimasa Progres Scroll anonim di CSS

Cara termudah untuk membuat Linimasa Scroll di CSS adalah menggunakan fungsi scroll(). Tindakan ini akan membuat Linimasa Scroll anonim yang 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 pandang penuh setelah mencapai akhir dokumen. Linimasa Progres Scroll anonim digunakan untuk menjalankan animasi.

✨ Coba sendiri

Indikator kemajuan membaca diposisikan di bagian atas halaman menggunakan posisi tetap. Untuk memanfaatkan animasi gabungan, bukan width yang dianimasikan, tetapi elemen diperkecil skala elemen 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 di elemen #progress disetel ke linimasa anonim yang dibuat menggunakan scroll(). Tidak ada argumen yang diberikan ke scroll() sehingga akan kembali ke nilai defaultnya.

Scroller default yang akan dilacak adalah nearest, dan sumbu default-nya adalah block. Tindakan ini secara efektif menargetkan scroller root karena 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 properti CSS scroll-timeline-name dalam container scroll ke ID yang Anda inginkan. Nilai harus diawali dengan --.

Untuk menyesuaikan 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 di singkatan scroll-timeline. Contoh:

scroll-timeline: --my-scroller inline;

Demo: Indikator langkah carousel horizontal

Demo ini menampilkan indikator langkah yang ditampilkan di atas setiap carousel gambar. Jika carousel berisi tiga gambar, panel indikator akan dimulai dengan lebar 33% untuk menunjukkan bahwa Anda sedang melihat gambar satu dari tiga. Saat gambar terakhir terlihat–ditentukan oleh scroller setelah men-scroll hingga ke ujung–indikator akan menggunakan lebar penuh scroller. Linimasa Progres Scroll yang bernama digunakan untuk menjalankan animasi.

✨ Coba sendiri

Markup dasar untuk galeri adalah:

<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 benar-benar diposisikan dalam elemen wrapper .gallery. Ukuran awalnya ditentukan oleh properti khusus --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 letak elemen .gallery__entry yang ada secara horizontal dan merupakan elemen yang dapat 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 Linimasa Scroll di JavaScript, buat instance baru class ScrollTimeline. Teruskan tas properti dengan source dan axis yang ingin Anda lacak.

• source: Referensi ke elemen yang scrollernya ingin Anda lacak. Gunakan document.documentElement untuk menargetkan scroller root.
• axis: Menentukan sumbu yang akan dilacak. Serupa 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, ditinjau kembali

Untuk membuat ulang indikator progres membaca dengan JavaScript, saat 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 sama dalam versi CSS: timeline yang dibuat melacak scroller root dan menskalakan #progress ke atas di sumbu x dari 0% menjadi 100% saat Anda men-scroll halaman.

✨ Coba sendiri

Melakukan praktik dengan 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. Nilai 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). Serupa dengan scroll(), tetapkan ini sebagai nilai untuk properti animation-timeline dan jangan lupa untuk menyetel animation-duration ke auto.

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

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

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

Intermezzo: Melihat rentang Linimasa

Secara default, animasi yang ditautkan ke Linimasa Tampilan dikaitkan ke seluruh rentang linimasa. Proses ini dimulai sejak subjek akan masuk ke area scroll dan berakhir saat subjek keluar dari area scroll sepenuhnya.

Anda juga dapat mengaitkannya ke bagian tertentu pada Linimasa Tampilan dengan menentukan rentang yang harus 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.

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 menetapkan rentang, Anda harus menetapkan rentang-awal dan akhir rentang. Masing-masing terdiri dari nama-rentang (lihat daftar di atas) dan range-offset untuk menentukan posisi dalam nama rentang tersebut. Rentang-offset biasanya berupa persentase yang berkisar dari 0% hingga 100%, tetapi Anda juga dapat menentukan durasi tetap seperti 20em.

Misalnya, jika Anda ingin menjalankan animasi dari saat subjek masuk, pilih entry 0% sebagai rentang-awal. Untuk menyelesaikannya pada saat subjek dimasukkan, pilih entry 100% sebagai nilai untuk akhir rentang.

Di CSS, Anda menetapkan ini 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 ini untuk melihat arti dari setiap nama rentang dan bagaimana persentase memengaruhi posisi awal dan akhir. Coba tetapkan rentang mulai ke entry 0% dan akhir rentang ke cover 50%, lalu tarik scrollbar untuk melihat hasil animasi.

Menonton rekaman

Seperti yang mungkin Anda perhatikan saat mencoba-coba alat Lihat Rentang Linimasa ini, beberapa rentang dapat ditargetkan dengan dua kombinasi nama rentang + rentang-offset. Misalnya, entry 0%, entry-crossing 0%, dan cover 0% semuanya menargetkan area yang sama.

Jika rentang-awal dan akhir rentang menargetkan nama rentang yang sama dan menjangkau seluruh rentang–dari 0% hingga 100%–Anda dapat mempersingkat nilainya menjadi hanya nama rentang. Misalnya, animation-range: entry 0% entry 100%; dapat ditulis ulang menjadi animation-range: entry yang jauh lebih singkat.

Demo: Pengungkapan gambar

Demo ini memperjelas gambar 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 scroller.

✨ Coba sendiri

Efek perluasan dicapai dengan menggunakan klip jalur 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

Serupa dengan cara Linimasa Scroll memberi nama versi, Anda juga dapat membuat Linimasa Tampilan yang bernama. Sebagai ganti 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 yang dinamai akan berlaku.

Demo: Gambar ditampilkan, ditinjau kembali

Mengolah ulang demo pengungkapan gambar 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 dengan sebelumnya.

✨ Coba sendiri

Membuat Linimasa Progres Tampilan di JavaScript

Untuk membuat Linimasa Tampilan di JavaScript, buat instance baru class ViewTimeline. Teruskan tas properti dengan subject yang ingin Anda lacak, axis, dan inset.

• subject: Referensi ke elemen yang ingin Anda lacak dalam scroller-nya sendiri.
• axis: Sumbu untuk dilacak. Serupa dengan varian CSS, nilai yang diterima adalah block, inline, x, dan y.
• inset: Penyesuaian inset (positif) atau awal (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 bisa dicoba

Melampirkan ke beberapa rentang Linimasa Tampilan dengan satu set keyframe

Mari kita lihat demo daftar kontak berikut dengan entri daftar yang dianimasikan. Saat entri daftar memasuki area scroll dari bawah, kode akan bergeser+memudar, dan saat keluar dari area scroll di bagian atas, akan bergeser+memudar.

✨ Coba sendiri

Untuk demo ini, setiap elemen akan didekorasi dengan satu Linimasa Tampilan yang melacak elemen saat melintasi area scroll, tetapi dua animasi berbasis scroll melekat 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 dilampirkan pada dua rentang 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 sama persis seperti sebelumnya.

✨ Coba sendiri

Melampirkan ke Linimasa Scroll non-ancestor

Mekanisme pencarian untuk Linimasa Scroll yang bernama dan Linimasa Tampilan yang bernama dibatasi hanya untuk ancestor scroll saja. Namun, sering kali, elemen yang perlu dianimasikan bukan turunan dari scroller yang perlu dilacak.

Agar cara ini berfungsi, properti timeline-scope berperan. Anda menggunakan properti ini untuk mendeklarasikan linimasa dengan nama tersebut tanpa benar-benar membuatnya. Cara ini akan memberikan cakupan yang lebih luas di {i>timeline<i} dengan nama tersebut. Dalam praktiknya, Anda menggunakan properti timeline-scope di 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. Setiap turunan dari properti tersebut dapat menemukan dan menggunakannya sebagai nilai untuk properti animation-timeline.
• Elemen .scroller sebenarnya menentukan Linimasa Scroll dengan nama --tl. Secara default, kolom ini hanya akan terlihat oleh turunannya, tetapi karena .parent menetapkannya sebagai scroll-timeline-root, kolom akan dilampirkan ke sana.
• Elemen .subject menggunakan linimasa --tl. Kode ini berjalan ke pohon ancestor-nya dan menemukan --tl di .parent. Dengan --tl di .parent yang mengarah ke --tl dari .scroller, pada dasarnya .subject akan melacak Linimasa Progres Scroll .scroller.

Dengan kata lain, Anda dapat menggunakan timeline-root untuk memindahkan linimasa ke atas ke ancestor (atau 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 di artikel ini tentang situs mini scroll-driven- animations.style. Situs ini menyertakan lebih banyak demo untuk menyoroti apa yang dapat dilakukan dengan animasi berbasis Scroll.

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

✨ Coba sendiri

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

✨ Coba sendiri

Yang juga ditampilkan di scroll-driven-drivings.style adalah kumpulan alat seperti visualisasi View Linimasa Rentang Progress yang disertakan sebelumnya dalam postingan ini.

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