GSAP

---

문득 css 와 js 로 애니메이션 효과를 주고 있다가 코드가 난잡하고 복잡해져서
좋은 라이브러리를 찾아보던 와중 gsap 이라는 좋은 라이브러리를 찾게 되어 정리할 겸 쓰게 됐습니다.

📚 배경

GSAP (GreenSock Animation Platform)은 웹 애니메이션을 생성하고 제어하는 JavaScript 라이브러리입니다.
GSAP가 나오게 된 이유는 웹 애니메이션의 필요성과 요구사항이 증가함에 따라 기존의 애니메이션 기술과 라이브러리로는 제공하기 어려운 기능을 제공하려는 목적에서 등장했습니다.
크로스 브라우징, 성능 최적화, API 의 직관성, 커뮤니티와 생태계 등 많은 이점이 있습니다.

결국 GSAP는 웹 개발자들에게 웹사이트와 웹 애플리케이션을 보다 인상적으로 만들 수 있는 강력한 도구로 자리 잡았으며, 그 진화를 통해 웹 애니메이션 개발을 훨씬 쉽게 만들어 주고 있습니다.

📔 사용법

사용하기 전에 script 로 불러오거나 cdn 등을 이용하셔야 합니다.

HTML

<div class="box green"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  backgroundColor: #red;
}

JS

gsap.to(".box", 2, { 
  x: 200,
});

---

method : gsap 에서 제공하는 규격입니다.
target(s) : 내가 적용하고 싶은 html 의 class 입니다.
variables : target(s) 의 작동 방식을 설정합니다.

이 외에도 밑에 코드처럼 다양한 기능을 넣을 수 있습니다.

gsap.to(".box", { 
  duration: 2,
  x: 200,
  rotation: 360,
});

duration : 작동 시간을 정의합니다.
x : x축으로 얼마만큼 이동할지 정의합니다.
rotation: 어느정도 회전할지 정의합니다.

실전 예제

function random(min, max) {
    // `.toFixed()`를 통해 반환된 '문자 데이터'를,
    // `parseFloat()`을 통해 소수점을 가지는 '숫자 데이터'로 변환
    return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

function floatingObject(selector, delay, size) {
    gsap.to(
        selector, // 선택자
        random(1.5, 2.5), // 애니메이션 동작 시간
        {
            delay: random(0, delay), // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정.
            y: size,                // `transform: translateY(수치);`와 같음. 수직으로 얼마나 움직일지 설정.
            repeat: -1,             // 몇 번 반복하는지를 설정, `-1`은 무한 반복.
            yoyo: true,             // 한번 재생된 애니메이션을 다시 뒤로 재생.
            ease: Power1.easeInOut  // Easing 함수 적용.
        }
    )
}
floatingObject('.floating1', 1, 15)
floatingObject('.floating2', .5, 15)
floatingObject('.floating3', 1.5, 20)

이렇게 무궁무진하게 사용할 수 있습니다.
더 배우고 싶은 내용은
https://greensock.com/get-started/ 를 참고하시면 됩니다.