GSAP

GSAP (GreenSock)

For complex timeline animations, we use GSAP.

Installation

npm install gsap @gsap/react

Basic Animation

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

const MyComponent = () => {
  useGSAP(() => {
    gsap.from(".box", {
      opacity: 0,
      y: 100,
      duration: 1,
      ease: "power3.out"
    });
  });

  return <div className="box">Animated</div>;
};

Timeline

useGSAP(() => {
  const tl = gsap.timeline();
  
  tl.from(".title", { opacity: 0, y: -50 })
    .from(".subtitle", { opacity: 0 }, "-=0.3")
    .from(".button", { opacity: 0, scale: 0.8 });
});

ScrollTrigger

import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

gsap.from(".section", {
  scrollTrigger: ".section",
  opacity: 0,
  y: 100
});