Hiện nay, thẩm mĩ, nhu cầu người dùng tăng cao nên sự cạnh tranh về trải nghiệm của người dùng càng khốc liệt. Một website không chỉ cần nội dung chất lượng mà còn phải truyền đạt câu chuyện của website sống động dưới dạng hình ảnh, như vậy bạn mới có thể tạo được ấn tượng, giữ chân người dùng lâu hơn tại website.

Mình sẽ giới thiệu đến các bạn một trợ thủ đắc lực mà các frontend developer nên biết đến, GSAP (GreenSock Animation Platform). Với sức mạnh vượt trội, GSAP cho phép bạn tạo ra mọi thứ, từ những hiệu ứng cơ bản như: di chuyển hay thay đổi kích thước, đến các animations phức tạp dựa trên tương tác cuộn trang hoặc chuyển động theo đường dẫn.

Trong bài viết này, hãy cùng mình đi khám phá các khía cạnh của GSAP từ GSAP là gì, tại sao nên GSAP được sử dụng rộng rãi trong cộng đồng developer, hướng dẫn cài đặt và áp dụng vào dự án React.

1. GSAP là gì?

GSAP (GreenSock Animation Platform) là một thư viện JavaScript chuyên dùng để tạo các animations cho website được phát triển bởi nhóm GreenSock.

GSAP đã nhanh chóng trở thành một trong những lựa chọn hàng đầu cho việc tạo ra các animations. Thư viện này nổi bật với khả năng xử lý tốc độ cao, linh hoạt, giúp cho việc thực hiện các hiệu ứng trở nên đơn giản và hiệu quả hơn bao giờ hết.

Bạn có thể sử dụng GSAP để thực hiện các hiệu ứng cơ bản như: di chuyển, thay đổi kích thước, làm mờ, đến các animations phức tạp kết hợp nhiều yếu tố khác nhau. Dù bạn làm việc với DOM, SVG, canvas hay bất kỳ thứ gì có thể thao tác trên website, GSAP đều có thể giúp bạn biến ý tưởng thành hiện thực.

2. Tại sao nên sử dụng GSAP?

• GSAP được tối ưu để chạy mượt trên mọi trình duyệt ngay. cả phiên bản cũ như Internet Explorer 11. Dù bạn đang tạo animations cho một vài phần tử hay hàng trăm đối tượng cùng lúc, GSAP vẫn đảm bảo hiệu suất tốt nhất cho website.
• Không giống như CSS Animation, GSAP không giới hạn ở một số thuộc tính cụ thể. Bạn có thể điều khiển bất kỳ thuộc tính nào, từ vị trí, kích thước, màu sắc, đến các thuộc tính tuỳ chỉnh của đối tượng.
• GSAP cung cấp Timeline để bạn dễ dàng quản lý và đồng bộ hóa nhiều hoạt hình, cùng với khả năng tạm dừng, tiếp tục, tua lại hoặc đảo ngược hoạt động
• GSAP đi kèm với nhiều plugin bổ sung như:
  • ScrollTrigger: tạo hiệu ứng dựa trên việc cuộn trang.
  • MotionPath: di chuyển đối tượng theo đường dẫn.
  • SplitText: tách văn bản thành từng ký tự, từ hoặc dòng để tạo hiệu ứng độc đáo.
• GSAP thiết kế API rất dễ sử dụng ngay cả khi bạn là người mới tiếp xúc đều có thể tạo ra các animations phức tạp mà không tốn quá nhiều thời gian.

3. Các thành phần chính trong GSAP

Đây là các thành phần chính trong GSAP, mình sẽ giải thích kèm với code minh họa để bạn có thể dễ dàng áp dụng vào dự án của mình.

3.1 gsap.to()

Hàm gsap.to() được sử dụng để thay đổi trạng thái của một phần tử từ trạng thái hiện tại đến trạng thái mong muốn.

gsap.to(target, { duration, properties });

