🥰Sử dụng onEnterBack, Label end: "+=" + (images.length - 1) * 100 + "%" FULL Phần 2 (ok)

Example 1: Sử dụng Absolute Cards

— Hiện tại với cấu hình này chưa có gì sảy ra vẫn như bình thường các khối Card 1, Card 2, Cart 3 đang bị ẩn dưới wrapper

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodePen - Loop Absolute Cards</title>
  <link rel='stylesheet' href='https://codepen.io/GreenSock/pen/xxmzBrw.css'>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .panel,
    .wrapper {
      position: relative;
      width: 100%;
      min-height: unset;
      height: 500px;
    }
    .card {
      position: absolute;
      left: 50%;
      bottom: 0;
      visibility: hidden;
      font-size: 30px;
      width: 100vw;
      text-align: center;
    }
    .card:nth-child(1) {
      background-color: red;
    }
    .card:nth-child(2) {
      background-color: blueviolet;
    }
    .card:nth-child(3) {
      background-color: cadetblue;
    }
    .card p {
      margin: 0;
    }
  </style>
</head>
<body>
  <!-- partial:index.partial.html -->
  <main>
    <div class="panel gradient-green"></div>
    <div class="wrapper">
      <div class="card">
        <p>Card 1</p>
      </div>
      <div class="card">
        <p>Card 2</p>
      </div>
      <div class="card">
        <p>Card 3</p>
      </div>
    </div>
    <div class="panel gradient-blue"></div>
  </main>
  <!-- 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>
    console.clear();
    gsap.registerPlugin(ScrollTrigger);
    const cards = gsap.utils.toArray(".card");
    gsap.set(cards, {
      xPercent: -50,
      yPercent: 100,
      autoAlpha: 1
    });
    const tl = gsap.timeline({
      defaults: {
        duration: 1,
        ease: "power1.inOut"
      },
      scrollTrigger: {
        trigger: ".wrapper",
        start: "top top",
        end: "+=100%",
        pin: "main",
        scrub: true,
        markers: true
      }
    });
  </script>
</body>
</html>

Chú ý 1: Nếu sử dụng pin: true thì nó sẽ pin lên .wrapper

Chú ý 2: Nếu không sử dụng scrub: true thì các card chạy một mạch hết luôn (dường như để nó kích hoạt các hiệu ứng timeline được định nghĩa theo một cách tuần tự)

— Sử dụng cấu hình sau tất cả các card đều hiệu ứng như nhau không có khác biệt gì. (do đó ở trường hợp sau chúng ta sẽ tìm cách chỉ áp dụng lần lượt cho từng phần tử)

— Với cấu hình sau thì chỉ áp dụng cho một phần tử duy nhất

Toàn bộ code ở đây

Example 2: Xếp trồng layout 👌

Việc sử dụng hết sức đơn giản chỉ cần sử dụng

Example 3: Xếp trồng layout dạn Accordion

Chú ý

Toàn bộ code

— Chú ý 1: Nếu có class pin-spacer thì khi scroll chưa vượt ra khỏi khung Scroller Start và Scroller End thì nội dung trong pin-spacer không dịch chuyển, trong trường hợp này pin: true do đó .column-wrapper không di chuyển trong khung

— Chú ý 2: Nếu sử dụng pin: ".column.right" khi đó .column.right không di chuyển khi chưa vượt qua khung nhìn, còn .column.left vẫn di chuyển theo mặc định

Chú ý 3: Khi scroll lên trên scroller start và scroller end thì sẽ là onEnter, ngược lại sẽ là onEnterBack

PreviousGiải thích dễ hiểu onEnter, onLeave, sử dụng start, end như nào FULL Phần 1 (ok)NextPhương thức onUpdate sử dụng như nào, có sử dụng tương tự onEnter, onLeave ?

Last updated

Was this helpful?