เขียน Animation บนเว็บไซต์ง่ายๆ ด้วย GSAP3
เมื่อเพื่อนๆอ่านบทความนี้จบ จะพบว่า การทำ Animation บนเว็บไซต์นั้นจะไม่ใช่เรื่องยากอีกต่อไป!! ทำไมหน่ะหรอ… ก็วันนี้เราจะพาทุกคนไปรู้จักกับ Javascript Animation Platform ที่จะช่วยเปลี่ยนหน้าเว็บอันสุดแสนจะธรรมดาของเรา ให้กลายเป็นเว็บไซต์ที่มีลูกเล่นเจ๋งๆ ยังไงล่ะ~
นักพัฒนาเว็บไซต์หลายๆ คนอาจจะรู้จักผ่านตา หรือเคยใช้เจ้าสิ่งที่เรียกว่า GSAP กันมาบ้างแล้ว แต่สำหรับคนที่ยังไม่รู้จักนั้น เจ้า GSAP หรืออีกชื่อหนึ่งก็คือ Green Sock Animation Platform เป็น Javascript Library ยอดนิยมสำหรับทำ Animation บนหน้าเว็บไซต์ ซึ่งเมื่อเดือนพฤศจิกายน 2019 ที่ผ่านมา ทีมนักพัฒนา GSAP ได้มีการปล่อยเวอร์ชั่นล่าสุด คือ GSAP 3 ออกมาให้เราได้ลองเล่นกันเป็นที่เรียบร้อย เรียกได้ว่า เวอร์ชั่น 3 ที่ปล่อยออกมานั้น มีการอัพเกรด Core Features ของ Library ครั้งใหญ่เลยทีเดียวค่ะ
มีอะไรใหม่ๆ บ้างใน GSAP 3
- Reduce File Size : จากการแยก Modules ของ Features ออกเป็นกลุ่มๆ ทำให้เราสามารถเลือกหยิบแค่ Module ที่เราจำเป็นต้องใช้ และตัด Module ที่ไม่ใช่ออกไปได้นั้น ช่วยลดการโหลดไฟล์ Script ที่ไม่จำเป็น ทำให้หน้าเว็บโหลดได้ไวมากยิ่งขึ้น! ซึ่งขนาดของ Library ในเวอร์ชั่น 3 นั้นเล็กลงเกือบครึ่งนึงเลยทีเดียว เมื่อเทียบกับเวอร์ชั่นก่อนหน้า
- Simplified API : มีการปรับรูปแบบการทำงานของ Library ให้เรียกใช้งานผ่าน gsap object แทน ทำให้ใช้งานได้ง่ายขึ้นกว่าเวอร์ชั่นที่ผ่านๆ มา
- Brand New Utility Methods : เพิ่มฟังก์ชันเจ๋งๆ ที่เป็นประโยชน์ต่อการทำ Animation เข้ามาใน Core Feature
- New Motion Path Plugins : เพิ่ม Plugin สำหรับทำ Motion Animation!
- Timeline Default : ลดการเขียนโค้ดซ้ำซ้อน โดยการเพิ่ม Default Timeline Setting สำหรับใส่ตั้งค่าเริ่มต้นให้ Animation ทั้ง Timeline
- Much, much more…// อ่านเพิ่มเติมได้ที่ https://greensock.com/3-release-notes
มาเริ่มต้นเขียน Animation กันเลยดีกว่า~
ก่อนอื่นเลย เราสามารถ Import GSAP3 Library เข้ามาใช้ในโปรเจ็คของเราได้หลายวิธีมากๆ แต่วิธีที่ง่ายและรวดเร็วที่สุดสำหรับการเริ่มต้นเขียนหน้าเว็บ From Scratch อย่างที่เราจะทำกันนั่นก็คือ การ Import Library ผ่าน CDN เข้ามาใช้ ซึ่ง GSAP3 นั้นยังมีตัวช่วยใน Import Core Library และ Plugins ต่างๆ อีกด้วย เพื่อนๆ ก็สามารถเข้าไปลองเริ่มต้นติดตั้ง GSAP3 ในโปรเจ็คของเพื่อนๆ ดูกันได้เลย
รู้จักกับ Tween และ Timeline
เมื่อเริ่มต้นเขียน Animation สองสิ่งแรกที่เราต้องรู้จักและทำความเข้าใจ ก็คือ Tween และ Timeline…
What’s a Tween?
Tween คือการใส่ Animation หรือ Action ต่างๆ ให้กับ Element บนหน้าเว็บ ที่เราต้องการให้มันเคลื่อนไหว ไม่ว่าจะเป็นการสั่งให้ Element นั้นมีขนาดใหญ่ขึ้น (Scale) หรือการสั่งย้ายตำแหน่งของ Element จากจุดหนึ่งไปยังจุดนึงนั่นเอง
Method เริ่มต้นสำหรับการสั่ง Tween Element ที่เราควรทำความรู้จักนั้น มีด้วยกันอยู่ 3 Methods ได้แก่
- gsap.to() : สั่งให้ Element นั้น เปลี่ยนสภาพจากตำแหน่งจริงๆ ไปยังอีกตำแหน่งหนึ่ง
- gsap.from() : สั่งให้ Element ใดๆ เปลี่ยนสภาพจากที่ๆ เราสั่ง Tween มาอยู่ในตำแหน่งจริงๆ ที่ Element นั้นอยู่
- gsap.fromTo() : สั่งให้ Element นั้น เปลี่ยนสภาพจากที่ๆ เราสั่ง Tween ไปยังอีกตำแหน่งหนึ่ง
What’s a Timeline?
Timeline คือเส้นเวลาที่เรากำหนดขึ้นมา เปรียบเหมือนกล่องที่เอาไว้เก็บคำสั่ง Tween หลายๆ อัน เพื่อจัดลำดับว่าในช่วงเวลาใดช่วงเวลาหนึ่งนั้น จะเกิด Tween Animation อะไรขึ้นบ้าง อะไรต้องเกิดก่อน เกิดหลัง หรือเกิดขึ้นพร้อมๆ กัน
สำหรับ Timeline นั้น เราสามารถสั่ง ให้ play() หรือ pause() ณ ช่วงเวลาต่างๆ ของ Timeline รวมไปถึงคำสั่งที่เป็นประโยชน์อื่นๆ เช่น reverse(), restart() หรือ progress() ได้อีกด้วย
สรุปให้เข้าใจง่ายๆ ก็คือ
Timeline นั้นจะถูกกำหนดขึ้นมาก่อน เพื่อนำเจ้าพวกคำสั่ง Tween ไปแทรกไว้ในช่วงเวลาต่างๆ ของ Timeline นั่นเอง มองเป็นภาพง่ายๆ ได้ ตามนี้…
ส่วนตัวอย่างที่จะเอามาให้ดูในบทความนี้ ก็จะเป็นวิธีง่ายๆ ที่จะสั่งให้ Animation Timeline เริ่มทำงาน เมื่อมีอีเว้นท์คลิกปุ่มเกิดขึ้น ตามแบบ Result ของ Codepen ด้านล่างนี้เลย
เมื่อเราทำการ Import GSAP Library เข้ามาใน Project ของเราเป็นที่เรียบร้อยแล้ว เราก็เริ่มทำการสร้าง gsap object ของ Timeline ขึ้นมาสำหรับใส่ Tween Animation ด้วยคำสั่ง gsap.timeline(); ได้เลย โดยในตัวอย่างจะใช้ชื่อ Timeline ว่า myTimeline และตั้งค่า default ให้ paused เอาไว้ก่อน ก็คือจะหยุดเล่นไปจนกว่าเราจะสั่งให้เริ่มเล่น Timeline นี้ได้
จากนั้นก็ทำการใส่ Tween Animation เข้าไปทีละอันตามลำดับ การเรียกใช้ .from() หรือ .to() แต่ละครั้งนั้น จะนับเป็น 1 Tween โดยแต่ละ Tween จะถูกทำต่อๆ กันไปตามลำดับ
// First Tween : เมื่อเริ่ม Timeline ให้ Element ที่มี Classname เป็น logo-circle เคลื่อนที่มาจาก position y : 700 (คือจากด้านล่างตามแกน y : 700px) ระยะเวลาในการ Tween 2 วินาที และใส่ ease เข้าไปเพื่อเพิ่มความลื่นไหลของ Movement
// Second Tween : เมื่อ First Tween ทำงานเสร็จ Second Tween จะ Fade In เข้ามา จาก Opacity : 0 เป็น Opacity : 1 (ซึ่งก็คือ Opacity จริงที่เรา Set ไว้ให้กับ Element #title-01 นั่นเอง) ระยะเวลาในการ Tween 1 วินาที
// Third Tween : เมื่อ Second Tween ทำงานเสร็จ Third Tween ก็จะเริ่มทำงาน แต่ให้สังเกตว่า Tween อันนี้ มีการใส่ Overlap Duration เข้าไปด้วย เป็น “-=0.5” หมายความว่า Third Tween จะเริ่มทำงานเร็วกว่าที่ควรจะเป็น 0.5 วินาที ซึ่งเป็นช่วงเดียวกับที่ Second Tween ใกล้จะทำงานเสร็จนั่นเอง
// Forth Tween : เมื่อ Third Tween ทำงานเสร็จ Forth Tween จะ Fade In เข้ามา จาก Opacity : 0 เป็น Opacity : 1 ด้วยระยะเวลาในการ Tween 1 วินาที
// Fifth Tween : ข้อแตกต่างของ Tween นี้ก็คือ ใช้ฟังก์ชั่น .to() แทน .from() สิ่งที่เกิดขึ้นก็คือ จาก .logo-circle ที่ Opacity นั้นเป็น 1 อยู่ เมื่อ Fifth Tween ทำงาน Opacity ก็จะถูก Overide ให้เป็น 0 แทน และจะคงสภาพ Opacity : 0 ไปเรื่อยๆ จนกว่าเราจะสั่งให้เป็นค่าอื่น
ภาพรวมของ myTimeline นั้นก็จะกลายเป็นเหมือนดังภาพด้านบน โดยเวลารวมของ Tweens ทั้ง Timeline ก็จะอยู่ที่ 7.5 วินาที
สุดท้ายนั้น เราก็ทำการเพิ่ม Click Event เข้าไป เมื่อ Click ปุ่มก็ให้ myTimeline.play() หรือก็คือคำสั่งให้เริ่มเล่น Animation Timeline ที่ชื่อว่า myTimeline ของเรานั่นเอง จากนั้นเมื่อ .play() ไปเรียบร้อยแล้ว ก็ใช้คำสั่ง myTimeline.restart() เพื่อที่ว่า ถ้ามีการ Click อีก ให้เริ่มเล่น Timeline ที่ 0 วินาทีใหม่
ด้วยโค้ด JavaScript เพียงแค่ 13 บรรทัดเท่านั้น ก็สามารถสร้าง Animation สนุกๆ ขึ้นมาได้แล้ว เห็นมั้ยยย ง่ายอย่างที่บอกไว้เลย
เพื่อนๆ คนไหนที่สนใจเอา GSAP3 ไปต่อยอด ทำหน้าเว็บไซต์เจ๋งๆ คูลๆ ก็สามารถเข้าไปอ่านต่อแบบฉบับ Advanced กันได้ที่ Document ของ GSAP3 ได้เลยนะคะ สุดท้ายนี้ ก็ขอแนะนำ Showcase ว้าวๆ เผื่อให้เข้าไปดูเพิ่มแรงบันดาลใจและต่อยอดไอเดีย ได้ที่ https://greensock.com/showcase/ เลยค่าาา~
ขอขอบคุณความรู้ดีๆ จาก…
https://greensock.com/docs/v3/GSAP
