Labs — Fancy Animations 3.1.1
Halaman lab untuk menguji kontrol ScrollTrigger baru di Fancy Animations 3.1.1 — fa_cover, fa_seq, fa_index, dan fa_smooth.
Kartu 1
Kartu 2
Kartu 3
01
Satu properti di parent. Anak tidak perlu start dan end masing-masing.
02
Overlap 25% dipilih di sini, jadi animasi berikutnya mulai sebelum yang sebelumnya selesai.
03
Tiap anak juga menerima --fa-i dan --fa-n untuk dipakai di CSS kustom.
04
Menambah anak kelima akan membagi ulang rentangnya tanpa perubahan lain.
1
2
3
4
5
6
fa_smooth: off
Off — mengikuti scroll persis, tanpa jeda
fa_smooth: 20
0,2 detik — animasi melunak ke posisi scroll
Scroll Progress
Progress bar di bawah ini membaca --fa-percent secara langsung. Scroll halaman dan bar terisi.
Studi Gerak
Tiga layar, satu tarikan gulir
Kartu gambar bertumpuk dan menyusut saat kartu berikutnya menutupinya. fa_cover menghitungnya sendiri dari posisi kartu sebelahnya — tanpa start dan end manual per kartu.
Ruang kerja
Tim menyusun arah sebelum satu baris kode ditulis.
Kode
Template yang ditulis tangan, bukan hasil generator.
Angka
Keputusan diambil dari data, bukan dari selera.
Strategi
Produksi
Evaluasi
SUMBU HORIZONTAL · RAIL
Gulir turun, gambar berjalan menyamping
Sumbu berbeda dari tumpukan vertikal: rel ini bergerak mendatar mengikuti gulir, dan tiap panel diberi kedalaman oleh indeksnya — bukan oleh nth-child.