newkub Goal
ใช้ Anime.js สร้าง animation ที่รวดเร็ว มีประสิทธิภาพ และใช้งานง่ายในโปรเจกต์
Scope
ใช้สำหรับสร้าง CSS/JS animations ด้วย Anime.js
Execute
- ติดตั้ง Anime.js ด้วย
bun add animejs - อ่าน
guide/installation.mdสำหรับการติดตั้งและ setup - อ่าน
guide/quick-start.mdสำหรับเริ่มต้นใช้งาน - อ่าน
guide/key-concept.mdสำหรับแนวคิดหลัก - อ่าน
key-concepts/timeline.mdสำหรับระบบ timeline - อ่าน
key-concepts/easing.mdสำหรับ easing functions - อ่าน
key-concepts/staggering.mdสำหรับ staggering animations - อ่าน
key-concepts/callbacks.mdสำหรับ callbacks และ event handling - อ่าน
guide/features.mdสำหรับ features ที่มี - อ่าน
guide/configuration.mdสำหรับการตั้งค่า - อ่าน
guide/patterns.mdสำหรับ patterns ทั่วไป - อ่าน
guide/best-practices.mdสำหรับ best practices - อ่าน
principles/performance-first.mdสำหรับ performance - อ่าน
principles/accessibility.mdสำหรับ accessibility - อ่าน
guide/performance.mdสำหรับ optimization techniques - อ่าน
guide/integration.mdสำหรับการ integrate กับ frameworks - อ่าน
guide/architecture.mdสำหรับ system architecture - อ่าน
guide/structure.mdสำหรับ project structure - อ่าน
guide/troubleshooting.mdสำหรับปัญหาทั่วไป - อ่าน
references/api.mdสำหรับ API documentation - อ่าน
references/configuration.mdสำหรับ configuration reference
Rules
- ใช้
bun add animejsสำหรับ installation - ใช้
bun add -D animejsสำหรับ dev dependencies - ใช้ backticks สำหรับ
anime(),timeline(), commands - ใช้ code blocks สำหรับ animation examples
- ใช้ ansi markdown diagrams สำหรับ flow และ architecture
- ใช้
transformแทนpositionเมื่อเป็นไปได้ - ใช้
will-changeสำหรับ elements ที่จะ animate - หลีกเลี่ยง animate properties ที่ trigger layout
- ให้ผู้ใช้ปิด animations ได้ด้วย
prefers-reduced-motion - ใช้ animations เพื่อเสริม UX ไม่ใช่ distraction
- ให้ feedback ชัดเจนเมื่อ animation เสร็จ
Expected Outcome
- Animation ที่รวดเร็วและมีประสิทธิภาพ
- Code ที่ maintainable และ consistent
- UX ที่ดีและ accessible
- Performance ที่ optimized