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

Animasi berbasis scroll

Dukungan Browser

  • 115
  • 115
  • x

Sumber

Animasi berbasis scroll adalah pola UX yang umum di web. Animasi berbasis scroll ditautkan ke posisi scroll dalam 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 pembacaan yang bergerak saat Anda men-scroll.

Indikator pembacaan di atas dokumen, yang dipicu oleh scroll.

Jenis animasi yang didorong scroll serupa adalah animasi yang ditautkan ke posisi elemen dalam container scroll-nya. Dengan model ini, misalnya, elemen dapat memudar saat muncul di tampilan.

Gambar di halaman ini akan memudar saat muncul di tampilan.

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

  • Browser modern melakukan scroll pada proses terpisah sehingga mengirimkan peristiwa scroll secara asinkron.
  • Animasi thread utama dapat mengalami jank.

Hal ini membuat pembuatan animasi berbasis scroll berperforma tinggi yang sinkron dengan scroll 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 dapat mewarisi keunggulan yang dihadirkan oleh API yang sudah ada ini. Hal ini mencakup kemampuan untuk menjalankan animasi berbasis scroll di thread utama. Ya, baca ini dengan benar: Anda sekarang dapat memiliki animasi yang mulus seperti sutra, yang digerakkan oleh scroll, dijalankan dari thread utama, hanya dengan beberapa baris kode tambahan. Apa yang tidak disukai?!

Animasi di web, rangkuman singkat

Animasi di web dengan CSS

Untuk membuat animasi di CSS, tentukan kumpulan keyframe menggunakan aturan @keyframes. Tautkan ke elemen menggunakan properti animation-name sekaligus menyetel animation-duration untuk menentukan berapa lama animasi harus berlangsung. Terdapat lebih banyak properti longgar animation-*, yakni animation-easing-function dan animation-fill-mode, yang semuanya dapat digabungkan dengan singkatan animation.

Misalnya, berikut adalah animasi yang meningkatkan skala 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

Dalam JavaScript, Web Animations API dapat digunakan untuk mencapai hal yang sama. Anda dapat melakukannya dengan membuat instance Animation dan KeyFrameEffect baru, atau menggunakan metode animate() Element 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 ini identik 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 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 terkait dengan progres dalam posisi scroll dalam container scroll–juga disebut scrollport 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 scroll dari atas ke bawah.

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

✨ Cobalah 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.

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% saat subjek keluar dari container scroll.

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

✨ Cobalah sendiri

Linimasa Progres Tampilan sering disingkat menjadi “Linimasa Tampilan”. Dimungkinkan untuk menargetkan bagian tertentu Linimasa Tampilan berdasarkan ukuran subjek, tetapi lebih dari itu 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(). 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 pandang penuh saat mencapai akhir dokumen. Linimasa Progres Scroll anonim digunakan untuk mendorong animasi.

Demo: Indikator progres membaca.

✨ Cobalah sendiri

Indikator progres membaca diposisikan di bagian atas halaman menggunakan posisi tetap. Untuk memanfaatkan animasi gabungan, bukan width yang dianimasikan, tetapi elemen diperkecil skalanya 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. Hal ini secara efektif menargetkan scroller root karena merupakan scroller terdekat untuk elemen #progress, sambil 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 mengubah sumbu mana 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 dengan 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, panel indikator akan dimulai dengan lebar 33% untuk menunjukkan bahwa saat ini Anda sedang melihat gambar satu dari tiga gambar. Saat gambar terakhir terlihat–ditentukan oleh scroller setelah men-scroll hingga akhir–indikator memenuhi lebar penuh scroller. Linimasa Progres Scroll bernama digunakan untuk mendorong animasi.

Demo: Indikator langkah carousel horizontal.

✨ Cobalah 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 dimuat secara horizontal dan merupakan elemen yang di-scroll. Dengan melacak posisi scroll-nya, .gallery__progress akan menjadi animasi. Hal ini dilakukan dengan merujuk ke Linimasa Progres Scroll yang 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 scroller-nya 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, dibuka 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 identik di versi CSS: timeline yang dibuat melacak scroller root dan menskalakan #progress ke atas pada sumbu x dari 0% hingga 100% saat Anda men-scroll halaman.

✨ Cobalah sendiri

