GSAP là gì?
GSAP (GreenSock Animation Platform) là bộ công cụ animation cho web, cho phép animate gần như mọi thứ mà JS chạm tới: CSS, SVG, Canvas/WebGL và framework hiện đại. Nhiều site đoạt giải đã dùng GSAP. [Nguồn 1][Nguồn 2]
Điểm đáng giá:
- Core vững, API dễ dùng, mượt trên nhiều trình duyệt.
- Hệ plugin “đỉnh”: ScrollTrigger, Draggable, MorphSVG, SplitText, ScrollSmoother…
- Hỗ trợ dự án từ nhỏ đến enterprise.
Vì sao GSAP miễn phí 100%?
Mùa thu 2024, Webflow mua lại GSAP và công bố miễn phí toàn bộ thư viện và plugin trước đây thuộc Club GSAP. License chuẩn cho phép dùng thương mại miễn phí (trừ vài hạn chế cạnh tranh trực tiếp).
Kết quả: bạn có thể dùng SplitText, ScrollSmoother… mà không tốn phí.
Cài đặt và bắt đầu nhanh
Cách 1 — CDN
<script src="<https://cdn.jsdelivr.net/npm/gsap@3.13/dist/gsap.min.js>"></script>Cách 2 — NPM
npm install gsapImport trong dự án module bundler:
import { gsap } from 'gsap'- Animate đơn giản (di chuyển ô vuông 100px trong 1s)
<div id="box" style="width:100px;height:100px;background:#e11"></div>
<script> [gsap.to](<http://gsap.to>)('#box', { duration: 1, x: 100 })
</script>- Fade‑in tiêu đề từ trên xuống
<h1 id="title">Chào mừng!</h1>
<script> gsap.from('#title', { duration: 1, opacity: 0, y: -50 })
</script>Tài liệu “Getting Started” có thêm nhiều ví dụ và best practices. [GSAP Resources] [GSAP Docs]
Bonus: nếu làm animation theo cuộn, kết hợp ScrollTrigger rất “đã”.
Tính năng nổi bật
- Hiệu năng cao: xử lý nhiều phần tử vẫn mượt, nhanh hơn jQuery rất nhiều.
- Plugin đa dạng: ScrollTrigger, Draggable, MorphSVG, SplitText, ScrollSmoother…
- Dễ dùng: cú pháp thẳng, timeline mạnh mẽ, debug dễ.
- Tương thích rộng: hoạt động tốt với React, Vue, Angular, Next.js, Nuxt…
- Cộng đồng lớn: forum, docs, demo cực nhiều. [GSAP Community]
So sánh với Anime.js, Framer Motion, Three.js
Thư viện | Ưu điểm | Nhược điểm |
|---|---|---|
GSAP | Hiệu năng cao, đa nền tảng, plugin phong phú, tài liệu dày | Học sâu timeline, plugin có nhiều lựa chọn dễ “choáng” |
Anime.js | Nhẹ, dễ học, phù hợp animation cơ bản | Thiếu tính năng nâng cao cho cảnh phức tạp |
Framer Motion | Tích hợp React mượt, API gọn | Chủ yếu cho React, ít linh hoạt ngoài React |
Three.js | Siêu mạnh cho 3D/WebGL | Khó, không tối ưu cho 2D/UX thường ngày |
Kinh nghiệm nhanh: cần animation phức tạp, cuộn mượt, control sâu → GSAP. App React thuần, animation cơ bản → Framer Motion. 3D/WebGL → Three.js.
Tài nguyên học nhanh
- Trang chủ và tài liệu GSAP: hướng dẫn, API, demo, forum. [GSAP Official] [GSAP Docs] [GSAP Community]
- Awwwards: cảm hứng animation thực chiến. [Awwwards]
- YouTube: vô số tutorial chất lượng. [GSAP Showreels]
FAQ
- GSAP giờ có thật sự miễn phí không?
- Có. Toàn bộ core + plugin trước đây trả phí đã free nhờ Webflow. Xem Webflow Blog và license GSAP để nắm giới hạn nhỏ.
- Dùng cho thương mại ok chứ?
- Ok theo Standard License. Tránh dùng để xây công cụ cạnh tranh trực tiếp với Webflow.
- Dùng với React/Vue/Angular thế nào?
- Import gsap như thường, tương tác qua ref hoặc lifecycle hook. Nên dọn sạch animation khi unmount.
- GSAP nặng không?
- Core khá gọn. Chỉ import plugin cần thiết để tối ưu bundle.
Kết luận
GSAP là “best‑in‑class” cho animation web: mạnh, mượt, linh hoạt, nay lại miễn phí 100%. Nếu bạn muốn nâng tầm trải nghiệm thị giác mà vẫn kiểm soát hiệu năng, GSAP là lựa chọn đáng thử ngay hôm nay.
