Skip to main content
0

อยากมี 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/react

GsapTo

เริ่มมาคือผมจะทำการ 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

สำหรับวันนี้ ภัคพล ขอลาไปก่อน มีความสุขกับการโค้ดดิ้งครับ😊

ภัคพล ธีรชัยศุภกิจ

Author ภัคพล ธีรชัยศุภกิจ

พีเค ภัคพล ธีรชัยศุภกิจ section frontend developer จากborntodev devinit2 ครับ ผมมีความฝันว่าอยากจะเป็นprogrammer frontendที่สามารถสอนโค้ดให้เข้าใจได้ง่ายที่สุดครับ

More posts by ภัคพล ธีรชัยศุภกิจ
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า