Animasi css bergerak melintasi layar

Sebelum karir saya terjun ke pengembangan, saya melakukan banyak pekerjaan grafik gerak di After Effects. Tetapi bahkan dengan latar belakang itu, saya masih menemukan animasi di web cukup membingungkan

Grafik video dirancang dalam rasio tertentu dan kemudian diekspor. Selesai. Tapi tidak ada "pengaturan ekspor" di web. Kami hanya mendorong kode ke dunia dan animasi kami harus beradaptasi dengan perangkat apa pun yang mereka gunakan

Jadi mari kita bicara animasi responsif. Bagaimana pendekatan terbaik kami untuk menganimasikan di web liar? . Mari kita mulai dengan beberapa pembingkaian…

Bagaimana animasi ini akan digunakan?

Artikel Zach Saucier tentang animasi responsif merekomendasikan untuk mengambil langkah mundur untuk memikirkan hasil akhir sebelum beralih ke kode

Akankah animasi menjadi modul yang diulang di beberapa bagian aplikasi Anda?

Ini saran yang bagus. Bagian besar dari mendesain animasi responsif adalah mengetahui apakah dan bagaimana animasi itu perlu diskalakan, lalu memilih pendekatan yang tepat dari awal

Sebagian besar animasi termasuk dalam kategori berikut

• Tetap. Animasi untuk hal-hal seperti ikon atau pemuat yang mempertahankan ukuran dan rasio tinggi lebar yang sama di semua perangkat. Tidak ada yang perlu dikhawatirkan di sini. Hard-code beberapa nilai piksel di sana dan lanjutkan hari Anda
• Cairan. Animasi yang perlu beradaptasi dengan lancar di berbagai perangkat. Sebagian besar animasi tata letak termasuk dalam kategori ini
• Ditargetkan. Animasi yang khusus untuk perangkat atau ukuran layar tertentu, atau berubah secara substansial pada titik jeda tertentu, seperti animasi khusus desktop atau interaksi yang bergantung pada interaksi khusus perangkat, seperti sentuh atau arahkan kursor

Animasi yang lancar dan terarah membutuhkan cara berpikir dan solusi yang berbeda. Mari lihat…

Animasi cair

Seperti kata Andy Bell. Jadilah mentor browser, bukan micromanagernya — berikan browser beberapa aturan dan petunjuk yang kuat, lalu biarkan browser membuat keputusan yang tepat untuk orang yang mengunjunginya. (Inilah slide dari presentasi itu. )

Animasi yang lancar adalah tentang membiarkan browser melakukan kerja keras. Banyak animasi dapat dengan mudah disesuaikan dengan konteks yang berbeda hanya dengan menggunakan unit yang tepat sejak awal. Jika Anda mengubah ukuran pena ini, Anda dapat melihat bahwa animasi menggunakan unit viewport berskala dengan lancar saat browser menyesuaikan

CodePen Embed Fallback

Kotak ungu bahkan mengubah lebar pada titik henti sementara yang berbeda, tetapi karena kami menggunakan persentase untuk memindahkannya, animasi juga akan ikut diskalakan.

Menganimasikan properti tata letak seperti left dan top dapat menyebabkan reflow tata letak dan animasi 'janky' yang gelisah, jadi jika memungkinkan tetap berpegang pada transformasi dan opacity

Kami tidak hanya terbatas pada unit ini saja — mari kita lihat beberapa kemungkinan lainnya

Satuan SVG

Salah satu hal yang saya sukai tentang bekerja dengan SVG adalah kita dapat menggunakan unit pengguna SVG untuk animasi yang langsung responsif. Petunjuknya benar-benar ada di namanya — Scalable Vector Graphic. Di tanah SVG, semua elemen diplot pada koordinat tertentu. Ruang SVG seperti selembar kertas grafik yang tak terbatas tempat kita dapat mengatur elemen. ________ 49 _______ menentukan dimensi kertas grafik yang dapat kita lihat

viewBox="0 0 100 50”

Dalam demo berikutnya, SVG kami viewBox memiliki lebar

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

CodePen Embed Fallback

Menganimasikan elemen anak berdasarkan lebar penampung induk sedikit rumit di tanah HTML. Hingga saat ini, kami harus mengambil lebar induk dengan JavaScript, yang cukup mudah saat Anda menganimasikan

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

CodePen Embed Fallback

Jika Anda menyesuaikan nilai pada pengubahan ukuran, ingatlah untuk melakukan debounce, atau bahkan aktifkan fungsi setelah browser selesai mengubah ukuran. Pengubahan ukuran pemroses mengaktifkan banyak peristiwa setiap detik, jadi memperbarui properti pada setiap peristiwa membutuhkan banyak pekerjaan untuk browser

Tapi, speed-bump animasi ini akan segera menjadi masa lalu. Drum roll tolong… 🥁

