Ứng dụng

Phân tích theo các bước

Cách sử dụng css thông thường

Bước 1: Cập nhật HTML/JSX

<main className="items-center pt-16 pb-4">
  <div className="spacer"></div> 
  <div className="container">
    <div className="box box-red">Đỏ</div>
    <div className="box box-blue">Xanh</div>
    <div className="box box-green">Lá</div>
    <div className="box box-purple">Tím</div>
  </div>
</main>

Bước 2.1: Thêm và gỡ class show sử dụng useEffect để xử lý IntersectionObserver

 useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          const el = entry.target;
          if (entry.isIntersecting) {
            el.classList.add('show');
          } else {
            el.classList.remove('show');
          }
        });
      },
      {
        threshold: Array.from({ length: 11 }, (_, i) => i / 10), // 0, 0.1, 0.2,...1
      }
    );
    boxes.forEach(box => observer.observe(box));
    return () => boxes.forEach(box => observer.unobserve(box));
  }, []);

Bước 2.2 Thêm setTimeout khi rời khỏi Giúp tránh việc lập tức xóa show, tạo cảm giác trơn tru:

useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const timeoutMap = new Map();
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          const el = entry.target;
          if (entry.isIntersecting) {
            clearTimeout(timeoutMap.get(el)); // Hủy bỏ nếu có timeout đang chờ xóa
            el.classList.add('show');
          } else {
            // Trì hoãn việc xóa class
            const timeoutId = setTimeout(() => {
              el.classList.remove('show');
            }, 300); // ví dụ 300ms sau mới xóa

            timeoutMap.set(el, timeoutId);
          }
        });
      },
      {
        threshold: Array.from({ length: 11 }, (_, i) => i / 10),
      }
    );
    boxes.forEach(box => observer.observe(box));
    return () => {
      boxes.forEach(box => observer.unobserve(box));
      timeoutMap.forEach(timeoutId => clearTimeout(timeoutId));
    };
  }, []);

Bước 3: Thêm CSS

.spacer {
  height: 100vh;
}
.box {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.box.show {
  opacity: 1;
  transform: translateY(0);
}

app\welcome\welcome.tsx

import { useEffect } from 'react';
export function Welcome() {
  useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const timeoutMap = new Map();
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          const el = entry.target;
          if (entry.isIntersecting) {
            clearTimeout(timeoutMap.get(el)); // Hủy bỏ nếu có timeout đang chờ xóa
            el.classList.add('show');
          } else {
            // Trì hoãn việc xóa class
            const timeoutId = setTimeout(() => {
              el.classList.remove('show');
            }, 300); // ví dụ 300ms sau mới xóa
            timeoutMap.set(el, timeoutId);
          }
        });
      },
      {
        threshold: Array.from({ length: 11 }, (_, i) => i / 10),
      }
    );
    boxes.forEach(box => observer.observe(box));
    return () => {
      boxes.forEach(box => observer.unobserve(box));
      timeoutMap.forEach(timeoutId => clearTimeout(timeoutId));
    };
  }, []);
  return (
    <main className="items-center pt-16 pb-4">
      <div className="spacer"></div>
      <div className="container-flex">
        <div className="box box-red">Đỏ</div>
        <div className="box box-blue">Xanh</div>
        <div className="box box-green">Lá</div>
        <div className="box box-purple">Tím</div>
      </div>
    </main>
  );
}

app\app.css

@import "tailwindcss";
.spacer {
  height: 100vh;
}
.box {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.box-red {
  background-color: #e74c3c;
}
.box-blue {
  background-color: #3498db;
}
.box-green {
  background-color: #2ecc71;
}
.box-purple {
  background-color: #9b59b6;
}
.box.show {
  opacity: 1;
  transform: translateY(0);
}

Cách sử dụng tailwind

1. Tailwind CSS: Định nghĩa lớp fade-in

// tailwind.config.js
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        'fade-in-up': {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        'fade-in-up': 'fade-in-up 0.6s ease-out forwards',
      },
    },
  },
  plugins: [],
}

2. CSS thêm class ẩn ban đầu

/* src/index.css hoặc trong component nếu scoped */
.box {
  @apply opacity-0 translate-y-5 transition-all duration-700 ease-out;
}

.box.show {
  @apply opacity-100 translate-y-0;
}

Hoặc nếu dùng animation Tailwind custom ở trên:

.box {
  @apply opacity-0;
}
.box.show {
  @apply animate-fade-in-up;
}

