animasi-dengan-framer-motion

UI modern gak lengkap tanpa animasi. Ada fine line antara "fluid" dan "annoying". Kuncinya: animasi harus terasa sebagai respons, bukan gangguan.

3 pola utama di codebase ini

1. Scroll-triggered entrance

<motion.div
  initial={{ opacity: 0, y: 18 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-80px" }}
  transition={{ duration: 0.65, ease: "easeOut" }}
/>

Komponen reveal saat masuk viewport. once: true biar gak replay. margin: -80px biar trigger sebelum benar-benar kelihatan.

2. Custom cubic bezier

ease: [0.23, 1, 0.32, 1] — overshoot halus, gerakan terasa snappy tanpa bouncing.

3. Layout animation

<motion.div layout>{children}</motion.div>

Auto-animate perubahan posisi dan ukuran antar re-render.

Kapan gak usah animasi

• Loading skeleton — bikin nunggu terasa lebih lama
• Data table panjang — bikin motion sickness
• User disable motion di OS — cek prefers-reduced-motion

import { useReducedMotion } from "framer-motion"
const shouldReduce = useReducedMotion()
 
<motion.div animate={shouldReduce ? { opacity: 1 } : { opacity: 1, y: 0 }} />