GSAP – Thư viện tạo hoạt ảnh mượt mà cho website hiện đại

2 tuần 0 4 4 phút đọc

GSAP (GreenSock Animation Platform) là một thư viện JavaScript mạnh mẽ giúp bạn tạo các hiệu ứng động siêu mượt, chuyên nghiệp và tương thích cao trên mọi trình duyệt. Đây là công cụ được rất nhiều developer tin dùng để tạo ra những giao diện ấn tượng cho web, ứng dụng, trình chiếu, và nhiều hơn thế nữa.

GSAP – Thư viện tạo hoạt ảnh mượt mà cho website hiện đại

Mục lục

Miễn phí 100% cho hầu hết dự án
Ưu điểm nổi bật của GSAP
Cài đặt GSAP
Ví dụ hoạt ảnh đơn giản
Các API phổ biến trong GSAP
Timeline nâng cao
Plugin mở rộng đáng chú ý
Kết luận

Miễn phí 100% cho hầu hết dự án

GSAP là miễn phí hoàn toàn cho cả dự án cá nhân và thương mại, miễn là bạn không phân phối lại thư viện như một phần của công cụ bán lại. Với nhu cầu thông thường – như xây dựng website, webapp, hay sản phẩm thương mại sử dụng nội bộ – bạn hoàn toàn có thể dùng GSAP mà không cần trả phí.

Ngoài ra, GSAP có thêm một số plugin mở rộng nâng cao (như MorphSVG, ScrollSmoother…) thuộc diện Club GreenSock. Tuy nhiên, core GSAP và đa số plugin phổ biến (như ScrollTrigger) đều miễn phí.

Ưu điểm nổi bật của GSAP

Tốc độ cực nhanh, hoạt ảnh mượt mà đến từng pixel
Điều khiển chính xác từng giai đoạn chuyển động
Hỗ trợ HTML, CSS, SVG, canvas, WebGL…
Dễ tổ chức animation theo chuỗi (timeline)
Dễ mở rộng với các plugin miễn phí như ScrollTrigger

Cài đặt GSAP

Bạn có thể bắt đầu ngay với đoạn mã CDN:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Hoặc nếu bạn dùng Node.js:

npm install gsap

Ví dụ hoạt ảnh đơn giản

<div class="box"></div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background: #007bff;
    margin: 50px;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/gsap@3"></script>
<script>
  gsap.to(".box", {
    x: 300,
    rotation: 360,
    duration: 2,
    ease: "power2.inOut"
  });
</script>

Các API phổ biến trong GSAP

API	Công dụng
`gsap.to()`	Tạo hoạt ảnh từ trạng thái hiện tại đến trạng thái mong muốn
`gsap.from()`	Bắt đầu từ trạng thái cụ thể đến trạng thái hiện tại
`gsap.timeline()`	Chuỗi các animation theo trình tự
`ScrollTrigger`	Kích hoạt animation khi cuộn trang (plugin miễn phí)

Timeline nâng cao

Timeline giúp bạn dễ dàng điều phối nhiều hoạt ảnh liên tiếp mà không cần tính toán delay:

const tl = gsap.timeline();
tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { y: 100, duration: 1 })
  .to(".box", { opacity: 0, duration: 0.5 });

Plugin mở rộng đáng chú ý

ScrollTrigger: Hoạt ảnh khi cuộn trang (miễn phí)
TextPlugin: Hoạt ảnh ký tự như máy đánh chữ (miễn phí)
MotionPathPlugin: Di chuyển theo đường cong (miễn phí)
ScrollSmoother: Cuộn mượt hơn, thuộc bản Club

Kết luận

GSAP là một thư viện đáng học và sử dụng cho bất kỳ ai làm web hiện đại. Với hiệu suất vượt trội, miễn phí rộng rãi, dễ học và dễ triển khai, đây là công cụ gần như không thể thiếu cho các giao diện giàu tương tác.