การใช้ Framer Motion กับ Next.js: เพิ่ม Animation ให้เว็บดูโปรแบบมืออาชีพ 🚀

อย่าปล่อยให้เว็บนิ่งเหมือน PowerPoint สไลด์แรก 😆 ถ้าอยากให้เว็บของคุณดู Smooth และมีชีวิตชีวา Framer Motion คือทางออก!

ในบทความนี้ เราจะมาดูกันว่า Framer Motion ทำงานยังไง และเราจะใช้มันเพิ่ม Animation ให้กับ Next.js ได้แบบไหนบ้าง พร้อมตัวอย่างโค้ดที่เอาไปใช้ได้เลย!

🎭 Framer Motion คืออะไร?

Framer Motion เป็นไลบรารีสำหรับทำ Animation บน React และ Next.js มันใช้ง่ายมาก และทำให้เว็บดู Smooth & Interactive โดยไม่ต้องเขียน CSS Animation เอง

✅ ข้อดีของ Framer Motion

• ใช้ Props-based Animation 👉 ไม่ต้องเขียน @keyframes
• รองรับ Server-side Rendering (SSR) 👉 ใช้กับ Next.js ได้ดี
• มี Gesture & Scroll Animation 👉 รองรับการลาก, สัมผัส และเลื่อน
• ทำ Animation Complex ได้ง่ายมาก

🚀 ติดตั้ง Framer Motion ใน Next.js

เริ่มต้นง่ายๆ แค่ติดตั้งไลบรารีก่อน

npm install framer-motion

จากนั้นก็พร้อมใช้งานได้เลย! 🎉

🔥 เริ่มต้นกับ Motion Components

🎬 1️⃣ สร้าง Animation ง่ายๆ

เปิดไฟล์ pages/index.js แล้วลองใช้ Motion Component

import { motion } from "framer-motion";

export default function Home() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      style={{ fontSize: "24px", textAlign: "center", marginTop: "50px" }}
    >
      Hello Framer Motion! 👋
    </motion.div>
  );
}

🔹 อธิบายโค้ด:

• initial={{ opacity: 0 }} 👉 เริ่มต้นที่โปร่งใส (มองไม่เห็น)
• animate={{ opacity: 1 }} 👉 ค่อยๆ เผยตัวออกมา
• transition={{ duration: 1 }} 👉 ใช้เวลา 1 วินาที

🎉 ได้ Animation Fade-in แบบง่ายๆ แล้ว!

🏃 เพิ่ม Motion ให้ปุ่ม

🎬 2️⃣ ปุ่มที่เด้งตอนกด

import { motion } from "framer-motion";

export default function Button() {
  return (
    <motion.button
      whileTap={{ scale: 0.9 }}
      whileHover={{ scale: 1.1 }}
      style={{
        padding: "10px 20px",
        fontSize: "18px",
        borderRadius: "5px",
        border: "none",
        background: "blue",
        color: "white",
        cursor: "pointer",
      }}
    >
      Click Me 🚀
    </motion.button>
  );
}

🔹 อธิบายโค้ด:

• whileTap={{ scale: 0.9 }} 👉 ปุ่มย่อเล็กลงนิดนึงตอนกด
• whileHover={{ scale: 1.1 }} 👉 ปุ่มขยายขึ้นตอนเอาเมาส์ไปชี้

🛠 ปรับแต่งปุ่มให้ดูโปรได้ง่ายๆ แบบนี้เลย!

🔄 Animate หลายองค์ประกอบพร้อมกัน

🎬 3️⃣ ทำ List ที่มี Animation ตอนโหลด

import { motion } from "framer-motion";

const items = ["🍎 Apple", "🍌 Banana", "🍒 Cherry", "🍇 Grape"];

export default function List() {
  return (
    <div style={{ padding: "20px" }}>
      {items.map((item, index) => (
        <motion.div
          key={item}
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5, delay: index * 0.2 }}
          style={{ fontSize: "20px", marginBottom: "10px" }}
        >
          {item}
        </motion.div>
      ))}
    </div>
  );
}

🔹 อธิบายโค้ด:

• x: -50 👉 แต่ละไอเทมเริ่มจากซ้ายมือแล้วเลื่อนเข้ามา
• delay: index * 0.2 👉 ไอเทมจะเลื่อนเข้ามาทีละตัว (ไม่มาพร้อมกัน)

📜 ได้ List ที่มี Animation นุ่มๆ แล้ว!

🎡 ใช้ Variants ให้ Animation ดูเป็นธรรมชาติ

ถ้าต้องการทำ Animation ที่มีหลายสถานะ ใช้ Variants จะช่วยให้โค้ดดูสะอาดขึ้น

🎬 4️⃣ ทำ Animation ตอนเปลี่ยนหน้าใน Next.js

import { motion } from "framer-motion";

const pageVariants = {
  hidden: { opacity: 0, y: 50 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};

export default function Page() {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={pageVariants}
      style={{ fontSize: "24px", textAlign: "center", marginTop: "50px" }}
    >
      Welcome to the new page! 🎉
    </motion.div>
  );
}

🔹 อธิบายโค้ด:

• hidden 👉 เริ่มต้นจากด้านล่างและโปร่งใส
• visible 👉 ขึ้นมาที่ตำแหน่งปกติ และค่อยๆ แสดงผล

📜 ทำ Scroll Animation

อยากให้ Element ขยับตอนเลื่อนหน้าจอไหม?

🎬 5️⃣ ทำให้ Element โผล่มาตอน Scroll

import { motion, useScroll } from "framer-motion";

export default function ScrollEffect() {
  const { scrollYProgress } = useScroll();

  return (
    <motion.div
      style={{
        scale: scrollYProgress,
        width: "100px",
        height: "100px",
        background: "red",
        margin: "50px auto",
      }}
    />
  );
}

🔹 อธิบายโค้ด:

• useScroll() 👉 ใช้ตรวจจับการเลื่อน
• scale: scrollYProgress 👉 ยิ่งเลื่อนลง Element ยิ่งขยายใหญ่

🔥 ลองเลื่อนหน้าจอดู แล้วจะเห็นความเปลี่ยนแปลง!

🏁 สรุป

• Framer Motion ทำให้ Animation ใน Next.js ง่ายและดู Smooth
• ใช้ motion.div เพื่อทำ Animation ได้ทันที
• whileHover & whileTap ทำให้ปุ่ม Interactive
• Variants ช่วยจัดการหลายสถานะของ Animation
• useScroll ใช้ทำ Scroll Animation ได้ง่าย

🎨 ลองเล่นดู แล้วเว็บของคุณจะดูแพงขึ้น 300%!! 😆