Chapter 5: Framer Motion

Learning Flow

Learning Goals

• เข้าใจหลักการ animation บนเว็บ
• ใช้ Framer Motion ได้
• ทำ scroll + page transition animation ได้
• สร้าง Portfolio v2 พร้อม animation

Progress 0 / 4

What You’ll Build

ในบทนี้คุณจะเรียนรู้การสร้าง animation ที่ทำให้ UI รู้สึกมีชีวิต ตั้งแต่พื้นฐาน CSS animation จนถึงการใช้ Framer Motion สร้าง entrance animation, scroll animation, hover effect, stagger list และ page transition จนครบ ปิดท้ายด้วยการสร้าง Portfolio v2 พร้อม animation ที่ deploy ขึ้นอินเทอร์เน็ตได้จริง

Tip

Animation ที่ดีไม่ใช่ “มีเยอะ” แต่คือ “ละเอียดอ่อนจนแทบไม่สังเกต แต่รู้สึกดี” — บทนี้จะสอนให้คุณรู้จักใช้ animation อย่างมีจุดประสงค์

Watch & Read วิดีโอและเอกสารแนะนำสำหรับบทนี้

Study Guide เนื้อหาสรุปพร้อมตัวอย่างโค้ด

Workshop โปรเจกต์ที่ต้องทำให้สำเร็จ

Solution เฉลยโค้ดพร้อมคำอธิบาย