Dokumen ini dibuat untuk membantu pengguna Indonesia yang belajar Framer mengatasi kesulitan akibat kurangnya materi berbahasa Indonesia, dengan menerjemahkan konten blog resmi dan menambahkan informasi bermanfaat untuk praktik sehari-hari. Semoga dapat memberikan sedikit bantuan bagi Anda yang menggunakan FramerFramer.

Apa itu Animasi SVG?

SVG (Scalable Vector Graphics) adalah grafis berbasis vektor yang tidak pecah pikselnya pada ukuran berapa pun. Cocok untuk ikon, logo, dan berbagai elemen visual, serta terlihat jelas di layar kecil maupun besar.

• Berbeda dengan gambar bitmap yang terdiri dari kumpulan piksel, SVG terdiri dari set perintah yang diproses oleh prosesor.

• Berdasarkan titik dan bentuk, sehingga mudah disesuaikan ukurannya, dan karena berbasis kode, bukan piksel, mudah untuk diedit dan didaur ulang.

• Ukuran file yang kecil membuatnya cepat dimuat. Oleh karena itu, banyak digunakan dalam desain web modern.

Sejarah Animasi SVG

• Akhir 1990-an: Munculnya contoh animasi SVG pertama

• 2003: Dukungan mulai dari beberapa browser

• 2011: Dukungan resmi oleh browser utama

• 2018: Peluncuran SVG2 → Penyebaran alat animasi yang mudah digunakan

Dahulu diperlukan program atau plugin terpisah, namun setelah SVG2, mulai mendapat perhatian serius.

Animasi SVG dengan JavaScript dan HTML

Kecepatan situs web menjadi faktor penting dalam menentukan peringkat pencarian Google. Oleh karena itu, penggunaan GIF berkurang sementara animasi SVG berbasis JavaScript dan HTML5 meningkat pesat popularitasnya.

Penggunaan GIF yang berat dapat memperlambat situs dan menjatuhkan peringkat, sedangkan SVG yang ringan dan cepat serta mudah dimodifikasi, menjadikannya alternatif bagi GIF.

Prinsip Kerja Animator SVG

Animasi SVG bekerja dengan cara yang mirip dengan menggambar dengan pena, dengan mengeksekusi instruksi untuk mengikuti jalur (path). Misalnya, bayangkan memberi instruksi kepada seseorang yang menggambar dengan pena: “Geser tangan ke kiri sekitar 7,5 cm, lalu putar ke kanan 180 derajat, gerakkan lagi sekitar 13,5 cm.” Seperti itu.

• Jalur SVG memiliki titik awal, titik akhir, dan panjang, serta proses menggambar dari 0 → panjang keseluruhan dapat dianimasikan.

• Dapat memberikan efek visual di mana garis muncul satu per satu atau bentuk tampak selesai.

Animator komponen dari Framer (dibuat oleh Benjamin den Boer) mengotomatiskan proses ini dan memungkinkan Anda membuat animasi dengan mudah hanya dengan mengatur atribut yang terhubung dengan SVG di kanvas.

Membuat Animasi SVG dengan Alat Vektor Baru dari Framer

Fitur pengeditan vektor baru dari Framer membuatnya lebih mudah untuk menggambar atau mengimpor dan mengelola serta menganimasi SVG. Anda dapat bekerja langsung di atas kanvas tanpa perlu menulis kode.

Langkah 1: Menggambar atau Mengimpor SVG

Ada dua cara menambah SVG ke Framer.

1. Gambar langsung: Pilih Insert Menu → Vector dan buat bentuk vektor langsung di kanvas.

2. Impor: Seret dan lepas file SVG yang ada agar otomatis diubah menjadi Vector Set. (Mengelompokkan ikon atau ilustrasi ke dalam satu set).

Langkah 2: Menyusun dengan Vector Set

Vector Set membantu mengelola desain dengan rapi dan terukur.

1. Klik kanan grup vektor → pilih Create Vector Set atau buat set baru di panel Assets

2. Dapat diatur, diedit, dan dicari di kanvas khusus Vector Set

Fitur tambahan sebagai berikut:

• Dukungan variabel: memungkinkan perubahan atribut seperti warna stroke, opacity secara individual.

• Peningkatan reusabilitas ikon: memungkinkan customisasi per instance tanpa harus menduplikasi ikon yang sama.

• Pembuatan ikon multitonal: dapat membuat ikon warna duotone atau multitonal dalam satu set.

Langkah 3: Menerapkan Efek Stroke sebagai Animasi

Efek Stroke Animation yang baru dapat membuat grafis vektor lebih hidup.

1. Pilih vektor, lalu buka Properties panel

2. Pilih dan tambahkan Stroke Animation di bagian Effects

Atribut Stroke Animation

• Length: Menyesuaikan panjang garis yang digambar (0 ~ 100%)

• Gap: Menyesuaikan jarak antara garis

• Offset: Menggeser titik awal untuk mengubah arah/p12osisi animasi

Mode loop

• None: Berputar sekali

• Loop: Diulang terus menerus

• Ping-Pong: Memutar maju/mundur bolak-balik

Kesimpulan

Animasi SVG kecil dan cepat namun tetap menarik secara visual. Memanfaatkan alat vektor dan komponen Animator Framer memungkinkan Anda membuat animasi SVG dengan mudah tanpa harus menulis kode.

Jadi, ikon atau logo apa yang ingin Anda buatkan animasinya? Jika artikel di atas belum memberikan gambaran yang jelas, cobalah mengikuti video tutorial di bawah ini. Dengan melihat prosesnya, Anda akan dapat menyelesaikan animasi SVG yang lebih keren dengan lebih cepat.

Artikel ini adalah terjemahan dan adaptasi dari konten ‘SVG animation mastery for designers’ di blog resmi Framer.