greensock scrolltrigger 커스텀 손쉽게 쓰기

greensock 홈페이지

greensock scrolltiger

 

퍼블리싱 작업을 하다가

스크롤 애니메이션을 자주 쓰일일이 있다.

그럴 때 여러 가지를 사용하다가

요즘에 익히고 있는 애니메이션 라이브러리 끝판왕인

greensock을 이용하여 내 입맛대로 스크롤 트리거를

편하게 쓸수 있게 만들어봤다.

 

화면..

data-dur="0.5"

data-dur="1"

data-dur="1.5"

data-dur="2"

data-delay="1"

data-delay="1.5"

data-delay="2"

data-delay="3"

data-tp="50%"

 

위에 예제 html이고

이제부터 설명을 간다.

greensock 조차가 다 이해하려면 엄청난

시간이 필요하니

오늘 필요한 것만 추려본다.

 

1. 필요한 JS CDN 

<script src="https://code.jquery.com/jquery-3.6.1.js"
        integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>

 

jquery는 기본이고

gsap.min.js는 그린샷의 코어를 담은 js이고

scrolltrigger.min.js는 greensock의 확장 플러그인이다.

 

2. 스크롤 트리거 커스텀 JS

$(function () {

    //greensock basic setting
    gsap.registerPlugin(ScrollTrigger);

    var delay = 0;
    var dur = 1.5;
    var tp = "100%";

    // green_sock
    function green_sock() {

        // transform set because.. css not..
        gsap.set(".ani_tb", { y: -100, opacity: 0 })
        gsap.set(".ani_tb2", { y: -50, opacity: 0 })
        gsap.set(".ani_rl", { x: 100, opacity: 0 })
        gsap.set(".ani_rl2", { x: 50, opacity: 0 })
        gsap.set(".ani_bt", { y: 100, opacity: 0 })
        gsap.set(".ani_bt2", { y: 50, opacity: 0 })
        gsap.set(".ani_lr", { x: -100, opacity: 0 })
        gsap.set(".ani_lr2", { x: -50, opacity: 0 })

        gsap.set(".ani_opa", { opacity: 0 })

        // ani_tb ~ ani_opa set
        gsap.utils.toArray(".ani_tb").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
        });

        gsap.utils.toArray(".ani_rl").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
        });

        gsap.utils.toArray(".ani_bt").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
        });

        gsap.utils.toArray(".ani_lr").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
        });

        // ani_tb ~ ani_opa set
        gsap.utils.toArray(".ani_tb2").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
        });

        gsap.utils.toArray(".ani_rl2").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
        });

        gsap.utils.toArray(".ani_bt2").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
        });

        gsap.utils.toArray(".ani_lr2").forEach(function (entry) {
            delay = $(entry).attr('data-delay');
            if ($(entry).attr('data-dur')) {
                dur = $(entry).attr('data-dur');
            }
            if ($(entry).attr('data-tp')) {
                tp = $(entry).attr('data-tp');
            }
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
        });


        //height 0~100
        var height1 = gsap.utils.toArray(".ani_height1");

        height1.forEach(function (entry) {
            var tl = gsap.timeline({
                scrollTrigger: {
                    trigger: entry,
                    start: "top " + tp
                }
            });
            tl.to(entry, {
                duration: 1.5,
                height: 0
            });
        });
    }
    // green_sock




    green_sock();

});

 

gsap.registerPlugin(ScrollTrigger);

확장 플러그인을 사용하려면 위와 같이

등록을 해야 사용할 수 있다.

 

var delay = 0; 
var dur = 1.5;
var tp = "100%";

기본 설정에 대한 설명입니다.

 

var delay=0초가 기본이고

1로 바꾸면 1초

0.5로 바꾸면 0.5초

 

var dur=1.5초가 기본이고

1로 바꾸면 1초

0.5로 바꾸면 0.5초

 

var tp = "100%"

브라우저 맨 아래 기준으로 스크롤 발동

"50%"으로 바꾸면

브라우저 새로 중앙에서 애니메이션 발동.

 

gsap.set(".ani_tb", { y: -100, opacity: 0 })
gsap.set(".ani_tb2", { y: -50, opacity: 0 })
gsap.set(".ani_rl", { x: 100, opacity: 0 })
gsap.set(".ani_rl2", { x: 50, opacity: 0 })
gsap.set(".ani_bt", { y: 100, opacity: 0 })
gsap.set(".ani_bt2", { y: 50, opacity: 0 })
gsap.set(".ani_lr", { x: -100, opacity: 0 })
gsap.set(".ani_lr2", { x: -50, opacity: 0 })
gsap.set(".ani_opa", { opacity: 0 })

.ani로 시작되는 클래스들 

div에 추가하면 애니메이션이 작동한다.

 

3. div 추가 방법

(1) 
<div class="box box1 ani_lr"><span></span></div>
(2) 
<div class="box box1 ani_lr" data-dur="0.5"><span></span></div>
(3) 
<div class="box box3 ani_rl" data-dur="1.5" data-delay="2"><span></span></div>
(4) 
<div class="box box1 ani_lr" data-dur="1.5" data-delay="0" data-tp="50%"><span></span></div>

 

(1)은 기본 속성대로 사용

(2)은 data-dur="0.5"로 바꿈.

애니메이션 발동 시간을 0.5초로

(3)은 data-dur="1.5"로 바꿈.

data-delay="2"로 바꿈.

애니메이션 발동시간을 1.5초로

애니메이션 발동 지연을 2초로

(4)은 data-dur="1.5"로 바꿈.

data-delay="0"로 바꿈.

data-tp="50%"로 바꿈.