Với tailwind css mới bạn khai báo app\app.css

@import "tailwindcss";
.spacer {
  height: 100vh;
}
@theme {
  --animate-fade-in-up: fade-in-up 1s ease-in-out;
  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0)
    }
  }
}
.box-red {
  background-color: #e74c3c;
}
.box-blue {
  background-color: #3498db;
}
.box-green {
  background-color: #2ecc71;
}
.box-purple {
  background-color: #9b59b6;
}
.box {
  @apply opacity-0;
}
.box.show {
  @apply animate-fade-in-up;
}

3. JSX Component với IntersectionObserver (React)

import { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          const el = entry.target;
          if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
            el.classList.add('show');
          } else if (entry.intersectionRatio < 0.1) {
            el.classList.remove('show');
          }
        });
      },
      {
        threshold: Array.from({ length: 11 }, (_, i) => i / 10), // 0 → 1
      }
    );
    boxes.forEach(box => observer.observe(box));
    return () => boxes.forEach(box => observer.unobserve(box));
  }, []);
  return (
    <main className="items-center pt-16 pb-4">
      <div className="spacer h-screen" />
      <div className="container space-y-8">
        <div className="box bg-red-500 text-white p-6 rounded-xl shadow-md">Đỏ</div>
        <div className="box bg-blue-500 text-white p-6 rounded-xl shadow-md">Xanh</div>
        <div className="box bg-green-500 text-white p-6 rounded-xl shadow-md">Lá</div>
        <div className="box bg-purple-500 text-white p-6 rounded-xl shadow-md">Tím</div>
      </div>
    </main>
  );
};

export default MyComponent;

😍 4. Mở rộng thêm để hỗ trợ animate delay theo thứ tự (kiểu stagger effect) khi scroll đến không

Tuyệt! Hãy mở rộng code của bạn để có hiệu ứng staggered animation – tức là các phần tử xuất hiện dần dần theo thứ tự, giống như slide trong hero hoặc gallery đẹp mắt.

Ý tưởng:

Khi các .box trở nên visible, ta sẽ:

1. Thêm class show để kích hoạt animation.

2. Gán delay tăng dần bằng style.animationDelay = ... (hoặc style.transitionDelay nếu dùng transition).

✅ Cập nhật Tailwind config (nếu dùng animate-fade-in-up)

Đã có sẵn:

extend: {
  keyframes: {
    'fade-in-up': {
      '0%': { opacity: '0', transform: 'translateY(20px)' },
      '100%': { opacity: '1', transform: 'translateY(0)' },
    },
  },
  animation: {
    'fade-in-up': 'fade-in-up 0.6s ease-out forwards',
  },
},

✅ CSS (Tailwind class)

.box {
  @apply opacity-0;
}
.box.show {
  @apply animate-fade-in-up;
}

---

✅ JavaScript (với stagger effect)

import { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    const boxes = document.querySelectorAll('.box');
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          const el = entry.target as HTMLElement;
          const allVisibleBoxes = Array.from(boxes).filter((b) => {
            const rect = b.getBoundingClientRect();
            return rect.top < window.innerHeight && rect.bottom > 0;
          });
          if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
            // Tính thứ tự để delay
            const index = allVisibleBoxes.indexOf(el);
            // Gán delay động
            el.style.animationDelay = `${index * 150}ms`;
            el.classList.add('show');
          } else if (entry.intersectionRatio < 0.1) {
            el.classList.remove('show');
            el.style.animationDelay = '0ms';
          }
        });
      },
      {
        threshold: Array.from({ length: 11 }, (_, i) => i / 10),
      }
    );

    boxes.forEach((box) => observer.observe(box));
    return () => boxes.forEach((box) => observer.unobserve(box));
  }, []);

  return (
    <main className="items-center pt-16 pb-4">
      <div className="spacer h-screen" />
      <div className="container space-y-8">
        <div className="box bg-red-500 text-white p-6 rounded-xl shadow-md">Đỏ</div>
        <div className="box bg-blue-500 text-white p-6 rounded-xl shadow-md">Xanh</div>
        <div className="box bg-green-500 text-white p-6 rounded-xl shadow-md">Lá</div>
        <div className="box bg-purple-500 text-white p-6 rounded-xl shadow-md">Tím</div>
      </div>
    </main>
  );
};

export default MyComponent;

intersectionRatio là tỷ lệ phần tử đang hiển thị so với toàn bộ kích thước của nó (giá trị từ 0 đến 1).