• target: phần tử hoặc nhóm phần tử cần animations (CSS selector, DOM element,...).
• duration: thời gian thực hiện hiệu ứng (tính bằng giây).
• properties: Các thuộc tính cần thay đổi (ví dụ: x, y, opacity).

Ví dụ bạn muốn di chuyển một khối hình vuông sang phải trong 2 giây.

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

// -----------------------------------------------

const MovingBox = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { x: 300, duration: 2 });
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "red",
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
      }}
    />
  );
};

export default MovingBox;

3.2 gsap.from()

Hàm gsap.from() hoạt động ngược lại với gsap.to(), cho phép bạn xác định trạng thái ban đầu của một phần tử và chuyển từ trạng thái đó đến trạng thái hiện tại của nó.

gsap.from(target, { duration, properties });

Ví dụ tạo hiệu ứng hộp xuất hiện từ trạng thái từ mờ đến rõ

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

// ----------------------------------------------

const FadeInBox = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.from(boxRef.current, { opacity: 0, y: -100, duration: 1 });
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "blue",
        margin: "50px auto",
      }}
    />
  );
};

export default FadeInBox;

• gsap.from(): bắt đầu hiệu ứng từ trạng thái opacity: 0 và y: -100.

3.3 gsap.fromTo()

Hàm gsap.fromTo() kết hợp cả from và to, cho phép bạn chỉ định cả trạng thái bắt đầu và kết thúc của phần tử.

gsap.fromTo(target, { fromProperties }, { toProperties });

• fromProperties: trạng thái ban đầu.
• toProperties: trạng thái kết thúc.

Ví dụ sẽ tạo một hộp vuông xuất hiện từ trạng thái mờ và nhỏ (scale 0.5) đến trạng thái rõ ràng có đúng kích thước của phần tử.

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

// -----------------------------------------------

const FromToAnimation = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(
      boxRef.current,
      { opacity: 0, scale: 0.5 },
      { opacity: 1, scale: 1, duration: 2, ease: "power2.out"}
    );
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "green",
        margin: "50px auto",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "#fff",
        fontSize: "20px",
      }}
    />
  );
};

export default FromToAnimation;

3.4 Kết hợp nhiều animation với Timeline

Timeline giúp bạn dễ dàng tạo và đồng bộ nhiều hiệu ứng

const tl = gsap.timeline();
tl.to(target1, { properties })
  .to(target2, { properties });

• gsap.timeline(): tạo chuỗi animation tuần tự.
• tl.to(): thêm một hiệu ứng vào timeline.

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

// ----------------------------------------------

const TimelineExample = () => {
  const box1Ref = useRef(null);
  const box2Ref = useRef(null);
  const box3Ref = useRef(null);

  useEffect(() => {
    const tl = gsap.timeline();
    tl.to(box1Ref.current, { x: 200, duration: 1 })
      .to(box2Ref.current, { y: 200, duration: 1 }, "-=0.5")
      .to(box3Ref.current, { rotation: 360, scale: 1.5, duration: 1 });
  }, []);

  return (
    <div>
      <div
        ref={box1Ref}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "red",
          margin: "10px",
        }}
      />
      <div
        ref={box2Ref}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "green",
          margin: "10px",
        }}
      />
      <div
        ref={box3Ref}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "blue",
          margin: "10px",
        }}
      />
    </div>
  );
};

export default TimelineExample;

• "-=0.5": hiệu ứng bắt đầu sớm hơn 0.5 giây so với hiệu ứng trước.

3.5 ScrollTrigger Plugin

ScrollTrigger là plugin của GSAP cho phép bạn tạo hiệu ứng dựa trên hiệu ứng cuộn trang.

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// --------------------------------------------------

gsap.registerPlugin(ScrollTrigger);

const ScrollTriggerExample = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, {
      x: 500,
      scrollTrigger: {
        trigger: boxRef.current,
        start: "top center",
        end: "top 100px",
        scrub: true,
      },
    });
  }, []);

  return (
    <div
      style={{
        height: "200vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div
        ref={boxRef}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "purple",
        }}
      />
    </div>
  );
};

