30 Animasi SVG Luar Biasa Untuk Inspirasi Anda
Desainer yang digunakan untuk membuat animasi dalam elemen HTML menggunakan CSS. Namun, karena keterbatasan elemen HTML dalam membuat pola, bentuk, dan lain-lain, mereka secara alami beralih ke SVG, yang menawarkan kemampuan lebih menarik.
Bekerja dengan SVG, kami menikmati dukungan browser yang bagus untuk animasi SVG, dan kami memiliki lebih banyak cara untuk membuat animasi baru. Anda dapat menggunakan fungsionalitas animasi SVG bawaan atau animasi CSS3 (perhatikan bahwa tidak semuanya dapat dilakukan oleh CSS sehingga masih perlu JavaScript). Cara lain adalah dengan menggunakan mesin JavaScript seperti GSAP atau Snap. JS adalah praktik yang baik untuk membuat animasi.
Di sini saya telah menyusun beberapa SVG animasi yang menakjubkan. Beberapa menggunakan animasi SVG, yang lain menggunakan transformasi CSS untuk animasi dasar, dan sisanya menggunakan bantuan JavaScript.
Border Animation oleh Sean McCaffery
Dibuat hanya dengan CSS, bentuk perbatasan mulus di sekitar teks, saat Anda mengarahkan kursor ke “HOVER” petunjuk.
Sidebar SVG elastis oleh Nikolay Talanov
Bilah samping menjadi elastis ketika Anda mencoba menariknya dari samping. Konsep yang bagus diterapkan pada bilah aplikasi yang terinspirasi Material Design.
Tarik ke Bawah untuk Menyegarkan oleh Nikolay Talanov
Sebagian besar halaman memungkinkan Anda “menurunkan” pada halaman untuk menyegarkan. Dengan animasi ini, saat Anda “melepaskan” halaman, ikon Kirim berubah menjadi ikon Pesawat dan dilepaskan ke udara.
Gradient Animasi pada Teks oleh Patrick Young
Berikut ini adalah gradien teks bergerak halus tapi tidak mudah ketinggalan yang disukai pecinta tipografi.
Animasi Jantung oleh Nikolay Talanov
Animasi ini menunjukkan kepada Anda bagaimana ikon hati dibuat dari dua lingkaran dan persegi. Transformasi dilakukan dengan animasi CSS.
Ayo Bepergian dengan jjperezaguinaga
Animasi yang menggambarkan kota dan tujuan wisata populer di dunia. Gerakan dan transformasi dibuat menggunakan animasi CSS.
Menu beralih animasi oleh Tamino Martinius
Animasi morphing dari ikon hamburger berubah menjadi ikon lintas. Lihat seberapa mulus transisi di antara kedua objek.
Animasi Infografis oleh Sdras
Animasi yang luar biasa oleh Sarah Drasner, didukung oleh garis waktu GSAP. Ini adalah infografis yang menjadi hidup, dibuat dengan animasi. Gunakan bilah geser untuk mengakses bingkai dari titik mana pun.
Rain-Bros tidak suka JS oleh cihadturhan
Animasi loop unik dan lucu yang menggambarkan jalannya karakter. Pergerakan objek dalam demo ini adalah kombinasi dari animasi SVG dan CSS3. Kaki menggunakan animasi SVG sedangkan bagian lain menggunakan animasi CSS3.
Jam oleh Mohamad Mohebifar
Tonton gerakan halus tangan kedua dalam jam ini yang menunjukkan waktu saat ini. Animasi sepenuhnya dibuat menggunakan fungsi animasi SVG.
Rainbow Rocket Man oleh Chris Gannon
Astronot menembak ke luar angkasa dengan paket jet bertenaga pelangi (?). Animasi yang bagus dibuat menggunakan plugin GSAP Tweenmax.
Ikon Animasi oleh Luigi De Rosa
Namun lebih dari ikon SVG animasi ini untuk memeriksa apa yang dapat mereka lakukan. Pembuat membuat ini menggunakan GSAP.
Flat Workspace oleh Hoàng Nhật
Animasi ini menggambarkan ruang kerja dalam desain gaya datar. Pembuatnya menggunakan GSAP untuk membuat animasi mengagumkan dari pembentukan workstation ini.
Ikon animasi yang dapat diklik oleh Hamish Williams
Ini adalah animasi keren yang memanfaatkan perpustakaan snap.svg. Klik untuk melihat surat sedang “dikirim”.
Menyelam oleh Chris Gannon
Pernahkah Anda melewatkan batu di permukaan danau? Berikut ini adalah animasi jalur SVG sederhana yang menggambarkan itu tetapi tanpa batu, dan tanpa danau.
Gerakan untuk web oleh LegoMushroom
Memiliki animasi, nada yang bagus, pintu masuk yang sangat keren untuk teks, apa yang tidak disukai? Ini dibangun dengan mo.js, pustaka JavaScript gerak grafik.
Font tulisan animasi oleh Lee Porter
Selain menggunakan SVG untuk membuat animasi jalur membuat sketsa bentuk, Anda dapat menggunakannya pada tipografi seperti apa yang dibuat pembuat ini. Efek blur membuatnya lebih dahsyat.
Menu lengket oleh Lucas Bebber
Bersenang-senang dengan efek lengket dalam desain ini, yang dibuat menggunakan filter SVG dan dengan menambahkan animasi CSS. Hasilnya realistis dan sangat keren, dan Anda dapat bermain dengan empat versi berbeda.
Kue Baru oleh Marco Barría
Cara membuat kue ulang tahun berlapis yang dibuat dengan animasi SVG dan CSS.
Terima kasih oleh Rachel Smith
Lihat saja animasi luar biasa dari catatan terima kasih yang sederhana ini. Itu dibuat menggunakan perpustakaan SVG dan GSAP TweenMax.
CSS vs SVG oleh Mario Sanchez Maselli
Sekarang mari kita lihat perbandingan tentang CSS dan animasi SVG, apakah Anda melihat perbedaannya??
Walking Dog oleh Mark Nelson
Cara lain untuk menghidupkan SVG adalah dengan menggunakan gambar sprite, seperti yang dilakukan pencipta ini.
Jam pasir loader oleh Leela
Sebuah karya kreatif yang dibuat menggunakan animasi SVG murni (SMIL); tidak ada CSS atau JS untuk menghidupkan hal-hal di sini.
Logo Animasi oleh Adem ilter
Berikut ini adalah pengantar logo animasi yang bagus menggunakan animasi SVG sebaris. Tidak ada CSS atau JS yang digunakan untuk membuat semuanya berfungsi.
Statistik animasi oleh Jonas Badalic
Grafik statistik yang indah dengan animasi SVG yang didukung oleh perpustakaan Snap.SVG.
Ouroboros oleh Noel Delgado
Jalur animasi SVG yang menakjubkan. Pertama, pencipta membuat rute jalur pada SVG, sebelum menggunakan tween.js untuk menambahkan animasi.
Efek Gooey Kreatif oleh Lucas Bebber
Berikut adalah tujuh penggunaan kreatif filter SVG untuk membuat efek seperti lengket. Visualizer musik adalah favorit saya, animasinya terlihat sangat bagus.
Lempar sapi itu oleh Sarah Drasner
Yang ini adalah animasi SVG yang didukung oleh TweenMax tetapi dibuat hanya untuk bersenang-senang. Pegang dan seret sapi di sekitar planet ini. Ini akan berputar di "orbit".
Logo Animasi oleh Ali
Animasi bisa menjadi tambahan kecil yang bagus untuk logo bir yang menggelegak. Gelembung apung kecil yang bagus dibuat murni dengan sintaks animasi asli SVG.
