gsap로 스크롤 애니메이션 만들기

gsap로 스크롤 애니메이션 을 만들기 위해서는 몇 가지 단계를 따라야 합니다. 먼저, gsap을 설치하고 가져와야 합니다. 그런 다음 스크롤 위치와 연관된 요소들의 애니메이션을 정의하고 구현해야 합니다. 이를 위해 ScrollTrigger를 사용하여 스크롤 이벤트를 감지하고 애니메이션을 트리거해야 합니다. 마지막으로, 애니메이션이 부드럽고 자연스럽게 이루어지도록 적절한 이징 및 시간 설정을 해야 합니다. 어떻게 이러한 단계를 처리하는지 이번 글에서 알아봅니다.

gsap, scrollTrigger 가져오기

gsap와 scrollTrigger는 CDN에서 간편히 불러올 수 있습니다. HTML에 <head> 태그에 다음과 같은 코드를 붙여넣어 javascript를 불러오세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>

로컬에서 gsap를 불러오고 싶다면, https://gsap.com/docs/v3/Installation/ 를 참고하세요.

스크롤 애니메이션 할 환경 만들기

애니메이션을 만드려면 먼저 움직일 Element가 하나 있어야겠지요. HTML에 <body> 태그 안에 해당 코드를 붙여넣어 100px * 100px 짜리 원을 하나 만들어줍니다.

<svg width="100" height="100" class="circle">
    <circle cx="50" cy="50" r="50" fill="black" />
</svg>

또한, 사이트 아래로 스크롤이 가능하게 하기 위해, body에 margin-bottom 속성을 통해 2000px정도의 공간을 확보하겠습니다. 원도 자유자재로 움직이게 하기 위해 position 속성을 absolute로 설정하겠습니다.

body{
    margin-bottom: 2000px;
}
.circle {
    position: absolute;
}

이렇게 코드를 작성하면, 스크롤되는 화면에 원이 하나 생겼습니다.

스크롤 애니메이션 만들기

이 글에서는 만들어진 이 원을 스크롤 하면 할수록 오른쪽 아래로 움직이도록 만들어보겠습니다. 먼저, script태그를 이용하여 javascript를 사용하는데, 스크립트를 windows.onload 안에 작성하거나, body의 맨 아래에 넣거나, head에 넣고 defer 속성을 적용시키는 등, DOM이 모두 로드되고 나서 실행해야 합니다.

gsap.to(".circle", { //움직일 대상의 selector
    scrollTrigger: {
        trigger: ".circle", // 스크롤을 감지할 대상의 selector
        start: "0% 0%", // trigger의 0% 지점과 viewport의 0% 지점이 만나면 애니메이션 시작
        end: "100% 100%", // trigger의 100% 지점과 viewport의 100% 지점이 만나면 애니메이션 종료
        scrub: 1, // 반대로 스크롤할때도 애니메이션을 반대로 적용할지 여부
        markers: true, // trigger의 시작, 끝 지점을 보여줌 (디버깅용)
    },
    ease: "none", // 애니메이션의 속도 곡선
    top: "50%", // 애니메이션의 속성
    left: "50%", // 애니메이션의 속성
    transform: "translate(-50%, -50%)", // 애니메이션의 속성
});

이 코드를 붙여넣고 실행해 보면 아래 사진과 같은 디버깅용 마커가 생성됩니다.

해당 마커에서 scroller-start 지점과 start지점이 scrollTrigger의 start부분의 0% 와 0% 부분이라는 것을 알 수 있습니다. scroller-start가 start마커 아래로 내려가기 시작하면 애니메이션이 시작됩니다. end는 무조권 scroller-end보다 위에 있으므로 start만 닿는 순간 애니메이션이 모두 완료되며, scrollTrigger 밖에 적어둔 애니메이션 속성에 따라 움직이게 됩니다. 결과적으론 화면의 정 중앙으로 이동하게 되는 것이죠.

결과

Live Demo

이와 같이 스크롤을 하였을 때 원이 왼쪽 상단에서 화면 중앙으로 이동하는 것을 볼 수 있습니다.

응용 – 텍스트 나타내기

Apple의 공식 홈페이지처럼 스크롤 애니메이션으로 스크롤했을때 텍스트가 나타나게 해보겠습니다. 원 element와 script태그를 지우고 새로 시작하겠습니다.

먼저 텍스트를 <body>태그 안에 생성해주겠습니다.

<p>스크롤 애니메이션 데모</p>

텍스트의 모양을 설정하고, 텍스트가 스크롤되어 나오도록 margin-top 속성을 통해 아래로 밀어줍니다.

p {
    text-align: center;
    margin-top: 2000px;
    font-size: 50px;
    font-weight: bolder;
}

스크롤 애니메이션 스크립트를 작성하겠습니다. 이번에는 fromTo 함수를 사용하였습니다. fromTo는 초기상태와 애니메이션 완료상태를 각각 지정할 수 있습니다. 해당 코드에선 초기 불투명도 0, y 100에서 불투명도 1, y 0(제자리)으로 바뀌는 형태로 애니메이션을 진행합니다.

gsap.fromTo(
    "p", // 스크롤 애니메이션을 적용할 대상
    { opacity: 0, y: 100 }, // 초기상태
    {
        opacity: 1, //적용할 상태
        y: 0, //적용할 상태
        scrollTrigger: {
            trigger: "p",
            start: "100% 80%",
            end: "100% 100%",
            scrub: 1,
            markers: true,
        },
    }
);