Membuat Animasi SVG dengan Framer Motion

Apa itu SVG?

SVG (Scalable Vector Graphics) adalah format grafis vektor yang dapat digunakan untuk membuat gambar dan animasi dengan resolusi tinggi. Salah satu cara untuk menciptakan animasi SVG yang menarik adalah dengan menggunakan Framer Motion, sebuah library animasi yang kuat untuk React. Dalam artikel ini, kita akan membahas bagaimana cara membuat animasi SVG dengan Framer Motion.

Apa itu Framer Motion?

Framer Motion adalah library animasi open-source yang dikembangkan oleh Framer. Ia menyediakan berbagai fitur animasi yang dapat digunakan dengan mudah dalam aplikasi web React. Framer Motion dapat digunakan untuk membuat berbagai jenis animasi, termasuk animasi SVG.

Memulai dengan Framer Motion

Langkah pertama untuk membuat animasi SVG dengan Framer Motion adalah menginstalnya ke dalam proyek React Anda. Anda dapat melakukannya dengan perintah npm atau yarn:

npm install framer-motion

Setelah menginstalnya, Anda dapat mengimpor library ini ke dalam komponen React Anda seperti berikut:

import { motion } from "framer-motion";

Membuat Komponen SVG

Langkah selanjutnya adalah membuat komponen SVG yang akan dianimasikan. Anda dapat menggunakan tag SVG standar atau mengimpor file SVG eksternal ke dalam proyek Anda. Berikut adalah contoh sederhana komponen SVG:

import React from "react";

function AnimatedSVG() {
  return (
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
  );
}

export default AnimatedSVG;

Menambahkan Animasi dengan Framer Motion

Sekarang, mari kita tambahkan animasi ke komponen SVG ini menggunakan Framer Motion. Misalnya, kita ingin menerapkan animasi perubahan warna saat kursor mouse mengarah ke lingkaran SVG. Berikut cara melakukannya:

import React from "react";
import { motion } from "framer-motion";

function AnimatedSVG() {
  return (
    <motion.svg
      width="100"
      height="100"
      xmlns="http://www.w3.org/2000/svg"
      whileHover={{ fill: "red" }}
    >
      <motion.circle
        cx="50"
        cy="50"
        r="40"
        fill="blue"
        whileHover={{ fill: "green" }}
      />
    </motion.svg>
  );
}

export default AnimatedSVG;

Dalam contoh di atas, kami menggunakan prop whileHover dari Framer Motion untuk mengubah warna lingkaran SVG saat kursor mouse berada di atasnya.

Menggabungkan Lebih Banyak Animasi

Anda dapat menggabungkan berbagai jenis animasi seperti transisi, pergerakan, dan rotasi ke komponen SVG Anda sesuai kebutuhan. Framer Motion menyediakan banyak prop dan fitur untuk menciptakan animasi yang kompleks dan menarik.

Kesimpulan

Dengan menggunakan Framer Motion, Anda dapat dengan mudah membuat animasi SVG yang menarik dan interaktif dalam proyek React Anda. Ini adalah pilihan yang bagus untuk meningkatkan pengalaman pengguna dan membuat desain web Anda lebih menarik. Cobalah sendiri untuk menciptakan animasi SVG yang kreatif dan sesuaikan dengan kebutuhan proyek Anda. Semoga artikel ini membantu Anda memahami dasar-dasar animasi SVG dengan Framer Motion.