Skip to content

rof1yev/gsap_tutorial_react

Repository files navigation

🚀 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