🥰Giải thích dễ hiểu onEnter, onLeave, sử dụng start, end như nào FULL Phần 1 (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. (trường hợp này chỉ hoạt động duy nhất khi start vượt qua Scroller Start)

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 3: 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 1

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"
});

Chú ý 1.1: Nếu không định nghĩa Start hoặc End thì mặc định Scroller Start, Scroller End sẽ ở phía cuối cùng tức là tương ứng "bottom bottom" (xem ảnh 👇)

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!")
});
ScrollTrigger.create({
  trigger: ".left-row",
  start: () => 300,
  end: () => 500,
  pin: true,
  pinSpacing: false,
  markers: { indent: 350 },
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Do Scroller Start, Scroller End đã trùng nhau ở dưới "bottom bottom" nên start: 0 thì nó sẽ trùng với Scroller Start, Scroller End (xem ảnh 👇) và nếu sử dụng start: 300 thì nó sẽ bị lui xuống phía dưới 300px xem ảnh ở trên (xem ảnh 👆)

// 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: () => 0,
  end: () => heroSt.end,
  pin: true,
  pinSpacing: false,
  markers: { indent: 350 },
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});

Chú ý 1-2: Con số Start được tính như nào?

Chú ý 2: Hiện tại heroSt.start: 332 do đó nó sẽ phía cách phía "bottom bottom" làm 332px nếu chưa hiểu đọc chú ý 1

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: 350 },
  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 2

— Nếu sử dụng khối .left-row, .right-row giống nhau heroSt.start, heroSt.end thì nó trở thành 2 khối như thông thường không có gì nổi bật

// 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: 200 },
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});
// // Pin right column
ScrollTrigger.create({
  trigger: ".right-row",
  start: heroSt.start,
  end: heroSt.end,
  pin: true,
  pinSpacing: false,
  markers: { indent: 300 },
  id: "rgt"
});

— Nếu sử dụng khối .right-row khác nhau start: "top 250", heroSt.end thì nó trở thành 2 khối vô cùng đặc biệt (có nghĩa right-row định nghĩa lại viewPosition 👌)

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: 200 },
  onEnter: () => console.log("Entered!"),
  onLeave: () => console.log("Leaved!")
});
// // Pin right column
ScrollTrigger.create({
  trigger: ".right-row",
  start: "top 250",
  end: heroSt.end,
  pin: true,
  pinSpacing: false,
  markers: { indent: 300 },
  id: "rgt"
});

Đây làm toàn bộ code để hiểu nó một cách hoàn toàn chúng ta phải đọc đi đọc lại nhiều lần

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Hero &amp; Column Pin</title>
  <link rel='stylesheet' href='https://codepen.io/GreenSock/pen/xxmzBrw.css'>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .header {
      position: fixed;
      width: 100%;
      height: 200px;
      background-color: #a0a0a0;
      z-index: 10;
    }
    .wrapper {
      padding-top: 200px;
    }
    .hero {
      width: 100%;
      height: 40vh;
    }
    .row {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 100vh;
    }
    .right-row {
      justify-content: flex-end;
    }
    .column {
      width: 50%;
      height: 100%;
    }
    .spacer {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="header"></div>
<div class="wrapper">
  <div class="hero gradient-purple"></div>
  <div class="row left-row">
    <div class="column gradient-green">
      <h1>Lorem ipsum dolor sit amet.</h1>
    </div>
  </div>
  <div class="row right-row">
    <div class="column gradient-blue">
      <h1>Lorem ipsum dolor sit amet.</h1>
    </div>
  </div>
</div>
<div class="spacer gradient-red"></div>
<!-- partial -->
  <script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
// pin the image
const heroSt = ScrollTrigger.create({
  trigger: ".hero",
  start: "bottom 250",
  end: "top bottom",
  endTrigger: ".spacer",
  pin: true,
  pinSpacing: false,
  // markers: true,
  id: "hero"
});
// Pin left column
ScrollTrigger.create({
  trigger: ".left-row",
  start: () => heroSt.start,
  end: () => heroSt.end,
  pin: true,
  pinSpacing: false,
  // markers: { indent: 150 },
  id: "lft"
});
// Pin right column
ScrollTrigger.create({
  trigger: ".right-row",
  start: "top 250",
  end: heroSt.end,
  pin: true,
  pinSpacing: false,
  // markers: { indent: 300 },
  id: "rgt"
});
</script>
</body>
</html>