인프런 커뮤니티 질문&답변

섹션3. Advanced Trigger 에서

Animation Toggle(1) 강좌에서 문의드립니다.

첫번째 왼쪽에는 프로그래스 스크롤트리거를 넣었는데요,

아래 소스에서 trigger: '.scroll-content' 에서 대상을 넣을걸로 알고 있는데요,

마크업 구조상에 .scroll-content 라는 이름의 클래스명이 없는데 이건 어디서 나온걸까요

<nav class="lnb">
    <div class="progress"></div>
    <ul>
      <li>
        <div class="dot"></div>
        <span>Home</span>
      </li>
      <li>
        <div class="dot"></div>
        <span>About</span>
      </li>
      <li>
        <div class="dot"></div>
        <span>Product</span>
      </li>
      <li>
        <div class="dot"></div>
        <span>Portfolio</span>
      </li>
      <li>
        <div class="dot"></div>
        <span>Contact Us</span>
      </li>
    </ul>
  </nav>

  <div id="container">
    <section class="section section01"><h2>section1</h2></section>
    <section class="section section02"><h2>section2</h2></section>
    <section class="section section03"><h2>section3</h2></section>
    <section class="section section04"><h2>section4</h2></section>
    <section class="section section05"><h2>section5</h2></section>
  </div>

    ScrollTrigger.create({
      trigger: '.scroll-content',
      start: 'top top',
      end: 'bottom bottom',
      animation: gsap.from('.progress',{scaleY:0,transformOrigin:'center top',ease:'none'}),
      scrub: true,
    })