[GSAP] ScrollTrigger(실전3)

[★]  플러그인 

 <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>

 

1. Pin과 timeline으로 요소 등장

 

[Html]

  <section id="section1">

        <p>section1</p>

    </section>

    <section id="section2">

    <p>section2</p>

    <div class="box_wrapper">

        <div class="box box1 horizon_box">

        <h1>1</h1>

        </div>

        <div class="box box2 horizon_box">

        <h1>2</h1>

        </div>

        <div class="box box3 horizon_box">

        <h1>3</h1>

        </div>

    </div>

    </section>

    <section id="section3">

        <p>section3</p>

    </section>

    <section id="section4">

        <p>section4</p>

    </section>

[Css]

 <style>

        * { margin: 0; padding: 0; }

        body { margin: 0; }

        section { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; }

        section p { font-size: 40px; margin-bottom: 50px; }

        #section1 { background: yellowgreen; }

        #section2 { background: goldenrod; overflow: hidden; }

        #section3 { background: indianred; }

        #section4 { background: paleturquoise; }

        .box h1 { font-size: 50px; text-align: centerspa; }

        .box1 { background: darkslategray; }

        .box2 { background: crimson; }

        .box3 { background: darkorchid; }

        .box_wrapper { display: flex; justify-content: space-around; width: 100%; }

        .box { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; opacity: 1; }

    </style>

[Script]

<script>

      var $sections = document.querySelectorAll(".horizon_box");

        var tl = gsap.timeline({

        scrollTrigger: {

            trigger: "#section2",

            pin: true,

            scrub: 0.3,

            start: "top top",

            end: "+=300%",

            markers: true,

        }

        });

        tl.from($sections, {x: '300%', autoAlpha: 0, duration:2, ease: "none", stagger:3})

        .to($sections, {duration: 3});

   </script>

 

:) 참고링크

티스토리 참고링크

https://lpla.tistory.com/106