[GSAP] ScrollTrigger 중급(실전1)

1. 유튜브 링크

유튜브 무료강의

https://www.youtube.com/watch?v=xn6rwG-DinA&t=3s

 

[★]  플러그인 

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> 
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

2. gsap 정의

gsap.timeline => 시간에 배치하는 트윈용 컨테이너로 타임라인 재생 헤드가 이동함에 따라 하위 트윈을 스크럽하고 그에 따라 렌더링
gsap.to(".circle", { x: 40, fill: 'blue' }); => 현재 상태에서 정의된 값으로 애니메이션 적용
gsap.from(".circle", { x: -40, fill: 'blue' }); =>정의된 값에서 애니메이션을 시작해서 현재상태에 끝나는 역방향
gsap.fromTo(".circle", { x: -40, fill: 'blue' },  { x: 40, fill: 'green' }) => 시작과 종료값 모두 정리

gsap은 특정 요소 scrollTrigger에서 정한 영역에서 애니메이션을 연결하여 해당 요소가 뷰포트에 있을 때만 재생
성능이 향상되고 화려한 애니메이션을 볼수 있음.

 

---

 

3. To, From, FromTo 적용 법

 

[Html]

<div class="wrap">

        <section class="con01">

            <h2><span>GSAP</span>SCROLLTRIGGER</h2>

        </section>

        <section class="con02">

            <span class="circle"></span>

            <div class="textBox">

                <p>

                    our releases<br>

                    get a feeling<br>

                    for the latest<br>

                    selected sound

                </p>

            </div>

        </section>

        <section class="con03">

            <h2>ScrollTrigger</h2>

        </section>

    </div>

 

[Css]

   <style>

        *{margin: 0; padding: 0;}

        section{ height: 100vh; display: flex; justify-content: center; align-items: center; border-radius:2px solid red; }

        h2 {font-size: 140px; text-transform: uppercase; color: #000; line-height: 1; }

        .con01 h2 span { display: block; -webkit-text-stroke: 2px #f45b49; color: transparent; }

        .con02 { overflow: hidden; position: relative; height: 1200px; }

        .con02 .circle { display: block; width: 2500px; height: 2500px; border-radius: 50%; background-color: #000; position: absolute; top: 40%; left: 50%; transform: translateX(-50%);}

        .con02 .textBox { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); color: #fff; text-transform: uppercase; text-align: center; }

        .con02 .textBox p { font-size: 64px; font-weight: bold; letter-spacing: -5px; line-height: 1; }

        .con03 { background-color: #000; }

        .con03 h2 { color: #888; }

   </style>

 

[Script]

<script>

        gsap.registerPlugin(ScrollTrigger);

        $(function(){

        // circle

          gsap.timeline({

            scrollTrigger: {

                trigger: '.con02',

                start: '0% 50%',

                end: '30% 0%',

                scrub: 1,

                markers: true

            }

          })

          .fromTo('.circle',

          { 'width': '0', 'height': '0', 'duration': '10', 'ease': 'elastic', 'top': '3%'},

          { 'width': '2500px', 'height': '2500px', 'duration': '10', 'top': '30%'}, 0)

          //duraction: 진행정도

          // ease: 'elastic' 가속도

          //delay: 0 딜레이

            // textbox

          gsap.timeline({

            scrollTrigger: {

                trigger: '.con02 .textBox',

                start: '0% 80%',

                end: '100% 80%',

                scrub: 1,

                markers: true

            }

          })

          .fromTo('.textBox',

          { 'top': '50%', 'duration': '5', 'ease': 'elastic', 'opacity': '0'},

          { 'opacity': '1', 'top': '40%'},0)

        })

    </script>

 

:) 참고링크

티스토리 참고링크

https://lpla.tistory.com/106