Setelah hampir 15 tahun sebagai permintaan yang sangat tinggi (tidak mungkin. ?), Unit & Kueri Kontainer berbasis ukuran telah dikirimkan di Chrome/Edge 105 & Safari 16. Firefox tidak jauh di belakang

(juga. ada prototipe kueri gaya. ) https. //t. co/A2zgd9l4FC

— Mia (@TerribleMia) 15 September 2022

Unit Kontainer. Hal-hal yang indah. Pada saat saya menulis ini, mereka hanya berfungsi di Chrome dan Safari — tetapi mungkin saat Anda membaca ini, kami juga akan memiliki Firefox. Lihat aksi mereka dalam demo berikut ini. Lihat anak-anak kecil itu pergi. Bukankah itu mengasyikkan, animasi yang relatif terhadap elemen induknya

CodePen Embed Fallback

Data dukungan browser ini berasal dari , yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur tersebut pada versi tersebut dan yang lebih baru

Desktop

Ponsel / Tablet

Transisi tata letak yang lancar dengan FLIP

Seperti yang kami sebutkan sebelumnya, di SVG-land setiap elemen ditempatkan dengan rapi di satu grid dan sangat mudah untuk bergerak secara responsif. Di HTML-land jauh lebih kompleks. Untuk membangun tata letak yang responsif, kami menggunakan banyak metode pemosisian dan sistem tata letak yang berbeda. Salah satu kesulitan utama menganimasikan di web adalah banyak perubahan tata letak yang tidak mungkin dianimasikan. Mungkin sebuah elemen perlu dipindahkan dari posisi

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

Rumit, ya?

Sehat. Teknik FLIP hadir untuk menyelamatkan hari; . Premis dasarnya adalah

• Pertama. Raih posisi awal elemen yang terlibat dalam transisi
• Terakhir. Pindahkan elemen dan ambil posisi akhir
• Membalikkan. Kerjakan perubahan antara keadaan pertama dan terakhir dan terapkan transformasi untuk membalikkan elemen kembali ke posisi semula. Hal ini membuat seolah-olah elemen-elemen tersebut masih berada di posisi pertama tetapi sebenarnya tidak
• Bermain. Hapus transformasi terbalik dan hidupkan ke status pertama yang dipalsukan ke status terakhir

Ini demo menggunakan plugin FLIP GSAP yang melakukan semua pekerjaan berat untuk Anda

CodePen Embed Fallback

Jika Anda ingin memahami lebih banyak tentang implementasi vanilla, kunjungi posting blog Paul Lewis — dia adalah otak di balik teknik FLIP

Menskalakan SVG dengan lancar

Anda mengerti saya… ini sebenarnya bukan tip animasi. Tetapi mengatur panggung dengan benar sangat penting untuk animasi yang bagus. Skala SVG sangat baik secara default, tetapi kita dapat mengontrol bagaimana skalanya lebih jauh dengan

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

@media (hover: hover) {
 /* CSS hover state here */
}

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

@media (hover: hover) {
 /* CSS hover state here */
}

Untuk referensi Meet and Slice —

@media (hover: hover) {
 /* CSS hover state here */
}

@media (hover: hover) {
 /* CSS hover state here */
}

@media (hover: hover) {
 /* CSS hover state here */
}

@media (hover: hover) {
 /* CSS hover state here */
}

• @media (hover: hover) {
   /* CSS hover state here */
  }

  _7 — Sejajarkan ke tengah sumbu x, bagian bawah sumbu y, dan perbesar untuk menutupi seluruh viewport

• @media (hover: hover) {
   /* CSS hover state here */
  }

  8 — Sejajarkan ke kiri sumbu x, bagian atas sumbu y, dan naikkan skala sambil menjaga agar seluruh viewBox terlihat

CodePen Embed Fallback

Tom Miller mengambil langkah lebih jauh dengan menggunakan

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Untuk animasi SVG yang responsif, akan berguna untuk menggunakan kotak tampilan SVG untuk membuat tampilan yang memotong dan menskalakan di bawah lebar browser tertentu, sekaligus menampilkan lebih banyak animasi SVG ke kanan dan kiri saat browser lebih lebar dari itu . Kita dapat mencapai ini dengan menambahkan luapan yang terlihat pada SVG dan menggabungkannya dengan pembungkus

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

1 untuk mencegah SVG terlalu banyak menskala secara vertikal

CodePen Embed Fallback

Kanvas penskalaan yang lancar

Kanvas jauh lebih berkinerja untuk animasi kompleks dengan banyak bagian bergerak daripada menganimasikan SVG atau HTML DOM, tetapi secara inheren juga lebih kompleks. Anda harus bekerja untuk pencapaian kinerja tersebut. Tidak seperti SVG yang memiliki unit responsif yang bagus dan penskalaan di luar kotak,

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Saya suka mengatur

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

