21강 - 특정 구간에서 스크롤시, 횡으로 이동하는 효과

<!-- jq -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- gsap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<!-- 아래 - 위 -->
<section class="section-group section-group--1 section-group--vertical-up">
    <section class="section section--1">섹션1</section>
    <section class="section section--2">섹션2</section>
    <section class="section section--3">섹션3</section>
    <section class="section section--4">섹션4</section>
    <section class="section section--5">섹션5</section>
</section>

<!-- 왼- 오  -->
<section class="section-group section-group--2 section-group--horizontal-right">
    <section class="section section--6">섹션6</section>
    <section class="section section--7">섹션7</section>
    <section class="section section--8">섹션8</section>
    <section class="section section--9">섹션9</section>
    <section class="section section--10">섹션10</section>
</section>

<section class="section-group section-group--3">
    <section class="section section--11">섹션11</section>
    <section class="section section--12">섹션12</section>
    <section class="section section--13">섹션13</section>
    <section class="section section--14">섹션14</section>
    <section class="section section--15">섹션15</section>
</section>

<!-- 오 - 왼 -->
<section class="section-group section-group--4 section-group--horizontal-left">
    <section class="section section--16">섹션16</section>
    <section class="section section--17">섹션17</section>
    <section class="section section--18">섹션18</section>
    <section class="section section--19">섹션19</section>
    <section class="section section--20">섹션20</section>
</section>

<!-- 쌓이는 느낌  -->
<section class="section-group section-group--5 section-group--stack-up">
    <section class="section section--21">섹션21</section>
    <section class="section section--22">섹션22</section>
    <section class="section section--23">섹션23</section>
    <section class="section section--24">섹션24</section>
    <section class="section section--25">섹션25</section>
</section>


<!-- 위아래 vertical | 양 옆 hosizontal -->

<!-- gsap 는 항상 start 와 and 지점이 있다. -->

html, body {
    overflow-x : hidden;
}
body {
    -ms-overflow-style : none;
}
body::-webkit-scrollbar {display : none;}
body, ul, li {
    margin: 0;
    padding: 0;
    list-style : none;
}
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: bold;
    letter-spacing : -0.5rem;
    border: 10px solid #000;
    box-sizing : border-box;
    background-color: #fff;
    position : relative;
}
.section-group--horizontal-right {
    display: flex;
    flex-direction : row-reverse;
}
.section-group--horizontal-right > .section,
.section-group--horizontal-left > .section {
    width: 100%;
    flex-shrink : 0;
/*   flex-shrink : 0; 자기 영역을 절대 수축하지 않음.   */
}
.section-group--horizontal-left{
    display: flex;
   
}

// 스크롤 트리거 플러그인 활성화
gsap.registerPlugin(ScrollTrigger);

function SectionGroup__init() {
    $(".section-group--horizontal-right").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section");

        gsap.to($section, {
            xPercent: 100 * ($section.length - 1),
            ease: "none",
            scrollTrigger: {
                trigger: $group,
                start: "top top",
                end: "+=" + ($section.length - 1) + "00%",
                pin: true,
                scrub: true,
                markers: true
            }
        });
    });

    $(".section-group--horizontal-left").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section");

        gsap.to($section, {
            xPercent: -100 * ($section.length - 1),
            ease: "none",
            scrollTrigger: {
                trigger: $group,
                start: "top top",
                end: "+=" + ($section.length - 1) + "00%",
                pin: true,
                scrub: true,
                markers: true
            }
        });
    });
    $(".section-group--stack-up").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section:not(:first-child)");

        $section.each(function(index, node){
            var $sectionOne = $(node);
            gsap.to($section, {
            ease: "none",
            scrollTrigger: {
                trigger: $sectionOne,
                start: "top 100%",
                end: "bottom 100%" ,
                pin: $sectionOne.prev(),
                pinSpacing: false,
                scrub: true,
                markers: true
            }
        });
        })
    });
}

SectionGroup__init();

// markers : true라고 하면, 시작지점을 지정할 수 있다.
// .each 는 for문이라고 생각하라.
//  ease:"none", : 가속이나 감속 없이 스크롤 속도를 일정하게 하겠다.
// start:"top top" : 시작점 엘리먼트 첫 시작과 사용자 눈 첫시작이 일치할 때 시작하겠다.
// pin: true, 화면 고정 장치
// scrub: true, 하지 않으면 엄청 빨리 애니메이션이 일어남.
// markers:true : 시작점 끝점 표시 , 애니메이션을 만드는 과정에는 표시하는 게 좋음, 애니메이션 다 만들면 없애도 됨 .
//  end:"+=" + ($section.length - 1) + "00%" 현재 화면 에 현재를 제외 400% 가 더 있다. + 00% 총길이

• codepen으로 정리된 코드 보러가기