อยากมี Scrolling Animation สวย ๆ เเบบนี้มั้ยครับ ถ้าผมบอกว่าผมมี Library ตัวนึงที่จะมาช่วยให้การทำ Animation ในเว็บมันง่ายขึ้น จะดูเจ๋งมั้ยครับ วันนี้ผมขอเสนอ GSAP JavaScript Animation Library
สวัสดีครับ พีเค ภัคพล ธีรชัยศุภกิจ Section frontend developer วันนี้ผมมากับบทความ Gsap คืออะไร? ตัวช่วยที่จะทำให้คุณได้รู้ เเละได้ลองในการฝึกทำ Animation ใน Website ของคุณ อย่ารอช้า เรามาเริ่มกันเลย
Gsap คืออะไร??
Gsap คือ Javascript Library จากทาง Greensock ที่จะช่วยให้คุณสร้าง Animation ระดับเทพในหน้าเว็บไซต์ของคุณได้ครับ ซึ่งจะช่วยทำให้เว็ปดูเจ๋งขึ้นมาเลยครับ
มาเริ่มใช้Gsap Animationกันเลย!!
เราต้องมารู้กันก่อนว่า Gsap มี Method สำคัญหลาย Method มาก ๆ ซึ่งเเต่ละ Method จะมีหน้าที่ Animate หรือ Trigger Animation ที่ต่างกัน ซึ่งวันนี้ผมจะมาพาใช้ 4 Method เริ่มต้นง่าย ๆ ครับไปเริ่มกันเลย
โดยจะทำเป็น React Project นะครับ เพื่อความกระชับ ให้ไปทำการติดตั้ง React Project ให้เรียบร้อยก่อนนะครับ เเนะนำ Link นี้ https://tailwindcss.com/docs/guides/create-react-app
หลังจากเราทำเรียบร้อย เรามาติดตั้ง Gsap กัน
npm install gsap @gsap/reactGsapTo
เริ่มมาคือผมจะทำการ Import Gsap สองบันทัดด้านบนเเละสร้าง Function ที่ใช้ useGSAP ซึ่งเป็น Special Hook จากนั้นจะทำ Call Back Function ที่ Return ค่า ข้างในเราจะใช้ gsap.to() เพื่อ Animate สิ่งที่ต้องการ โดยใช้ to Method เพื่อตั้งค่าต่าง ๆ ครับ ต่อมา 1. Parameter เเรก คือวัตถุที่เราเจาะจงที่จะ Animate 2. Parameter ต่อมา คือ Variable ที่เราต้องการที่จะ Aimate มัน โดยสังเกตว่าผมจะสั่งให้มันไปที่ตำเเหน่ง เเนวนอนหรือแนวแกน X เป็นระยะ 250 pixel โดยมีการกำหนด Repeat เป็น -1 ซึ่งหมายถึงการทำซ้ำเเละ yoyo เป็น true หมายถึง เพิ่มความ Smooth คือให้มัน Reverse กลับมาด้วยครับ
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
const GsapTo = () => {
// ทำตรงนี้ครับ
useGSAP(()=>{
gsap.to('#blue-box' ,{
x : 250,
repeat:-1,
yoyo:true,
})
},[]);
return (
<main>
<h1>GsapTo</h1>
<p className="mt-5 text-gray-500">
The <code>gsap.to()</code>
</p>
<p className="mt-5 text-gray-500">
เรียนรู้เพิ่มเติมclickตรงนี้{" "}
<a
href="https://greensock.com/docs/v3/GSAP/gsap.to()"
target="_blank"
rel="noreferrer noopener nofollow"
>
gsap.to()
</a>{" "}
method.
</p>
<div className="mt-20">
<div id="blue-box" className="w-20 h-20 bg-blue-500 rounded-lg" />
</div>
</main>
);
};
export default GsapTo;
ซึ่งไม่ใช่เเค่นั้น เรายังสามารถปรับเเต่งได้อีกหลายอย่าง เช่น Rotation ให้กล่องของเราหมุน หรือว่า Duration เพิ่มระยะเวลา ความช้าให้มันได้เช่นกัน
gsap.to('#blue-box' ,{
x : 250,
repeat:-1,
yoyo:true,
rotation:360,
duration:2
})
},[]);GsapFrom
gsap.from() ทำงานเหมือนกับการเคลื่อนที่แบบย้อนกลับ ซึ่งเหมาะสำหรับการสร้างเอฟเฟคต์การปรากฏของวัตถุบนหน้าจอ มันจะทำงานกลับด้านกับ GsapTo ครับผม ซึ่งมันจะช่วยให้ควบคุมลักษณะของวัตถุในตอนท้ายของแอนิเมชันได้ดีมากขึ้นครับ
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
const GsapFrom = () => {
// ทำตรงนี้ครับ
useGSAP(()=>{
gsap.from('#blue-box' ,{
x : 250,
repeat:-1,
yoyo:true,
})
},[]);
return (
<main>
<h1>GsapFrom</h1>
<p className="mt-5 text-gray-500">
The <code>gsap.from()</code>
</p>
<p className="mt-5 text-gray-500">
เรียนรู้เพิ่มเติมclickตรงนี้{" "}
<a
href="https://greensock.com/docs/v3/GSAP/gsap.from()"
target="_blank"
rel="noreferrer noopener nofollow"
>
gsap.from()
</a>{" "}
method.
</p>
<div className="mt-20">
<div id="blue-box" className="w-20 h-20 bg-blue-500 rounded-lg" />
</div>
</main>
);
};
export default GsapFrom;
GsapFromTo
Method นี้คล้ายกับ gsap.from() กับ gsap.to() เลยครับ เเต่ความต่างคือ gsap.fromTo() เนี่ยจะ Animates จาก new State ไป new State ก่อนหน้านี้เราได้เจอกับ gsap.from() ที่เป็นจาก State ใหม่กลับมาที่เดิม หรือ gsap.to() ที่จาก State เดิมไป new State ถ้างั้นเรามาลองใช้กันเลย
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
const GsapFromTo = () => {
// ทำตรงนี้ครับ
useGSAP(()=>{
gsap.fromTo('#blue-box' ,{
x : 0,
rotation:0,
borderRadius:0,
},
{
x: 250,
repeat:-1,
borderRadius:'100%',
rotation:360,
duration:4,
yoyo:true,
})
},[]);
return (
<main>
<h1>GsapFrom</h1>
<p className="mt-5 text-gray-500">
The <code>gsap.fromTo()</code>
</p>
<p className="mt-5 text-gray-500">
เรียนรู้เพิ่มเติมclickตรงนี้{" "}
<a
href="https://greensock.com/docs/v3/GSAP/gsap.fromTo()"
target="_blank"
rel="noreferrer noopener nofollow"
>
gsap.fromTo()
</a>{" "}
method.
</p>
<div className="mt-20">
<div id="blue-box" className="w-20 h-20 bg-blue-500 rounded-lg" />
</div>
</main>
);
};
export default GsapFromTo;เรามาดูโค้ดนี้กันคร่าว ๆ State ใหม่ที่สร้างอยู่ที่ตำเเหน่งแกน X ที่ 0px เเละให้ขอบเป็นสี่เหลี่ยม หลังจากนั้นให้ไปที่แกน X เป็น 250px เเละให้เปลี่ยนรูปร่างเป็นวงกลมเพื่อให้เห็นชัด ๆ เเละเเสดง Reverse ด้วย yoyo
GsapTimeline
gsap.timeline() เป็น Method ที่คล้ายกับ สามอันก่อนหน้านี้ เเต่ความต่างคือ timeline เราสามารถที่จะ Manage หลาย Animationได้ มาลองกันเลย
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
const GsapTimeline = () => {
const timeline = gsap.timeline({
repeat: -1,
yoyo: true,
});
useGSAP(() => {
timeline.to('#yellow-box', {
x: 250,
rotation: 360,
borderRadius: "100%",
duration: 2,
})
timeline.to('#yellow-box', {
y: 250,
scale: 2,
rotation: 360,
borderRadius: "100%",
duration: 2,
})
timeline.to('#yellow-box', {
x: 550,
scale: 1,
rotation: 360,
borderRadius: "100%",
duration: 2,
})
}, []);
return (
<main>
<h1>GsapTimeline</h1>
<p className="mt-5 text-gray-500">
ดูเพิ่มเติม{" "}
<a
href="https://greensock.com/docs/v3/GSAP/gsap.timeline()"
target="_blank"
rel="noreferrer noopener nofollow"
>
gsap.timeline()
</a>{" "}
method.
</p>
<div className="mt-20 space-y-10">
<button className ="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"onClick={() => {
if (timeline.paused()) {
timeline.play();
} else {
timeline.pause();
}
}}>Play/Pause</button>
<div id="yellow-box" className="w-20 h-20 bg-yellow-500 rounded-lg" />
</div>
</main>
);
};
export default GsapTimeline;ถ้าดูในช่องนี้ ผมได้สร้างตัวเเปร timeline ขึ้นมา โดยใช้ Method gsap.timeline() เเละได้ใส่ว่าถ้า timeline ถูกใช้ Effect Repeat เเละ yoyo เเละมาดูที่โค้ด ไม่ต่างจาก gsap.to() , gsap.from() และ gsap.fromto() เลย เเต่มันสามารถเพิ่มตำเเหน่งใหม่ ๆ ลูกเล่นใหม่ ๆได้ ผมเลยสร้าง State ใหม่มา 3 State ครับ
const timeline = gsap.timeline({
repeat: -1,
yoyo: true,
});
useGSAP(() => {
timeline.to('#yellow-box', {
x: 250,
rotation: 360,
borderRadius: "100%",
duration: 2,
})
timeline.to('#yellow-box', {
y: 250,
scale:2,
rotation: 360,
borderRadius: "100%",
duration: 2,
})
timeline.to('#yellow-box', {
x: 550,
scale:1,
rotation: 360,
borderRadius: "100%",
duration: 2,
})
}, []);นี่คือผลที่ได้ครับ
เป็นยังไงบ้างครับ งงกันมั้ย ผมพยายามเอาในส่วนที่เข้าใจได้ง่ายเเละน่าจะสนุกกับมันมาให้ลองทำ ก็ถ้าใครอยากลองทำ Animation Website จริงจังก็สามารถเข้าไปศึกษาต่อได้ที่ https://greensock.com/docs/v3/GSAP
สำหรับวันนี้ ภัคพล ขอลาไปก่อน มีความสุขกับการโค้ดดิ้งครับ😊
