GSAP 3.13: Miễn phí Toàn bộ công cụ và plugin – SplitText được viết lại hoàn toàn

GSAP giờ đây hoàn toàn MIỄN PHÍ!

Nhờ sự hợp tác với Webflow, toàn bộ bộ công cụ GSAP, bao gồm các plugin cao cấp như SplitText, MorphSVG và nhiều plugin khác trước đây chỉ dành cho thành viên Club GSAP, giờ đây hoàn toàn miễn phí – kể cả cho mục đích thương mại.

Bạn có thể tải toàn bộ công cụ GSAP từ:

• GitHub chính thức
• NPM
• Trang chủ GSAP

Điều này có ý nghĩa gì với đội ngũ GSAP?

GSAP sẽ tiếp tục được duy trì và phát triển bởi đội ngũ gốc gồm Jack, Cassie và Rodrigo. Chúng tôi đang hợp tác với nhóm Webflow để phát triển thế hệ tiếp theo của Webflow Interactions.

Điều gì xảy ra với thành viên Club GSAP?

Dù Club GSAP sẽ ngừng hoạt động, nhưng có tin vui cho các thành viên:

• Không còn cần truy cập kho lưu trữ riêng tư hoặc sử dụng token. Hãy chuyển sang kho công khai trước ngày 1/6/2025.
• Không cần gia hạn Club GSAP hoặc xin phê duyệt chi phí.
• Huy hiệu cộng đồng của bạn sẽ được cập nhật để ghi nhận sự đóng góp.

SplitText được viết lại hoàn toàn – Nhỏ hơn 50%, thêm 14 tính năng mới!

SplitText, plugin phổ biến của GSAP giúp chia nhỏ văn bản HTML thành ký tự, từ hoặc dòng để tạo hiệu ứng hoạt hình mượt mà, đã được viết lại từ đầu với nhiều cải tiến:​

Các cải tiến nổi bật trong phiên bản 3.13:

• Hỗ trợ trợ năng: Thêm aria-label cho phần tử gốc và aria-hidden cho các phần tử con.
• Tự động chia lại khi thay đổi kích thước: Tránh lỗi ngắt dòng khi thay đổi kích thước hoặc tải font với autoSplit và onSplit().
• Xử lý phần tử lồng nhau: Sử dụng deepSlice để chia qua các phần tử như <span>, <strong>, <a>.
• Hiệu ứng mặt nạ: Dễ dàng tạo hiệu ứng che/hiện với phần tử bao bọc.
• Gán biến CSS linh hoạt: Sử dụng propIndex để áp dụng biến CSS như --word: 3.
• Bỏ qua các phần tử cụ thể: Ví dụ: không chia nhỏ <sup>.
• Hỗ trợ emoji và ký tự đặc biệt: Chính xác hơn bao giờ hết.
• Xử lý trường hợp phức tạp: Sử dụng RegExp hoặc prepareText().
• Callback mới: Thêm onSplit() và onRevert().
• Tùy chọn phân tách từ mới: Sử dụng RegExp, định nghĩa văn bản thay thế và cải thiện tính nhất quán.
• smartWrap: Bảo vệ chống lại lỗi ngắt dòng không mong muốn.​

✨ Mới: Animate đến giá trị của biến CSS

GSAP 3.13 cho phép bạn animate một thuộc tính CSS đến giá trị của một biến CSS được đặt tên, ví dụ:

jsCopyEditgsap.to(".target", { color: "var(--my-color)" });

Trước đây, GSAP đã có thể animate chính biến CSS như sau:

// CŨ – animate giá trị của biến CSS
gsap.to(".target", {"--my-color": "#ff0033"});

Nhưng giờ đây bạn có thể:

// MỚI – animate thuộc tính CSS đến giá trị của một biến CSS
gsap.to(".target", { color: "var(--my-color)" });

Điều này cực kỳ hữu ích nếu bạn đang sử dụng CSS variables để quản lý chủ đề (theme), màu sắc động hoặc responsive design. Nó mở ra nhiều khả năng tùy biến động mượt mà hơn bằng cách kết hợp sức mạnh của CSS và GSAP.

Mình cũng có thiết kế và xây dựng 1 Landing page Wedding với GSAP, bạn có thể xem tại Portfolio của mình:

• Portfolio: https://thaiduykhang.id.vn/portfolio/
• Landing page Wedding: https://wedding.evps.dev/