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.
Install via npm:
npm install gsap
For React projects:
npm install gsap @gsap/react
import gsap from "gsap";
gsap.to(".box", {
x: 100,
duration: 1,
ease: "power2.out",
});
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 }
);
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 });
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,
}
});
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>
);
};