CodePen Embed Fallback

George Francis juga mengumpulkan perpustakaan kecil yang indah ini yang memungkinkan Anda untuk mendefinisikan atribut Canvas viewBox dan

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

Animasi yang ditargetkan

Terkadang Anda mungkin perlu mengambil pendekatan yang kurang lancar dan lebih terarah untuk animasi Anda. Perangkat seluler memiliki real estat yang jauh lebih sedikit, dan kinerja jus animasi yang lebih sedikit daripada mesin desktop. Jadi masuk akal untuk menyajikan pengurangan animasi kepada pengguna seluler, bahkan berpotensi tanpa animasi

Terkadang animasi responsif terbaik untuk seluler bukanlah animasi sama sekali. Untuk UX seluler, prioritaskan membiarkan pengguna menggunakan konten dengan cepat daripada menunggu animasi selesai. Animasi seluler harus meningkatkan konten, navigasi, dan interaksi daripada menundanya. Eric van Holtz

Untuk melakukannya, kita dapat menggunakan kueri media untuk menargetkan ukuran viewport tertentu seperti yang kita lakukan saat menata gaya dengan CSS. Berikut demo sederhana yang menunjukkan animasi CSS ditangani menggunakan kueri media dan animasi GSAP ditangani dengan

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

CodePen Embed Fallback

Kesederhanaan demo ini menyembunyikan banyak keajaiban. Animasi JavaScript memerlukan lebih banyak penyiapan dan pembersihan agar dapat bekerja dengan benar hanya pada satu ukuran layar tertentu. Saya telah melihat kengerian di masa lalu di mana orang baru saja menyembunyikan animasi dari tampilan di CSS dengan

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Jika ukuran layar tidak cocok lagi, animasi harus dimatikan dan dirilis untuk pengumpulan sampah, dan elemen yang terpengaruh oleh animasi harus dibersihkan dari gaya inline yang diperkenalkan oleh gerakan untuk mencegah konflik dengan gaya lainnya. Hingga

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Kami juga tidak terbatas pada ukuran layar. Ada banyak fitur media di luar sana untuk dihubungkan

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

Dalam demo berikut kami telah menambahkan tanda centang untuk

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

CodePen Embed Fallback

Dan lihat demo menyenangkan Tom Miller lainnya di mana dia menggunakan rasio aspek perangkat untuk menyesuaikan animasi

CodePen Embed Fallback

Berpikir di luar kotak, di luar ukuran layar

Ada lebih banyak pemikiran tentang animasi responsif daripada sekadar ukuran layar. Perangkat yang berbeda memungkinkan interaksi yang berbeda, dan mudah untuk menjadi sedikit kusut saat Anda tidak mempertimbangkannya. Jika Anda membuat status arahkan kursor di CSS, Anda dapat menggunakan fitur media

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

@media (hover: hover) {
 /* CSS hover state here */
}

Beberapa saran dari Jake Whiteley

Sering kali kami mendasarkan animasi kami pada lebar browser, membuat asumsi naif bahwa pengguna desktop menginginkan status hover. Saya pribadi memiliki banyak masalah di masa lalu di mana saya akan beralih ke tata letak desktop> 1024px, tetapi mungkin melakukan deteksi sentuh di JS – menyebabkan ketidakcocokan tata letak untuk desktop, tetapi JS untuk seluler. Hari-hari ini saya bersandar pada hover dan pointer untuk memastikan paritas dan menangani ipad Pro atau permukaan windows (yang dapat mengubah jenis pointer tergantung pada apakah penutupnya turun atau tidak)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Saya kemudian akan mengawinkan kueri tata letak CSS dan kueri JavaScript saya, jadi saya mempertimbangkan perangkat input sebagai faktor utama yang didukung oleh lebar, bukan sebaliknya

Tip ScrollTrigger

Jika Anda menggunakan plugin ScrollTrigger GSAP, ada utilitas kecil praktis yang dapat Anda gunakan untuk membedakan kemampuan sentuh perangkat dengan mudah.

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

• if (ScrollTrigger.isTouch) {
    // any touch-capable device...
  }
  
  // or get more specific: 
  if (ScrollTrigger.isTouch === 1) {
    // touch-only device
  }

  4 – tanpa sentuhan (penunjuk/mouse saja)

• if (ScrollTrigger.isTouch) {
    // any touch-capable device...
  }
  
  // or get more specific: 
  if (ScrollTrigger.isTouch === 1) {
    // touch-only device
  }

  5 – perangkat sentuh saja (seperti telepon)

• if (ScrollTrigger.isTouch) {
    // any touch-capable device...
  }
  
  // or get more specific: 
  if (ScrollTrigger.isTouch === 1) {
    // touch-only device
  }

  6 – perangkat dapat menerima input sentuhan dan mouse/penunjuk (seperti tablet Windows)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

