🥰Giải thích dễ hiểu onEnter, onLeave (ok)

ScrollTrigger.create({
  trigger: ".section",
  start: "top center",
  end: "bottom top",
  pin: true,
  scrub: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Nghiên cứu các chỉ số start, end

Scroller Start 1: "top top" và end: "bottom bottom"

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "top top",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Scroller Start 2: "top center" và end: "bottom bottom"

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "top center",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Scroller Start 3: "top 250" và end: "bottom bottom"

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "top 250",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Start 1: "top 150" và end: "bottom bottom"

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "top 150",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Start 2: "center 150" và end: "bottom bottom"

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "center 150",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Start 3: "100 150" và end: "bottom bottom"

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "100 150",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Cách hoạt động của onEnter, onLeave

— Cách hoạt động của onEnter dựa vào start tràn ra mốc Scroller-Start (chý ý tràn phía dưới Scroller-End không có tác dụng)

— Cách hoạt động của onLeave dựa vào end tràn ra mốc Scroller-End (chý ý tràn phía dưới Scroller-Start không có tác dụng)

Đặc biệt 1: khi sử dụng đảo chiều nhau. (

Nó chỉ sảy ra khi Start vượt qua Scroller Start (không sảy ra khi end vượt qua Scroll End hoặc Start vượt qua Scroll End tóm lại Start chỉ làm việc với Scroller Start)

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "bottom 450",
  end: "top 690",
  // endTrigger: ".spacer",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Đặc biệt 2: Sử dụng endTrigger

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "top top",
  end: "bottom bottom",
  endTrigger: ".spacer",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Đặc biệt 2: Sử dụng endTrigger dạng đảo chiều (khi này ta thấy start, end đều hoạt động)

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "bottom 250",
  end: "top bottom",
  endTrigger: ".spacer",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Tiếp tục nghiên cứu hành động sau khi trả về kết quả thứ nhất

const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "bottom 250",
  end: "top bottom",
  endTrigger: ".spacer",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});
console.log(heroSt);

Sử dụng start, end trong kết quả đề sử dụng luôn cho đồng thời khối áp dụng sau

// pin the image
const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "bottom 250",
  end: "top bottom",
  endTrigger: ".spacer",
  pin: true,
  pinSpacing: false,
  markers: true,
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});
console.log(heroSt);
// // Pin left column
ScrollTrigger.create({
  trigger: ".left-row",
  start: () => heroSt.start,
  end: () => heroSt.end,
  pin: true,
  pinSpacing: false,
  // markers: { indent: 150 },
  id: "lft"
});