Pelajari cara menggunakan Linimasa Scroll dan Linimasa Tampilan untuk membuat animasi berbasis scroll secara deklaratif.
Animasi berbasis scroll
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.
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.
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.
✨ 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.
✨ 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.
✨ 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: 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 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.
✨ 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. Gunakandocument.documentElement
untuk menargetkan scroller root.axis
: Menentukan sumbu yang akan dilacak. Serupa dengan varian CSS, nilai yang diterima adalahblock
,inline
,x
, dany
.
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 adalahblock
.- 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 atauauto
, denganauto
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.
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.
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.
✨ 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 adalahblock
,inline
,x
, dany
.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.
✨ 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 propertianimation-timeline
. - Elemen
.scroller
sebenarnya menentukan Linimasa Scroll dengan nama--tl
. Secara default, elemen ini hanya akan terlihat oleh turunannya, tetapi karena.parent
menetapkannya sebagaiscroll-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.
✨ 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.
✨ 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.