THROUGHTHEEYESOFCHANGEMAKERS
01
Scroll Tracking & Smooth Scrolling
อ้างอิง: C2MTL — headline เผยทีละคำ + ภาพ slide เข้าตอน scroll · Lenis smooth
เลื่อนผ่านบล็อกนี้ช้าๆ — section ถูก pin ไว้ คำในหัวข้อโผล่ทีละคำ และ tile รูปวิ่งเข้าหากึ่งกลางตามความคืบหน้าการ scroll (scrub 1:1).
02
Text-Splitting Animation
อ้างอิง: Motto / Sundae — บรรทัดใหญ่เผยจากใต้เส้น mask ทีละบรรทัด
SplitType แตกเป็นบรรทัด+คำ แล้วเลื่อนขึ้นจากใต้ overflow:hidden (clip mask) — เอฟเฟกต์ "ขึ้นจากพื้น" แบบ agency site.
✳ METHOD ✳ METHOD ✳ METHOD
A NEW GENERATION COMMUNICATIONS AGENCY
03
Micro-animations
อ้างอิง: NEWPEACE (loader วาดเส้น+เช็ก) · Calm Craft (ปุ่ม Rive ตามเคอร์เซอร์ + hover/click state)
ซ้าย: SVG loader วาดเส้นต่อเนื่องแล้วจบด้วย checkmark. ขวา: ปุ่มที่ fill วิ่งจากจุดกด + ตามเคอร์เซอร์เล็กน้อย พร้อม state hover/click.
LOADER · stroke-dashoffset → check
BUTTON · fill from cursor + magnetic
04
Transitions & Reveals
อ้างอิง: Metalab — คลิกรูป → ซูมเต็มจอแบบ FLIP (shared-element zoom transition)
คลิกการ์ดใดก็ได้ → มันขยายลื่นไปเป็นแผงเต็มจอด้วย GSAP Flip (วัด state ก่อน/หลังแล้ว interpolate). คลิกอีกครั้งเพื่อย้อน.
Project 01
Project 02
Project 03
Project 04
05
Easing
อ้างอิง: GSAP Ease Visualizer — กราฟเส้น ease + จุดวิ่งไล่ตามเส้น
เลือก ease ทางขวา → กราฟวาดเส้นโค้งของ ease นั้น พร้อมจุดวิ่งไล่ และลูกบอลตกตามจังหวะจริง เห็น "feel" ของแต่ละเส้นชัดๆ.
06
SVG & Mask Animations
อ้างอิง: Lightship (star mask เผยภาพตอน scroll) · Accordion (mask wipe transition)
รูปดาว 4 แฉกเป็น clip mask — scroll แล้วมันขยายเผยพื้นหลังไล่สี + คำ "GO FURTHER" ข้างใต้ ผูกแบบ scrub.
เลื่อนผ่านบล็อกนี้ — ดาวขยายเผยภาพ
07
3D Animations
อ้างอิง: Brew District (กระป๋อง 3D หมุนโชว์สินค้า) · Mana (กระป๋องโฟกัสกลาง พื้นหลัง collage พลิกตาม scroll)
กระป๋อง 3D จริง (Three.js) — ฉลาก canvas texture, ฝาโลหะ, ไฟ 3 จุด, เงา contact, พื้นหลังไล่สีเคลื่อนไหว. หมุนเองตลอด + ลากเมาส์เพื่อหมุน + พลิกตาม scroll.
หัวใจ: CylinderGeometry + CanvasTexture ฉลาก + MeshStandardMaterial (metalness/roughness) + DirectionalLight 3 ดวง (key/fill/rim) + เงาวงรีใต้กระป๋อง. ScrollTrigger scrub ต่อ rotation.y กับ scroll.
08·A
WebGL — Particle Assembly
อ้างอิง: Hatom — particle หลายพันจุดประกอบตัวจากจุดเดียวเป็นรูปทรงเรืองแสง · cursor distort
จุดกระจัดกระจาย lerp เข้าหาตำแหน่งเป้า (sphere/torus-knot) ประกอบเป็นรูป มี core เรืองแสง additive และ ผลักหนีเมาส์ เมื่อเข้าใกล้ — พื้นมืดม่วงแบบ Hatom.
หัวใจ: เก็บ 2 ชุดพิกัด (scattered ↔ target). ทุกเฟรม lerp position เข้าหา target + แรงผลักรัศมีจากเมาส์ที่ project ลงระนาบ. PointsMaterial additive + sprite glow = แสงฟุ้ง.
08·B
WebGL — 3D Image Carousel
อ้างอิง: Anderson Mancini — แถวภาพโค้งใน 3 มิติ ลาก/scroll หมุนทะลุภาพ
ระนาบภาพหลายใบเรียงเป็นวงโค้งใน 3D — ลากหรือ scroll เพื่อหมุนวง ภาพที่อยู่กลางขยายเด่น มี momentum หน่วงแบบลื่น.
หัวใจ: วาง N planes รอบวงกลม (มุม = i/N·2π) หันเข้ากล้อง. หมุน group ด้วย velocity + damping. ภาพ = CanvasTexture ไล่สี+เลข (แทน asset จริง). hover/center → scale ขึ้น.