Kiat lain untuk animasi yang dipicu oleh scroll yang responsif…

Demo berikut di bawah ini memindahkan galeri gambar secara horizontal, tetapi lebarnya berubah tergantung ukuran layar. Jika Anda mengubah ukuran layar saat Anda setengah jalan melalui animasi scrub, Anda dapat berakhir dengan animasi yang rusak dan nilai basi. Ini adalah speedbump umum, tapi yang mudah dipecahkan. Pop perhitungan yang bergantung pada ukuran layar menjadi nilai fungsional dan atur

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

CodePen Embed Fallback

Tip kutu buku bonus GSAP

Di perangkat seluler, bilah alamat browser biasanya ditampilkan dan disembunyikan saat Anda menggulir. Ini dianggap sebagai acara pengubahan ukuran dan akan mengaktifkan

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

ScrollTrigger.config({
  ignoreMobileResize: true
});

Prinsip gerak

Saya pikir saya akan memberi Anda beberapa praktik terbaik untuk dipertimbangkan saat bekerja dengan motion di web

Jarak dan pelonggaran

Hal kecil tapi penting yang mudah dilupakan dengan animasi responsif adalah hubungan antara kecepatan, momentum, dan jarak. Animasi yang bagus harus meniru dunia nyata agar terasa dapat dipercaya, dan butuh waktu lebih lama di dunia nyata untuk menempuh jarak yang lebih jauh. Perhatikan jarak tempuh animasi Anda, dan pastikan durasi dan easing yang digunakan sesuai konteks dengan animasi lainnya

Anda juga sering dapat menerapkan easing yang lebih dramatis pada elemen dengan melakukan perjalanan lebih jauh untuk menunjukkan peningkatan momentum

CodePen Embed Fallback

Untuk kasus penggunaan tertentu, sebaiknya sesuaikan durasi secara lebih dinamis berdasarkan lebar layar. Dalam demo berikutnya kami menggunakan

ScrollTrigger.config({
  ignoreMobileResize: true
});

ScrollTrigger.config({
  ignoreMobileResize: true
});

CodePen Embed Fallback

Spasi dan kuantitas

Hal lain yang perlu diingat adalah jarak dan jumlah elemen pada ukuran layar yang berbeda. Mengutip Steven Shaw

Jika Anda memiliki beberapa jenis animasi lingkungan (paralaks, awan, pohon, confetti, dekorasi, dll) yang diberi jarak di sekitar jendela, pastikan animasi tersebut diskalakan dan/atau sesuaikan jumlahnya tergantung pada ukuran layar. Layar besar mungkin membutuhkan lebih banyak elemen yang tersebar, sedangkan layar kecil hanya membutuhkan sedikit untuk efek yang sama

Saya suka bagaimana Opher Vishnia berpikir tentang animasi sebagai sebuah panggung. Menambahkan dan menghapus elemen tidak hanya formalitas, itu bisa menjadi bagian dari keseluruhan koreografi

Saat mendesain animasi responsif, tantangannya bukanlah bagaimana menjejalkan konten yang sama ke dalam viewport agar "cocok", melainkan bagaimana menyusun kumpulan konten yang ada sehingga mengomunikasikan maksud yang sama. Itu berarti membuat pilihan sadar konten mana yang akan ditambahkan, dan mana yang akan dihapus. Biasanya dalam dunia animasi hal-hal tidak muncul begitu saja atau keluar dari bingkai. Masuk akal untuk menganggap elemen sebagai memasuki atau keluar dari "panggung", menghidupkan transisi itu dengan cara yang masuk akal secara visual dan tematik

CodePen Embed Fallback

Dan itu banyak. Jika Anda memiliki tip animasi yang lebih responsif, masukkan di bagian komentar. Jika ada sesuatu yang sangat membantu, saya akan menambahkannya ke ringkasan informasi ini

Tambahan

Satu catatan lagi dari Tom Miller saat saya menyiapkan artikel ini

Saya mungkin terlambat dengan tip ini untuk artikel animasi responsif Anda, tetapi saya sangat menyarankan "menyelesaikan semua animasi sebelum membangun". Saat ini saya sedang memperbaiki beberapa animasi situs dengan "versi seluler". Syukurlah untuk

ScrollTrigger.config({
  ignoreMobileResize: true
});

3… tapi saya berharap kami tahu akan ada tata letak/animasi seluler yang terpisah dari awal

Saya pikir kita semua menghargai bahwa tip untuk "merencanakan ke depan" ini datang pada menit terakhir. Terima kasih, Tom, dan semoga sukses dengan retrofit tersebut

Bagaimana cara mengaktifkan animasi gulir?

Bagaimana cara memindahkan gambar melintasi layar dalam HTML?