SVG from Zero to Senior · Part 18 — Animation Libraries for SVG

Ở Phần 6 con animate SVG bằng tay với CSS, SMIL, và requestAnimationFrame. Cái đó bao phủ đa số nhu cầu. Nhưng khoảnh khắc con cần điều phối — năm thứ animate theo trình tự chính xác, có stagger, mà con tua và đảo được — tự code thành một công việc thứ hai. Đó là khoảng trống các thư viện animation lấp.

Phát và tua timeline có stagger, rồi đổi stagger — đây là tính năng con thực sự trả tiền cho thư viện.

Mở demo đầy đủ:

Demo là vanilla JS (blog không ship thư viện animation) nhưng nó cài một timeline thật với stagger, easing, và thanh tua — đúng các tính năng dưới đây.

Cái con thực sự trả tiền: timeline

Một animation đơn lẻ thì dễ. Một timeline — nhiều tween đặt theo thời gian, mà con tạm dừng, tua, đảo, tăng tốc, và lồng nhau được — khó dựng cho tốt. API tiêu biểu của GSAP:

const tl = gsap.timeline();
tl.from('.bar', {
  scaleY: 0,
  transformOrigin: 'bottom',
  opacity: 0,
  duration: 0.5,
  ease: 'back.out(1.7)',
  stagger: 0.09,        // each element starts 90ms after the previous
});

tl.pause();             // full transport control...
tl.seek(0.5);
tl.reverse();
tl.timeScale(2);

stagger, seek, và reverse là những dòng mà tự cài lại đúng mỗi cái tốn code thật — và đó là trước cả đường easing, xử lý đơn vị, và quirk trình duyệt.

Các ứng viên

GSAP

Chuẩn ngành cho animation web phức tạp. Timeline tốt nhất, cùng plugin riêng cho SVG: MorphSVGPlugin (morph chắc chắn từ Phần 11, tự khớp điểm), MotionPathPlugin, DrawSVGPlugin. Dùng cho chuyển động tầm production, có trình tự, tương tác.

anime.js

Nhẹ, có timeline, stagger, và helper vẽ đường/morph SVG sẵn. Điểm trung gian tốt khi con muốn trải nghiệm kiểu GSAP với bundle nhỏ hơn.

Motion (trước là Framer Motion)

Khai báo, dựa trên vật lý lò xo, và component-first — đặc biệt trong React. Animate SVG qua motion.path, motion.circle,… với props animate/transition và hỗ trợ gesture. Dùng khi chuyển động là một phần mô hình component.

Bảng quyết định

Tool	Best at	Reach for it when
CSS / WAAPI	transition, hover, loader	chuyển động một lần, footprint nhỏ nhất
SMIL	animation icon chuyển giao được	chuyển động phải nằm trong file .svg
GSAP	timeline, tua, MorphSVG, MotionPath	chuyển động production có trình tự, tương tác
anime.js	timeline & stagger nhẹ	kiểu GSAP với bundle nhỏ hơn
Motion	vật lý lò xo, chuyển động component/React	animation component khai báo, gesture

Khi nào KHÔNG thêm thư viện

Senior cân nhắc kỹ phụ thuộc. Đừng ship 30–70 KB thư viện animation cho: một spinner (CSS), nhấc khi hover (transition CSS), một lần vẽ đường (stroke-dashoffset Phần 6 + CSS), hay một icon động độc lập (SMIL). Thêm thư viện khi điều phối — trình tự, stagger, tua, morph phức tạp — sẽ tốn nhiều code (và nhiều lỗi) hơn cả phụ thuộc.

Lời cảnh báo của sư phụ

• Đừng dùng thư viện để quay một loader. Đó là animation CSS một dòng.
• Animate transform/opacity ngay cả với thư viện — chúng composite trên GPU; thư viện không đổi vật lý.
• Tôn trọng prefers-reduced-motion — mọi thư viện cho con chặn hoặc rút ngắn animation; hãy làm.

Luyện tập, không thì coi như chưa học

1. Tự code một stagger: lộ một hàng cột với delay CSS theo --index — cảm nhận vì sao timeline tồn tại.
2. Việc đó trong thư viện: dựng lại bằng stagger của anime.js hoặc GSAP và so code.
3. Timeline tua được: nối một range input với seek() của timeline đang dừng (hoặc applyAt(t) của con).

Phần tiếp theo

Giờ con biết khi nào chuyển động đáng có một phụ thuộc. Tiếp theo ta chui xuống gầm máy. Ở Phần 19 ta nghiên cứu hiệu năng và nội tại render SVG — trình duyệt vẽ SVG thế nào, vì sao hàng nghìn node chậm, chi phí của filter và path lớn, và các tín hiệu chính xác báo con chuyển sang <canvas> hoặc WebGL.