✅ Hiệu ứng đạt được:

• Khi cuộn đến .box, chúng lần lượt hiện lên với delay 0ms, 150ms, 300ms…

• Khi cuộn ra ngoài, chúng fade-out đồng thời

• Mượt, tự nhiên, dễ custom!

---

🔧 Mẹo mở rộng:

• Thay 150ms bằng biến như baseDelay để dễ tùy chỉnh

• Dùng data-index để kiểm soát thứ tự nếu cần

• Dùng transition-delay nếu bạn muốn dùng @apply transition-* thay vì animation

Làm thêm phiên bản dùng GSAP dùng React để animation nâng cao hơn

Tuyệt vời! Dưới đây là phiên bản nâng cao sử dụng GSAP (GreenSock Animation Platform) trong React để tạo hiệu ứng scroll-triggered stagger animation – rất mượt, chuyên nghiệp hơn so với chỉ dùng CSS.

---

✅ 1. Cài đặt GSAP và ScrollTrigger

npm install gsap

Sau đó, trong code bạn register plugin ScrollTrigger.

---

✅ 2. React Component với GSAP + Stagger Scroll Animation

timport { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const GSAPBoxes = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const boxes = gsap.utils.toArray('.box');

    gsap.from(boxes, {
      opacity: 0,
      y: 40,
      duration: 0.8,
      ease: 'power3.out',
      stagger: 0.2,
      scrollTrigger: {
        trigger: containerRef.current,
        start: 'top 80%',
        toggleActions: 'play none none reverse', // fade out when scrolled back
      },
    });
  }, []);

  return (
    <main className="pt-16 pb-4">
      <div className="spacer h-screen" />
      <div ref={containerRef} className="container space-y-8">
        <div className="box bg-red-500 text-white p-6 rounded-xl shadow-md">Đỏ</div>
        <div className="box bg-blue-500 text-white p-6 rounded-xl shadow-md">Xanh</div>
        <div className="box bg-green-500 text-white p-6 rounded-xl shadow-md">Lá</div>
        <div className="box bg-purple-500 text-white p-6 rounded-xl shadow-md">Tím</div>
      </div>
    </main>
  );
};

export default GSAPBoxes;

---

✅ 3. Tùy chọn CSS (cho mượt ban đầu)

/* index.css */
.box {
  will-change: transform, opacity;
}

---

✅ Giải thích:

Thành phần	Vai trò
gsap.from(...)	Animate các .box từ opacity: 0 và y: 40px
stagger: 0.2	Delay mỗi box 0.2 giây → tạo hiệu ứng "xuất hiện theo hàng"
ScrollTrigger	Kích hoạt animation khi scroll đến
toggleActions: 'play none none reverse'	Khi rời khỏi viewport, các box sẽ fade out ngược

---

✅ Muốn nâng cao thêm?

• 📦 Animate từng nhóm khi scroll xuống sâu hơn

• 🔁 Lặp lại animation mỗi lần scroll (dùng toggleActions)

• 🧲 Kết hợp GSAP + Tailwind + clipPath, scale, v.v.

---

✅ Khi nào dùng GSAP thay vì CSS?

Dùng CSS	Dùng GSAP
Hiệu ứng đơn giản: fade, slide	Các hiệu ứng nâng cao: timeline, physics, scrub, delay
Nhẹ, nhanh, native với Tailwind	Cần kiểm soát sâu: khi bắt đầu, khi kết thúc, trigger phức tạp
Không cần thư viện ngoài	Sẵn sàng tải thêm GSAP để có UX nâng cao

Build thêm ví dụ multi-section scroll animation với GSAP trong React

Tuyệt! Dưới đây là một ví dụ multi-section scroll animation dùng GSAP + ScrollTrigger trong React.

Bạn sẽ thấy:

• Mỗi section animate khi cuộn tới

• Các section slide lên + fade-in

• Có thể mở rộng thêm timeline, scrub, parallax v.v.

---

✅ 1. Cài đặt

npm install gsap

---

✅ 2. Tạo Component: MultiSectionScroll.tsx

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

gsap.registerPlugin(ScrollTrigger);

const sections = [
  { id: 1, color: 'bg-red-500', label: 'Section 1' },
  { id: 2, color: 'bg-blue-500', label: 'Section 2' },
  { id: 3, color: 'bg-green-500', label: 'Section 3' },
  { id: 4, color: 'bg-purple-500', label: 'Section 4' },
];

