Threejs gsap ScrollTrigger not functioning with the loading glb ! although the same code worked with the Geometry box

Questions
,
1

threejs gsap ScrollTrigger not functioning with the loading glb ! although the same code worked with the Geometry box !

here the code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <script src="https://unpkg.com/three@0.125.2/build/three.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
      integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- NOW ADD YOUR FILE -->
    <script src="/gsap.min.js"></script>

    <style>
      body {
        margin: 0;

        font-family: "Courier New", Courier, monospace;
        height: 100vh;
      }

      .box {
        background: rgb(255, 0, 0);
        width: 200px;
        height: 200px;
      }

      .scene.one {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
      }

      section {
        width: 100%;
        height: 100vh;
        position: relative;
      }

      h1 {
        font-family: "Barlow Semi Condensed", sans-serif;
        font-style: normal;
        font-weight: bold;
        color: #eee;
        font-size: 11vmin;
        letter-spacing: 0.03em;
        line-height: 1;
        text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
        margin-bottom: 40px;
      }

      canvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        pointer-events: none;
      }

      .section-one {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
      }

      .section-two {
        background-color: steelblue;
      }

      .section-three {
        background-color: crimson;
      }

      #quote {
        font-size: 44px;
        line-height: 50px;
        color: #dedede;
      }
      .section-four {
        background-color: rgb(243, 204, 227);
      }
      .section-five {
        background-color: rgb(40, 73, 50);
      }
      .section-six {
        background-color: rgb(14, 75, 104);
      }
    </style>
  </head>
  <body>
    <canvas class="web"></canvas>
    <section class="section-one"><h1></h1></section>
    <section class="section-two"><h1>section-tow</h1></section>
    <section class="section-three">
      <h1 class="headerText">Welcome to New York City</h1>
    </section>
    <section class="section-four"><h1>section-four</h1></section>
    <section class="section-five"><h1>section-four</h1></section>
    <section class="section-six"><h1>section-four</h1></section>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

    <script type="module">
      


    
    import { OrbitControls } from "https://unpkg.com/three@0.125.2/examples/jsm/controls/OrbitControls.js";
    import { GLTFLoader } from "https://unpkg.com/three@0.125.2/examples/jsm/loaders/GLTFLoader.js";



    const section = document.querySelector('.section-one');

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      const renderer = new THREE.WebGLRenderer({ alpha: true });
      renderer.autoClear = true;
      renderer.setSize(window.innerWidth, window.innerHeight);
      section.appendChild(renderer.domElement);

      var lightA = new THREE.DirectionalLight(0xffffff, 3);
      var lightB = new THREE.DirectionalLight(0xffffff, 1);
      lightB.position.y = -1;

      scene.add(lightA);
      scene.add(lightB);

      //import 3d model into the scene >>
      var ball2 = null;
      var loader = new GLTFLoader();

      // loader.load('./ball2.gltf', function(model){
      loader.load(
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_body_red.glb",
        function (gtlf) {
          ball2 = gtlf.scene;

          scene.add(ball2, camera);

          renderer.render(scene, camera);
        }
      );
      camera.position.z = 5;
      function animate() {
        requestAnimationFrame(animate);

        ball2.rotation.x += 0.01;

        ball2.rotation.y += 0.01;

        renderer.render(scene, camera);
      }
      animate();

      // gsap

      // gsap

      gsap.registerPlugin(ScrollTrigger);

      gsap.to(ball2.position, {
        scrollTrigger: {
          trigger: ".section-one",
          start: "top top",
          end: "bottom top",
          scrub: 2
        },
        y: -1.3
      });

      gsap.to(ball2.scale, {
        x: 2,
        y: 2,
        scrollTrigger: {
          trigger: ".section-three"
        }
      });

      gsap.to(ball2.rotation, {
        y: Math.PI * 2,
        scrollTrigger: {
          trigger: ".section-four"
        }
      });

      gsap.to(ball2.rotation, {
        y: Math.PI * 2,
        scrollTrigger: {
          trigger: ".section-five"
        }
      });
      gsap.registerPlugin(SplitText);

      var tl = gsap.timeline(),
        mySplitText = new SplitText("#quote", { type: "words,chars" }),
        chars = mySplitText.chars; //an array of all the divs that wrap each character

      gsap.set("#quote", { perspective: 400 });

      console.log(chars);

      tl.from(chars, {
        duration: 0.8,
        opacity: 0,
        scale: 0,
        y: 80,
        rotationX: 180,
        transformOrigin: "0% 50% -50",
        ease: "back",
        stagger: 0.01
      });
    </script>
  </body>
</html>
2

Try like this

loader.load(
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_body_red.glb",
        function (gtlf) {
          ball2 = gtlf.scene;
gsap.registerPlugin(ScrollTrigger);
      gsap.to(ball2.position, {
        scrollTrigger: {
          trigger: ".section-one",
          start: "top top",
          end: "bottom top",
          scrub: 2
        },
        y: -1.3
      });

      gsap.to(ball2.scale, {
        x: 2,
        y: 2,
        scrollTrigger: {
          trigger: ".section-three"
        }
      });
      gsap.to(ball2.rotation, {
        y: Math.PI * 2,
        scrollTrigger: {
          trigger: ".section-four"
        }
      });

      gsap.to(ball2.rotation, {
        y: Math.PI * 2,
        scrollTrigger: {
          trigger: ".section-five"
        }
      });
          scene.add(ball2, camera);
        }
      );