Membuat Animasi Web Modern dengan Framer Motion: Panduan Terkini 2026

Mengenal Framer Motion

Framer Motion adalah sebuah library animasi web yang populer dan digunakan oleh banyak pengembang web. Dengan menggunakan Framer Motion, kamu dapat menciptakan animasi web yang menarik, responsif, dan dapat disesuaikan untuk kebutuhan aplikasi web.

Cara Menggunakan Framer Motion

Untuk menggunakan Framer Motion, kamu perlu menginstal library terlebih dahulu. Kamu dapat menginstalnya menggunakan npm atau yarn dengan perintah berikut:

• npm install @framer/motion
• yarn add @framer/motion

Setelah menginstal library, kamu dapat menggunakan Framer Motion dalam proyekmu. Berikut adalah contoh cara menggunakan Framer Motion:

Contoh 1: Membuat Animasi Transisi

Kamu dapat membuat animasi transisi dengan menggunakan Framer Motion. Berikut adalah contoh kode untuk membuat animasi transisi:

import { motion } from '@framer/motion';

const Transition = motion.div;

const App = () => {
   return (
      
         {/* Konten animasi */}
      
   );
};

Contoh 2: Membuat Animasi Interaktif

Kamu dapat membuat animasi interaktif dengan menggunakan Framer Motion. Berikut adalah contoh kode untuk membuat animasi interaktif:

import { motion } from '@framer/motion';

const Button = motion.button;

const App = () => {
   return (
      
         {/* Tombol animasi */}
      
   );
};

Kelebihan Menggunakan Framer Motion

Menggunakan Framer Motion memiliki banyak kelebihan, antara lain:

• Mudah digunakan
• Responsif
• Dapat disesuaikan
• Tidak memerlukan kode CSS yang rumit

Dengan menggunakan Framer Motion, kamu dapat menciptakan animasi web yang menarik, responsif, dan dapat disesuaikan untuk kebutuhan aplikasi web. Jadi, tidak ada alasan untuk tidak mencoba menggunakan Framer Motion dalam proyekmu.