Menjadi praktis 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 pada sumbu blok, gunakan view(block). Sama halnya dengan scroll(), tetapkan nilai ini sebagai nilai untuk properti animation-timeline dan jangan lupa 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 dikaitkan dengan Linimasa Tampilan terhubung ke seluruh rentang linimasa. Ini dimulai sejak subjek akan masuk ke area scroll dan selesai 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 disetel 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 awal dan akhir rentang. Masing-masing 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 dimasukkan, 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 ini untuk melihat arti dari setiap nama rentang dan bagaimana persentase memengaruhi posisi awal dan akhir. Coba tetapkan awal rentang ke entry 0% dan akhir rentang ke cover 50%, lalu tarik scrollbar untuk melihat hasil animasi.

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

Tonton rekaman

Seperti yang mungkin Anda lihat saat bermain-main dengan alat Rentang Linimasa Tampilan ini, beberapa rentang dapat ditargetkan oleh dua kombinasi nama rentang + rentang-offset yang berbeda. 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 nilai menjadi hanya nama rentang. Misalnya, animation-range: entry 0% entry 100%; dapat ditulis ulang ke animation-range: entry yang jauh lebih singkat.

Demo: Pengungkapan gambar

Demo ini akan memperjelas gambar saat masuk ke area scroll. Hal ini dilakukan menggunakan Linimasa Tampilan Anonim. Rentang animasi telah disesuaikan sehingga setiap gambar berada pada opasitas penuh saat berada di tengah scroller.

Demo: Pengungkapan gambar

✨ Cobalah sendiri

Efek membesar dapat diperoleh 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

Serupa dengan cara memberi nama versi Linimasa Scroll, Anda juga dapat membuat Linimasa Tampilan yang bernama. Sebagai ganti properti scroll-timeline-*, Anda menggunakan varian yang membawa awalan view-timeline-, yaitu view-timeline-name dan view-timeline-axis.

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

Demo: Pengungkapan gambar, dibuka kembali

Mengerjakan ulang demo pengungkapan gambar dari sebelumnya, kode yang direvisi 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 view-timeline-name: revealing-image, elemen akan dilacak dalam scroller terdekat. Nilai yang sama kemudian digunakan sebagai nilai untuk properti animation-timeline. Output visualnya sama persis dengan sebelumnya.

✨ Cobalah 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 yang akan dilacak. Serupa dengan varian CSS, nilai yang diterima adalah block, inline, x, dan y.
  • inset: Penyesuaian inset (positif) atau awal (negatif) untuk 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%',
});

✨ Cobalah sendiri

Hal lain yang dapat dicoba

Melampirkan ke beberapa rentang Linimasa Tampilan dengan satu set keyframe

Mari kita lihat demo daftar kontak ini dengan entri daftar yang dianimasikan. Saat masuk ke area scroll dari bawah, entri daftar akan meluncur+memudar, dan saat keluar dari area scroll di bagian atas, entri daftar akan memudar.

Demo: Daftar kontak

✨ Cobalah sendiri

Untuk demo ini, setiap elemen didekorasi dengan satu Linimasa Tampilan yang melacak elemen saat elemen tersebut melintasi scrollportnya, namun dua animasi berbasis scroll melekat pada elemen tersebut. 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 ke dua rentang yang berbeda, buat 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.

✨ Cobalah sendiri

Melampirkan ke Linimasa Scroll non-ancestor

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

Agar berhasil, properti timeline-scope mulai berperan. Anda menggunakan properti ini untuk mendeklarasikan linimasa dengan nama tersebut tanpa benar-benar membuatnya. Hal ini memberi {i>timeline<i} (rentang waktu) nama tersebut memiliki ruang lingkup yang lebih luas. 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. Setiap turunan dapat menemukan dan menggunakannya sebagai nilai untuk properti animation-timeline.
  • Elemen .scroller sebenarnya menentukan Linimasa Scroll dengan nama --tl. Secara default, elemen ini hanya akan terlihat oleh turunannya, tetapi karena .parent menetapkannya sebagai scroll-timeline-root, elemen ini akan dilampirkan.
  • Elemen .subject menggunakan linimasa --tl. Kode ini berjalan ke atas pohon ancestor-nya dan menemukan --tl pada .parent. Dengan --tl di .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 mengangkat), 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 di situs mini animasi berbasis scroll. Situs ini mencakup banyak demo lainnya untuk menyoroti apa yang dapat dilakukan dengan animasi berbasis Scroll.

Salah satu demo tambahan adalah daftar sampul album ini. Setiap penutup akan berputar dalam 3D karena mengambil sorotan tengah.

Demo: Alur Cover

✨ Cobalah sendiri

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

Demo: Menumpuk kartu.

✨ Cobalah sendiri

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

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