const MultiSectionScroll = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const sectionEls = gsap.utils.toArray('.section') as HTMLElement[];

    sectionEls.forEach((el, index) => {
      gsap.fromTo(
        el,
        { opacity: 0, y: 50 },
        {
          opacity: 1,
          y: 0,
          duration: 0.8,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: el,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
            markers: false, // set true for debug
          },
        }
      );
    });
  }, []);

  return (
    <div ref={containerRef} className="space-y-32 py-20">
      {sections.map((s) => (
        <section
          key={s.id}
          className={`section ${s.color} text-white text-3xl font-bold h-[80vh] flex items-center justify-center rounded-2xl shadow-lg mx-4`}
        >
          {s.label}
        </section>
      ))}
    </div>
  );
};

export default MultiSectionScroll;

---

✅ 3. Styles (Tailwind)

/* You can also use global styles if needed */
.section {
  will-change: transform, opacity;
}

---

✅ Kết quả:

• 4 Section xuất hiện khi cuộn tới.

• Mỗi section fade-in + slide-up riêng biệt.

• Reverse animation khi cuộn ngược lại (nếu cần).

• Rất mượt và chuyên nghiệp với GSAP.

---

✅ Mở rộng gợi ý:

Ý tưởng	Cách làm
Parallax scroll effect	Dùng ScrollTrigger + scrub: true
Stagger từng phần tử trong section	Dùng gsap.timeline() + stagger
Fixed background scroll reveal	Dùng pin của ScrollTrigger
Animate ảnh, tiêu đề, text riêng	Tách selector & gán timeline riêng

---

— Nếu bạn muốn mình build một landing page kiểu "scroll storytelling" với GSAP (sticky + animation từng phần + số đếm + ảnh phóng to), mình có thể làm mẫu hoàn chỉnh.

Tuyệt! Hãy cùng xây dựng một landing page dạng scroll storytelling với các kỹ thuật nâng cao từ GSAP + React.

---

🎯 Mục tiêu:

• Hero section (fade-in)

• Scroll xuống:

  • Section 1: ảnh zoom + text hiện

  • Section 2: số đếm (counter) khi visible

  • Section 3: sticky + scroll reveal

• Sử dụng GSAP + ScrollTrigger + Timeline

---

✅ 1. Cài đặt

npm install gsap

---

✅ 2. File ScrollStory.tsx – Landing page

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

gsap.registerPlugin(ScrollTrigger);

const ScrollStory = () => {
  const heroRef = useRef(null);
  const zoomRef = useRef(null);
  const counterRef = useRef(null);
  const stickyRef = useRef(null);

  useEffect(() => {
    // Hero fade in
    gsap.from(heroRef.current, {
      opacity: 0,
      y: -30,
      duration: 1,
      ease: 'power3.out',
    });

    // Zoom image
    gsap.from(zoomRef.current, {
      scale: 0.8,
      opacity: 0,
      duration: 1,
      scrollTrigger: {
        trigger: zoomRef.current,
        start: 'top 80%',
        toggleActions: 'play none none reverse',
      },
    });

    // Counter animation
    const counterEl = counterRef.current as HTMLElement;
    let counterTriggered = false;

    ScrollTrigger.create({
      trigger: counterEl,
      start: 'top 80%',
      onEnter: () => {
        if (!counterTriggered) {
          const updateCount = () => {
            let count = 0;
            const target = 100;
            const increment = 2;

            const interval = setInterval(() => {
              count += increment;
              counterEl.innerText = count.toString();
              if (count >= target) clearInterval(interval);
            }, 20);
          };
          updateCount();
          counterTriggered = true;
        }
      },
    });

    // Sticky + scroll-reveal
    gsap.from(stickyRef.current, {
      y: 100,
      opacity: 0,
      duration: 1,
      scrollTrigger: {
        trigger: stickyRef.current,
        start: 'top 60%',
        end: 'bottom top',
        scrub: true,
        pin: true,
      },
    });
  }, []);

  return (
    <div className="font-sans text-gray-900 leading-relaxed">
      <section
        ref={heroRef}
        className="h-screen flex items-center justify-center bg-gradient-to-br from-indigo-500 to-purple-600 text-white text-5xl font-bold"
      >
        Chào mừng bạn đến Landing Page 🎉
      </section>

      <section className="h-screen flex items-center justify-center bg-white">
        <div ref={zoomRef} className="max-w-md">
          <img
            src="https://source.unsplash.com/600x400/?nature"
            alt="Zoom image"
            className="rounded-xl shadow-lg"
          />
          <p className="mt-6 text-center text-xl font-semibold">Khám phá thiên nhiên</p>
        </div>
      </section>

      <section className="h-screen flex flex-col items-center justify-center bg-gray-100">
        <div className="text-4xl font-bold mb-4">Số khách truy cập:</div>
        <div
          ref={counterRef}
          className="text-6xl font-extrabold text-indigo-600"
        >
          0
        </div>
      </section>

      <section className="h-screen bg-yellow-100 flex items-center justify-center">
        <div
          ref={stickyRef}
          className="bg-yellow-300 text-3xl font-bold p-8 rounded-xl shadow-md"
        >
          Nội dung được ghim khi scroll!
        </div>
      </section>
    </div>
  );
};

