🚀 GSAP (GreenSock Animation Platform)

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations that work in every major browser. It's widely used for UI animations, scroll-based effects, timelines, and much more.

---

📦 Installation

Install via npm:

npm install gsap

For React projects:

npm install gsap @gsap/react

---

🧪 Basic Usage

import gsap from "gsap";

gsap.to(".box", {
  x: 100,
  duration: 1,
  ease: "power2.out",
});

---

🔧 Core Methods

Method	Description
gsap.to()	Animates from current state to given values
gsap.from()	Animates from given values to current state
gsap.fromTo()	Defines both start and end values
gsap.timeline()	Sequences multiple animations

Example:

gsap.fromTo(".item",
  { opacity: 0, y: 50 },
  { opacity: 1, y: 0, duration: 1 }
);

---

📽 Timeline Example

const tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 0.5 }, "-=0.5")
  .to(".box3", { opacity: 1, duration: 0.8 });

---

🎯 ScrollTrigger Plugin

GSAP’s ScrollTrigger plugin enables scroll-based animations.

npm install gsap

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  x: 200,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom 100px",
    toggleActions: "play none none none",
    scrub: true,
  }
});

---

⚛ React + GSAP Example

import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const MyComponent = () => {
  useGSAP(() => {
    gsap.to(".title", {
      opacity: 1,
      y: 0,
      duration: 1
    });
  }, []);

  return (
    <h1 className="title opacity-0 translate-y-10">Hello GSAP</h1>
  );
};

---

📚 Useful Links

• 🔗 Official Website
• 📖 GSAP Docs
• 🎯 ScrollTrigger Docs
• 🎥 GSAP YouTube Tutorials