export default ScrollTriggerExample;

• scrollTrigger: theo dõi cuộn trang và kích hoạt animations
• trigger: phần tử kích hoạt animations
• start và end: xác định thời điểm bắt đầu và kết thúc của hiệu ứng.
• scrub: đồng bộ animation với việc cuộn trang

4. Hướng dẫn cài đặt GSAP, áp dụng vào ví dụ thực tế

Nếu bạn chưa biết cách khởi tạo một ứng dụng React, bạn có thể làm theo hướng dẫn mình đã đề cập tại bài viết này.

B1: cài đặt GSAP với câu lệnh: npm install gsap. Nếu bạn cần sử dụng các plugin như ScrollTrigger, thì bạn cài đặt thêm bằng câu lệnh npm install gsap/ScrollTrigger

B2: áp dụng GSAP vào React

Mình sẽ làm một ví dụ, một hộp vuông sẽ xuất hiện từ trạng thái mờ dần và nhỏ dần đến kích thước full khi load trang.

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

// ----------------------------------------------

const App = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(
      boxRef.current,
      { opacity: 0, scale: 0.5 },
      { opacity: 1, scale: 1, duration: 2, ease: "power2.out" }
    );
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "blue",
        margin: "50px auto",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        color: "#fff",
        fontSize: "20px",
      }}
    />
  );
};

export default App;

• useRef: tham chiếu đến DOM element (boxRef).
• gsap.fromTo(): hiệu ứng hộp xuất hiện từ trạng thái mờ (opacity: 0) và nhỏ (scale: 0.5) đến rõ và kích thước full (opacity: 1, scale: 1).
• ease: "power2.out": hoạt hình có hiệu ứng giảm tốc ở cuối.

Tiếp đến mình sẽ kết hợp với ScrollTrigger, khối hình vuông sẽ di chuyển từ trái sang phải và dần hiển thị rõ khi bạn cuộn đến vị trí của nó.

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// -------------------------------------------------

gsap.registerPlugin(ScrollTrigger);

const App = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(
      boxRef.current,
      { x: -200, opacity: 0 },
      {
        x: 0,
        opacity: 1,
        duration: 1.5,
        scrollTrigger: {
          trigger: boxRef.current,
          start: "top 80%",
          end: "top 40%",
          scrub: true,
        },
      }
    );
  }, []);

  return (
    <div
      style={{
        height: "200vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        ref={boxRef}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "green",
          margin: "50px auto",
        }}
      />
    </div>
  );
};

export default App;

• ScrollTrigger:
  • trigger: xác định phần tử kích hoạt animation.
  • start và end: xác định thời điểm bắt đầu và kết thúc animation dựa trên vị trí của phần tử trong viewport.
  • scrub: đồng bộ animation với cuộn trang.
• Animation:
  • Bắt đầu ở vị trí lệch về phía trái (x: -200) và mờ (opacity: 0).
  • Kết thúc ở vị trí chính giữa (x: 0) và rõ (opacity: 1).

5. Kết luận

GSAP là một thư viện mạnh mẽ và linh hoạt rất thích hợp dành cho các frontend developer để tạo ra các hiệu ứng hoạt hình mượt mà, sống động giúp website của bạn nổi bật, gây ấn tượng với người dùng.

Qua bài viết này, hy vọng bạn đã hiểu rõ vì sao GSAP là lựa chọn hàng đầu, phổ biến trong cộng đồng developer. Bên cạnh đó, mình cũng đã hướng dẫn chi tiết về cách sử dụng GSAP trong dự án React.

Các bài viết liên quan:

• Zod là gì? Hướng dẫn Validation với Zod
• Tìm hiểu Microfrontend: Hướng dẫn triển khai Microfrontend trong Next.js
• Yup là gì? Hướng dẫn Validation với Yup trong dự án React
• Giới thiệu Ant Design: Hệ thống thiết kế UI dành cho Website