export default ScrollStory;

---

✅ 3. Kết quả:

Section	Animation
Hero	Fade-in khi page load
Zoom section	Ảnh scale + fade khi scroll đến
Counter	Số đếm từ 0 → 100 khi phần tử vào viewport
Sticky section	Ghim + di chuyển nội dung theo scroll bằng scrub + pin

---

✅ Gợi ý mở rộng:

• 👉 Add gsap.timeline() cho các animation liên tiếp trong 1 section

• 👉 Add scrub: true để tạo hiệu ứng mượt scroll-trigger

• 👉 Add motion path, clipPath, text split, parallax…

---

Bạn muốn mình tiếp tục thêm:

• 📊 chart animation

• 🎬 video + scroll sync

• 📱 responsive animation

• 🧠 animate SVG path

Tuyệt! Bây giờ ta sẽ mở rộng landing page với animation có tính responsive, tức là:

✅ Mục tiêu:

1. Animation khác nhau tùy theo kích thước màn hình (VD: mobile vs desktop)

2. Giữ trải nghiệm mượt mà trên mọi thiết bị

3. Kết hợp GSAP + ScrollTrigger + Media Queries

---

✅ 🧠 Cách xử lý responsive với GSAP:

GSAP ScrollTrigger hỗ trợ media query logic bằng:

ScrollTrigger.matchMedia({
  '(min-width: 768px)': () => { /* Desktop animation */ },
  '(max-width: 767px)': () => { /* Mobile animation */ },
});

---

🧪 Ví dụ: Responsive Scroll Animation (GSAP)

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

gsap.registerPlugin(ScrollTrigger);

