Phương thức onUpdate sử dụng như nào, có sử dụng tương tự onEnter, onLeave ?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodePen - GSAP count</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .number_wrapper {
      background-color: grey;
      text-align: center;
      min-height: 1000px;
    }
    #number {
      font-size: 25vw;
      font-family: sans-serif;
      font-weight: 600;
      color: #444444;
    }
  </style>
</head>
<body>
  <!-- partial:index.partial.html -->
  <div class="number_wrapper">
    <div id="number">0</div>
  </div>
  <!-- partial -->
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
  <script src='https://assets.codepen.io/16327/ScrollTrigger.min.js'></script>
  <script>
    var startCount = 0, num = {
      var:
        startCount
    };
    gsap.timeline({
      scrollTrigger: {
        trigger: "#number",
        pin: true,
        start: "top top",
        end: "+=2000",
        scrub: true,
        markers: true,
      }
    }).to(num, {
      var: 1000,
      duration: 5,
      ease: "none",
      onUpdate: changeNumber
    })
    function changeNumber() {
      number.innerHTML = (num.var).toFixed();
    }
  </script>
</body>
</html>
PreviousGiải thích dễ hiểu onEnter, onLeave, sử dụng start, end như nào FULL Phần 2 (ok)NextSử dụng ScrollSmoother thay thế Locomotive Scroll hay Lenis. (ok)

Last updated

Was this helpful?