search

up" < " trong GSAP timeline – đây là cú pháp quan trọng giúp animation của bạn chính xác và gọn gàng

hashtag
✅ 1. Ý nghĩa của "<" trong GSAP timeline

Trong GSAP timeline:

jsCopyEdittl.to(".hero h1", { ... })
  .to(".hero p", { ... }, "<");

🔹 "<" có nghĩa là:

➡️ Bắt đầu animation .hero p cùng lúc với animation trước đó.

hashtag
🔧 2. Tóm tắt các position parameter

Cú pháp
Ý nghĩa

"<"

Start cùng lúc với previous animation

">"

Start ngay sau khi previous animation kết thúc

"<+=1"

Start cùng animation trước nhưng delay thêm 1s

">-=0.5"

Start sau animation trước và lùi lại 0.5s

0

Start tại thời điểm đầu timeline

"2"

Start tại giây thứ 2 của timeline

"+=1"

Start sau thời điểm hiện tại + 1s

hashtag
✅ 3. Example minh họa

jsCopyEditconst tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 1 }) // chạy từ 0s → 1s
  .to(".box2", { x: 100, duration: 1 }, "<") // chạy cùng lúc với box1 (từ 0s)
  .to(".box3", { x: 100, duration: 1 }, ">"); // chạy sau box2 kết thúc (từ 1s)

hashtag
🎯 4. Kết luận

✅ Trong example của bạn:

➡️ Subtitle (.hero p) fade out + move up cùng lúc với Title (.hero h1).

Nếu cần, tôi có thể viết full bài học Timeline GSAP từ cơ bản đến nâng cao cho lộ trình học animation frontend của bạn tuần này. Hãy cho tôi biết.

Ask ChatGPTwindow.__oai_logHTML?window.__oai_logHTML():window.__oai_SSR_HTML=window.__oai_SSR_HTML||Date.now();requestAnimationFrame((function(){window.__oai_logTTI?window.__oai_logTTI():window.__oai_SSR_TTI=window.__oai_SSR_TTI||Date.now()}))

Previous😊 Đây là giải thích đầy đủ, ngắn gọn và thực tế về các option quan trọng của ScrollTrigger (ok)Nextend: () => "+=" + scrollDistance có nghĩa gì? (ok)

Last updated