Hiệu ứng Text Reveal Animation không dùng thư viện

Nhìn thì đơn giản, nhưng làm sai là lộ ngay: chữ nhảy layout, animation bị lệch nhịp hoặc phải kéo theo cả đống thư viện chỉ để che chữ. Nguyên nhân không nằm ở JavaScript, mà ở cách tổ chức HTML và cách animate đúng phần cần animate.

Bài này tập trung vào một bản Text Reveal gọn nhẹ, mượt, đủ dùng cho sản phẩm thật.

Không canvas, không thư viện, không mẹo rối rắm.

Cách tiếp cận đúng cho Text Reveal Animation

Text Reveal không phải là animation của chữ, mà là animation của lớp che chữ (mask). Chữ phải được render sẵn ngay từ đầu, không thay đổi nội dung, không resize và không gây reflow trong quá trình animation.

Toàn bộ chuyển động nên nằm ở pseudo-element hoặc wrapper, để trình duyệt xử lý bằng GPU thay vì JS.

HTML gọn nhẹ

<h1 class="reveal-text">
  <span>Text Reveal Animation mượt mà</span>
</h1>

Một wrapper để che chữ và một span chứa nội dung. Không cần thêm div thừa.

CSS: Lớp mask lộ chữ

.reveal-text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.reveal-text span {
  display: inline-block;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

.reveal-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #111;
  transform: translateX(0);
  animation: reveal-mask 1.2s cubic-bezier(.77,0,.18,1) forwards;
}

@keyframes reveal-mask {
  to {
    transform: translateX(100%);
  }
}

Lớp ::after đóng vai trò mask. Khi mask trượt đi, chữ phía dưới lộ ra. Chữ không animate nên không bị giật.

Thêm chuyển động chữ nhẹ (tùy chọn)

.reveal-text span {
  opacity: 0;
  transform: translateY(20%);
  animation: reveal-text 0.8s ease-out forwards;
  animation-delay: 0.4s;
}

@keyframes reveal-text {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Mask chạy trước, chữ bắt nhịp sau, tạo cảm giác reveal tự nhiên hơn.

JavaScript: Chỉ chạy khi vào viewport

const revealEls = document.querySelectorAll('.reveal-text');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.6
});

revealEls.forEach(el => observer.observe(el));

JavaScript chỉ dùng để kích hoạt animation khi phần tử xuất hiện trên màn hình, tránh chạy vô nghĩa khi người dùng chưa nhìn thấy.

Cập nhật CSS để điều khiển animation

.reveal-text::after,
.reveal-text span {
  animation-play-state: paused;
}

.reveal-text.is-visible::after,
.reveal-text.is-visible span {
  animation-play-state: running;
}

Animation chỉ chạy đúng thời điểm cần thiết.

Vì sao hiệu ứng này không bị giật

• Không thay đổi DOM trong lúc animation chạy
• Không dùng timer hay vòng lặp JavaScript
• Chỉ animate transform và opacity
• Chữ được render sẵn ngay từ đầu

Trình duyệt xử lý hiệu ứng này rất nhẹ và ổn định.

Điều chỉnh cho từng trường hợp sử dụng

• Hero section: tăng duration để tạo cảm giác sang
• Landing page: kết hợp reveal + fade
• Mobile yếu: giảm kích thước chữ và thời gian animation

Không có cấu hình chung cho mọi giao diện.

Lưu ý khi dùng trong dự án thật

• Không dùng cho đoạn text dài
• Không lạm dụng nhiều hiệu ứng cùng lúc
• Nên dùng màu mask trùng với nền

Kết luận

Text Reveal Animation đẹp không đến từ code phức tạp, mà đến từ việc animate đúng thứ cần animate. Khi chữ đứng yên và mask chuyển động, hiệu ứng sẽ mượt, tự nhiên và không lộ kỹ thuật.

Viết ít, che đúng, reveal vừa đủ — thế là đủ dùng lâu dài.