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.

Bramus

Dipublikasikan: 5 Mei 2023

Animasi berbasis scroll

Dukungan Browser

  • Chrome: 115.
  • Edge: 115.
  • Firefox: di balik flag.
  • Safari: tidak didukung.

Sumber

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

Indikator pembacaan di atas dokumen, yang didorong oleh scroll.

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

Gambar di halaman ini akan memudar saat muncul.

Cara klasik untuk mencapai jenis efek 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 tunduk pada jank.

Hal ini membuat pembuatan animasi berbasis scroll yang berperforma tinggi dan sinkron dengan scroll 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: Scroll Timelines dan View Timelines.

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

Animasi di web, recap singkat

Animasi di web dengan CSS

Untuk membuat animasi di CSS, tentukan kumpulan keyframe menggunakan aturan at @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 hanya untuk menyebutkan beberapa–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 dari cuplikan JavaScript di atas 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 waktu berjalan. 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 penampung scroll di sepanjang sumbu tertentu.
  • Linimasa Progres Tampilan: linimasa yang ditautkan ke posisi relatif elemen tertentu dalam penampung 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 penggeser, nilai progres akan bertambah dari 0% menjadi 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 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 terus meningkat dari 0% hingga 100% saat subjek (kotak hijau) melintasi penggeser.

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

Praktik langsung 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 penampung scroll ancestor terdekat (default).
  • root: Menggunakan area pandang dokumen sebagai penampung 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 inline 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 pembacaan yang disematkan ke 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.

✨ Coba sendiri

Indikator progres membaca diposisikan di bagian atas halaman menggunakan posisi tetap. Untuk memanfaatkan animasi gabungan, bukan width yang dianimasikan, tetapi elemen diskalakan ke bawah 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.

Scroller default yang akan dilacak adalah nearest, dan sumbu default-nya adalah block. Tindakan 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 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 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, lebar batang indikator dimulai dari 33% untuk menunjukkan bahwa Anda saat ini melihat gambar pertama dari tiga gambar. Saat gambar terakhir terlihat–ditentukan oleh penggeser yang telah di-scroll ke bagian akhir–indikator akan memenuhi lebar penuh penggeser. Linimasa Progres Scroll yang bernama digunakan untuk mendorong animasi.

Demo: Indikator langkah carousel horizontal.

✨ Coba sendiri

Markup dasar untuk galeri adalah ini:

<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 letak elemen .gallery__entry yang dimuat 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 bag properti dengan source dan axis yang ingin Anda lacak.

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

Untuk melampirkan 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, 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 penggeser root dan menskalakan #progress ke atas pada sumbu x dari 0% hingga 100% saat Anda men-scroll halaman.

✨ Coba sendiri

Praktik langsung 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. Nilainya harus berupa persentase atau auto, dengan auto sebagai nilai default.

Misalnya, untuk mengikat animasi ke elemen yang berpotongan dengan penggesernya pada sumbu blok, gunakan view(block). Serupa 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 pandang 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 ditautkan ke Linimasa Tampilan akan 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 scrollport.

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 rentang-awal dan rentang-akhir. Setiap bagian 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%;

Dalam 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 setiap nama rentang dan bagaimana persentase memengaruhi posisi awal dan akhir. Coba tetapkan 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 menggunakan alat Rentang Linimasa Tampilan ini, beberapa rentang dapat ditargetkan oleh dua kombinasi nama rentang + offset rentang yang berbeda. Misalnya, entry 0%, entry-crossing 0%, dan cover 0% semuanya menargetkan area yang sama.

Jika rentang-awal dan rentang-akhir menargetkan nama rentang 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 singkat.

Demo: Pengungkapan gambar

Demo ini memudarkan gambar saat memasuki scrollport. 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 perluasan dicapai dengan menggunakan clip-path 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 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 berlaku.

Demo: Pengungkapan gambar, ditinjau kembali

Dengan mengerjakan ulang demo tampilan 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 view-timeline-name: revealing-image, elemen akan dilacak dalam penggeser 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 Linimasa Tampilan di JavaScript, buat instance class ViewTimeline baru. Teruskan bag properti dengan subject yang ingin Anda lacak, axis, dan inset.

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

Untuk melampirkan 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 View Timeline dengan satu set keyframe

Mari kita lihat demo daftar kontak ini dengan entri daftar yang dianimasikan. Saat entri daftar memasuki scrollport dari bawah, entri tersebut akan bergeser+pudar, dan saat keluar dari scrollport di bagian atas, entri tersebut akan bergeser+pudar.

Demo: Daftar kontak

✨ Coba sendiri

Untuk demo ini, setiap elemen dihiasi dengan satu Linimasa Tampilan yang melacak elemen saat melintasi area tampilannya, tetapi dua animasi yang didorong scroll dilampirkan ke 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, 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 bernama dan Linimasa Tampilan bernama hanya terbatas pada ancestor scroll. Namun, sering kali elemen yang perlu dianimasikan bukan merupakan turunan dari penggeser yang perlu dilacak.

Agar ini berfungsi, properti timeline-scope akan digunakan. Anda menggunakan properti ini untuk mendeklarasikan linimasa dengan nama tersebut tanpa benar-benar membuatnya. Tindakan ini akan memberi linimasa dengan nama tersebut cakupan yang lebih luas. Dalam praktiknya, Anda menggunakan properti timeline-scope pada elemen induk bersama sehingga linimasa penggeser 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 turunannya dapat menemukan dan menggunakannya sebagai nilai untuk properti animation-timeline.
  • Elemen .scroller sebenarnya menentukan Linimasa Scroll dengan nama --tl. Secara default, .parent hanya akan terlihat oleh turunannya, tetapi karena .parent menetapkannya sebagai scroll-timeline-root, .parent akan terpasang ke scroll-timeline-root.
  • Elemen .subject menggunakan linimasa --tl. Fungsi ini menelusuri hierarki ancestor dan menemukan --tl di .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 atas ke ancestor (alias pengangkatan), sehingga semua turunan ancestor dapat mengaksesnya.

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

Referensi dan demo lainnya

Semua demo yang dibahas dalam artikel ini tersedia di mini-site scroll-driven-animations.style. Situs ini menyertakan banyak demo lainnya untuk menyoroti hal yang dapat dilakukan dengan animasi yang didorong Scroll.

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

Demo: Cover Flow

✨ Coba sendiri

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

Demo: Menyusun 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.