Merancang Micro-Animations & Dynamic UI Fluid dengan Framer Motion
Teknik membuat animasi layout interaktif, transisi halaman halus, layoutId untuk komponen navigasi, dan efek hover intuitif.
Animasi bukan sekadar hiasan visual—animasi yang dirancang dengan baik membantu memberikan umpan balik (feedback) langsung kepada pengguna dan memperjelas navigasi antar elemen UI.
Kekuatan Dynamic Layout dengan layoutId
Salah satu fitur paling hebat dari Framer Motion adalah animasi otomatis saat komponen berpindah posisi atau berganti tab menggunakan layoutId.
import { motion } from "framer-motion";
import { useState } from "react";
const tabs = ["Semua", "React", "Next.js", "UI/UX"];
export function TabFilter() {
const [activeTab, setActiveTab] = useState("Semua");
return (
<div className="flex gap-2 p-1.5 bg-muted/50 rounded-full border border-border/40">
{tabs.map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className="relative px-4 py-1.5 text-xs font-semibold rounded-full transition"
>
{activeTab === tab && (
<motion.span
layoutId="activeTabPill"
className="absolute inset-0 bg-amber-500/20 rounded-full border border-amber-500/30"
transition={{ type: "spring", stiffness: 400, damping: 30 }}
/>
)}
<span className="relative z-10">{tab}</span>
</button>
))}
</div>
);
}
Prinsip Animasi Fluid: Gunakan transisi tipe spring daripada tween linier agar gerakan terasa alami sesuai dengan hukum fisika nyata.
Animasi Grid & List Re-ordering
Saat melakukan filter artikel atau proyek, gunakan AnimatePresence untuk menganimasikan kemunculan dan hilangnya elemen dari DOM secara mulus:
import { motion, AnimatePresence } from "framer-motion";
export function AnimatedGrid({ items }: { items: Array<{ id: string; name: string }> }) {
return (
<motion.div layout className="grid grid-cols-1 md:grid-cols-2 gap-6">
<AnimatePresence>
{items.map((item) => (
<motion.div
key={item.id}
layout
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={{ duration: 0.25 }}
className="p-6 rounded-2xl border border-border bg-card shadow-sm"
>
<h3>{item.name}</h3>
</motion.div>
))}
</AnimatePresence>
</motion.div>
);
}
Kesimpulan
Dengan mengombinasikan layoutId, AnimatePresence, dan parameter spring physics di Framer Motion, interface web Anda akan terasa sangat responsif, fluid, dan menyenangkan saat digunakan.
Artikel Terkait
Lihat SemuaOptimasi Performa Next.js 16 App Router & React Server Components
Strategi praktis meningkatkan kecepatan muat halaman, optimasi font & gambar, serta pemanfaatan Caching & Streaming SSR di Next.js 16.
Panduan Lengkap Styling Modern dengan Tailwind CSS v4 & CSS Variables
Eksplorasi fitur-fitur baru Tailwind CSS v4, konfigurasi berbasis CSS engine baru, integrasi CSS variables, dan performa build yang jauh lebih cepat.