gsap-01 (scrollTrigger)

<main id="parallax__cont">
        <section id="section1" class="parallax__item">
            <span class="parallax__item__num">01</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section1 -->

        <section id="section2" class="parallax__item">
            <span class="parallax__item__num">02</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section2 -->

        <section id="section3" class="parallax__item">
            <span class="parallax__item__num">03</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section3 -->

        <section id="section4" class="parallax__item">
            <span class="parallax__item__num">04</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section4 -->

        <section id="section5" class="parallax__item">
            <span class="parallax__item__num">05</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section5 -->

        <section id="section6" class="parallax__item">
            <span class="parallax__item__num">06</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section6 -->

        <section id="section7" class="parallax__item">
            <span class="parallax__item__num">07</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section7 -->

        <section id="section8" class="parallax__item">
            <span class="parallax__item__num">08</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section8 -->

        <section id="section9" class="parallax__item">
            <span class="parallax__item__num">09</span>
            <div class="parallax__item__img"></div>
        </section>
        <!-- //section9 -->
    </main>

gsap.min.js, ScrollTrigger.min.js 셋팅

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

gsap.to(box1,{
          duration:2,
          x: 500,
          borderRadius:100,
          rotation:360,
      });

// 02 : trigger
      gsap.to(box2,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,
        scrollTrigger:{
          trigger: box2
        }
      });

// 03 : toggleActions
      gsap.to(box3,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,
        scrollTrigger:{
          trigger: box3,
          toggleActions:"play none reverse none"
        }
      });

// 04 : start, end
      gsap.to(box4,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,

        scrollTrigger:{
          trigger: box4,
          start:"top 50%",
          end:"bottom 20%",
          toggleActions:"play none reverse none",
          markers:false,
        }
      });

// 05 : scrub
      gsap.to(box5,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,

        scrollTrigger:{
          trigger: box5,
          start:"top 50%",
          end:"bottom 20%",
          scrub:1, //true, 1, 2...
          markers:false,
        }
      });

// 06 : pin
      gsap.to(box6,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,

        scrollTrigger:{
          trigger: box6,
          start:"top 50%",
          end:"bottom 200px",
          scrub:1, //true, 1, 2...
          pin:true,
          markers:false,
        }
      });

// 07 : pin
      gsap.to(box7,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,

        scrollTrigger:{
          trigger: box7,
          start:"top center",
          end:"bottom top",
          scrub:1, //true, 1, 2...
          toggleClass:"active",
          markers:false,
          id:"box7"
        }
      });

// 08 : callback
      gsap.to(box8,{
        duration:2,
        x:500,
        rotation:360,
        borderRadius:100,

        scrollTrigger:{
          trigger: box8,
          start:"top center",
          end:"bottom 20%",
          scrub:1, //true, 1, 2...
          markers:true,
          // onEnter: () =>{console.log('onEnter')},
          // onLeave: () =>{console.log('onLeave')},
          // onEnterBack: () =>{console.log('onEnterBack')},
          // onLeaveBack: () =>{console.log('onLeaveBack')}
        onUpdate : (self) => {console.log("onUpdate", self.progress.toFixed(3))},
        onToggle : (self) => {console.log("onToggle", self.isActive)},
        }
      });