const ResponsiveScroll = () => {
  const zoomRef = useRef(null);

  useEffect(() => {
    ScrollTrigger.matchMedia({
      // ✅ Desktop
      '(min-width: 768px)': () => {
        gsap.fromTo(
          zoomRef.current,
          { scale: 0.8, opacity: 0, x: 100 },
          {
            scale: 1,
            opacity: 1,
            x: 0,
            duration: 1,
            ease: 'power3.out',
            scrollTrigger: {
              trigger: zoomRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      },

      // ✅ Mobile
      '(max-width: 767px)': () => {
        gsap.fromTo(
          zoomRef.current,
          { scale: 0.9, opacity: 0, y: 50 },
          {
            scale: 1,
            opacity: 1,
            y: 0,
            duration: 1,
            ease: 'back.out(1.7)',
            scrollTrigger: {
              trigger: zoomRef.current,
              start: 'top 85%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      },
    });
  }, []);

  return (
    <section className="h-screen flex items-center justify-center bg-white">
      <div ref={zoomRef} className="max-w-md text-center">
        <img
          src="https://source.unsplash.com/600x400/?travel"
          alt="Travel"
          className="rounded-xl shadow-lg mx-auto"
        />
        <p className="mt-6 text-xl font-semibold">Khám phá hành trình mới 🌍</p>
      </div>
    </section>
  );
};

export default ResponsiveScroll;

---

🧩 Giải thích:

Kích thước	Animation
Desktop (≥768px)	scale + fade + slide-in từ phải
Mobile (<768px)	scale + fade + slide-up nhẹ với ease: back.out()
Tối ưu UX	Dễ chịu với thao tác tay trên mobile, mạnh mẽ trên desktop

---

✅ Pro Tips:

Mục tiêu	Cách làm
✅ Thay đổi duration/ease theo size	ScrollTrigger.matchMedia({})
✅ Ẩn một số animation trên mobile	Đơn giản return null hoặc không tạo timeline
✅ Stagger khác nhau	Thêm stagger: 0.3 trong desktop, và stagger: 0.1 trong mobile
✅ Pin section chỉ ở desktop	Pin với start: 'top top', end: '+=1000', pin: true trong desktop only

---

✅ Muốn nâng cao hơn?

• Kết hợp với CSS container queries (sắp phổ biến)

• Thêm matchMedia.add() để destroy() khi thay kích thước màn hình

• Kết hợp Framer Motion để có spring + tap/drag/hover interaction

---

Nếu bạn muốn mình:

• 👉 Kết hợp nhiều section vào 1 demo hoàn chỉnh (có responsive scroll story)

• 👉 Tạo video scroll sync, parallax, split text animation cho responsive

• 👉 Export thành một GitHub repo + Live preview

video scroll sync

Tuyệt! Giờ ta sẽ build một ví dụ 🎬 video scroll sync với GSAP + ScrollTrigger + React, nơi video được điều khiển bằng cuộn chuột (scrub) – hiệu ứng thường thấy trong các landing page cao cấp (Apple, Tesla...).

Tuyệt! Giờ ta sẽ build một ví dụ 🎬 video scroll sync với GSAP + ScrollTrigger + React, nơi video được điều khiển bằng cuộn chuột (scrub) – hiệu ứng thường thấy trong các landing page cao cấp (Apple, Tesla...).

---

🎯 Mục tiêu:

• Video không tự play

• Người dùng scroll để điều khiển thời gian (time) của video

• Có sticky section giữ video khi cuộn

---

✅ 1. Cài đặt

npm install gsap

---

✅ 2. Component: VideoScrollSync.tsx

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

gsap.registerPlugin(ScrollTrigger);

const VideoScrollSync = () => {
  const containerRef = useRef(null);
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const video = videoRef.current;

    if (!video) return;

    // Đảm bảo video đã tải đủ dữ liệu để có duration
    video.addEventListener('loadedmetadata', () => {
      const duration = video.duration;

      // ScrollTrigger scrub = video progress
      gsap.to(video, {
        currentTime: duration,
        ease: 'none',
        scrollTrigger: {
          trigger: containerRef.current,
          start: 'top top',
          end: '+=3000', // chiều cao cuộn để điều khiển toàn bộ video
          scrub: true,
          pin: true,
          anticipatePin: 1,
          markers: false, // true để debug
        },
      });
    });
  }, []);

  return (
    <section
      ref={containerRef}
      className="relative h-screen bg-black flex items-center justify-center overflow-hidden"
    >
      <video
        ref={videoRef}
        src="/path-to-your-video.mp4"
        className="w-full h-auto max-h-[90vh] rounded-xl shadow-2xl"
        muted
        preload="auto"
      />
    </section>
  );
};

export default VideoScrollSync;

---

✅ 3. Ghi chú quan trọng

Điều cần biết	Lý do
video.currentTime	GSAP có thể tween giá trị này để điều khiển playback thủ công
pin: true	Giữ section cố định khi scroll (sticky effect)
end: +=3000	Chiều cao scroll – càng lớn cuộn càng lâu mới hết video
scrub: true	Kéo mượt theo cuộn – không phải bật phát một lần
muted	Trình duyệt chặn autoplay audio nếu không có muted

---

✅ Đặt file video ở đâu?

• Nếu bạn dùng Vite:

  • Đặt video vào thư mục public/

  • Gọi như src="/your-video.mp4"

Hoặc import video nếu bạn dùng Webpack / file bundler:

import myVideo from './assets/video.mp4';
<video src={myVideo} ... />

---

✅ Mở rộng nâng cao

Mục tiêu	Cách làm
📱 Responsive video	Tailwind max-w-[100%], max-h-[90vh], object-contain
🎬 Trigger nội dung khác theo video progress	Dùng ScrollTrigger khác với onUpdate: self => ...
🧠 Scroll từ frame → frame (image sequence)	Dùng frame-by-frame animation thay cho video (nặng hơn)
🎙️ Sync âm thanh / phụ đề	Dùng video.textTracks + cue points

---

✅ Demo Live (nếu muốn)

Muốn mình build bản đầy đủ:

• 💡 Bắt đầu từ Hero

• 📽️ Video scroll-sync

• ✨ Fade text theo đoạn video

• 📱 Responsive

• 🌐 Gửi link Live hoặc GitHub

👉 Chỉ cần nói: Export demo scroll-video Mình build ngay cho bạn!