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> ); };
- π Official Website
- π GSAP Docs
- π― ScrollTrigger Docs
- π₯ GSAP YouTube Tutorials