애니메이션 발동 시간을 1.5초로

애니메이션 발동 지연을 0초로

애니메이션 시작 지점을 브라우저 중앙으로

 

4.  최종 결과물

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>greensock scroll trigger</title>

    <script src="https://code.jquery.com/jquery-3.6.1.js"
        integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>

    <style>
        .container {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding-bottom: 100px;
        }

        .container .bg {
            height: 100vh;
            background-color: #000;
            color: #fff;
            font-size: 50px;
            line-height: 100vh;
        }

        .container>div {
            text-align: center;
        }


        .box {
            margin-top: 100px;
            width: 150px;
            height: 150px;
            display: inline-block;
            color: #fff;
            font-size: 20px;
            line-height: 150px;
        }

        .box span {
            background-color: #000;
            display: inline-block;
            height: auto;
            line-height: 40px;
            width: 100%;
        }

        .box1 {
            background-color: red;
        }

        .box2 {
            background-color: orange
        }

        .box3 {
            background-color: yellow;
        }

        .box4 {
            background-color: green;
        }
    </style>

    <script>
        $(function () {

            //greensock basic setting
            gsap.registerPlugin(ScrollTrigger);

            var delay = 0;
            var dur = 1.5;
            var tp = "100%";

            // green_sock
            function green_sock() {

                // transform set because.. css not..
                gsap.set(".ani_tb", { y: -100, opacity: 0 })
                gsap.set(".ani_tb2", { y: -50, opacity: 0 })
                gsap.set(".ani_rl", { x: 100, opacity: 0 })
                gsap.set(".ani_rl2", { x: 50, opacity: 0 })
                gsap.set(".ani_bt", { y: 100, opacity: 0 })
                gsap.set(".ani_bt2", { y: 50, opacity: 0 })
                gsap.set(".ani_lr", { x: -100, opacity: 0 })
                gsap.set(".ani_lr2", { x: -50, opacity: 0 })

                gsap.set(".ani_opa", { opacity: 0 })

                // ani_tb ~ ani_opa set
                gsap.utils.toArray(".ani_tb").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
                });

                gsap.utils.toArray(".ani_rl").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
                });

                gsap.utils.toArray(".ani_bt").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
                });

                gsap.utils.toArray(".ani_lr").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
                });

                // ani_tb ~ ani_opa set
                gsap.utils.toArray(".ani_tb2").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
                });

                gsap.utils.toArray(".ani_rl2").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
                });

                gsap.utils.toArray(".ani_bt2").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, y: 0 });
                });

                gsap.utils.toArray(".ani_lr2").forEach(function (entry) {
                    delay = $(entry).attr('data-delay');
                    if ($(entry).attr('data-dur')) {
                        dur = $(entry).attr('data-dur');
                    }
                    if ($(entry).attr('data-tp')) {
                        tp = $(entry).attr('data-tp');
                    }
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, { delay: delay, duration: dur, opacity: 1, x: 0 });
                });


                //height 0~100
                var height1 = gsap.utils.toArray(".ani_height1");

                height1.forEach(function (entry) {
                    var tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: entry,
                            start: "top " + tp
                        }
                    });
                    tl.to(entry, {
                        duration: 1.5,
                        height: 0
                    });
                });
            }
            // green_sock




            green_sock();

        });

    </script>
</head>

<body>

    <div class="container">
        <div class="bg">
            화면..
        </div>
        <div>
            <div class="box box1 ani_lr"><span></span></div>
        </div>
        <div>
            <div class="box box2 ani_tb"><span></span></div>
        </div>
        <div>
            <div class="box box3 ani_rl"><span></span></div>
        </div>
        <div>
            <div class="box box4 ani_bt"><span></span></div>
        </div>
        <div>
            <div class="box box1 ani_lr" data-dur="0.5"><span>data-dur="0.5"</span></div>
        </div>
        <div>
            <div class="box box2 ani_tb" data-dur="1"><span>data-dur="1"</span></div>
        </div>
        <div>
            <div class="box box3 ani_rl" data-dur="1.5"><span>data-dur="1.5"</span></div>
        </div>
        <div>
            <div class="box box4 ani_bt" data-dur="2"><span>data-dur="2"</span></div>
        </div>
        <div>
            <div class="box box1 ani_lr" data-dur="1.5" data-delay="1"><span>data-delay="1"</span></div>
        </div>
        <div>
            <div class="box box2 ani_tb" data-dur="1.5" data-delay="1.5"><span>data-delay="1.5"</span></div>
        </div>
        <div>
            <div class="box box3 ani_rl" data-dur="1.5" data-delay="2"><span>data-delay="2"</span></div>
        </div>
        <div>
            <div class="box box4 ani_bt" data-dur="1.5" data-delay="3"><span>data-delay="3"</span></div>
        </div>
        <div>
            <div class="box box1 ani_lr" data-dur="1.5" data-delay="0" data-tp="50%"><span>data-tp="50%"</span></div>
        </div>
        <div>
            <div class="box box2 ani_tb" data-dur="1.5" data-delay="0"><span></span></div>
        </div>
        <div>
            <div class="box box3 ani_rl" data-dur="1.5" data-delay="0"><span></span></div>
        </div>
        <div>
            <div class="box box4 ani_bt" data-dur="1.5" data-delay="0"><span></span></div>
        </div>


    </div>



</body>

</html>

 

greensock 스크롤 트리거를 커스텀해서

쓰기 쉽게 만들어 봤습니다.

 

greensock은 한번 건들면 양이 방대해서

무서운.. 그만큼 공부 할양이 많은 거죠..

그래도 재밌게 다음엔 더 재밌는 것을 커스텀해볼 예정입니다.