[javascript] GSAP와 바운싱 및 이징(Easing) 효과의 적용 방법

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)은 JavaScript를 사용하여 웹 애니메이션을 만들기 위한 강력한 라이브러리입니다. GSAP를 사용하면 간단하게 바운싱 및 이징 효과를 적용할 수 있습니다. 이번 블로그 포스트에서는 GSAP와 바운싱 및 이징 효과를 적용하는 방법을 알아보겠습니다.

바운싱 효과 적용하기

바운싱 효과는 요소가 화면 내에서 튀어나가는 효과를 만들어줍니다. GSAP의 to() 메서드를 사용하여 바운싱 효과를 적용할 수 있습니다. 아래는 바운싱 효과를 적용하는 예시 코드입니다.

gsap.to(".box", {
  x: 200,
  duration: 1,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true,
});

위 코드에서 .box라는 클래스를 가진 요소가 오른쪽으로 200px 이동하는 바운싱 효과를 적용합니다. duration은 애니메이션의 지속 시간을 나타내며, ease는 이징(Easing) 효과를 설정합니다. repeat은 애니메이션이 반복되는 횟수를 설정하며, -1을 설정하면 무한 반복됩니다. yoyo는 애니메이션이 완료된 후 다시 역방향으로 애니메이션을 재생하는 옵션입니다.

이징 효과 적용하기

이징(Easing) 효과는 애니메이션의 모션을 부드럽게 전환해주는 효과를 만들어줍니다. GSAP에서는 다양한 이징 함수를 제공하고 있습니다. 아래는 이징 효과를 적용하는 예시 코드입니다.

gsap.to(".box", {
  x: 200,
  duration: 1,
  ease: "elastic.out(1, 0.3)",
});

위 코드에서 .box라는 클래스를 가진 요소가 오른쪽으로 200px 이동하는 이징 효과를 적용합니다. 이징 함수로는 “elastic.out(1, 0.3)”을 사용했습니다. 여기서 첫 번째 인자는 진폭(amplitude)을 나타내고, 두 번째 인자는 주기(period)를 나타냅니다. 이 진폭과 주기를 조절하여 다양한 이징 효과를 만들 수 있습니다.

결론

GSAP를 사용하면 간단하게 바운싱 및 이징 효과를 적용할 수 있습니다. 바운싱 효과로 요소를 화면 내에서 튀어나오게 만들고, 이징 효과로 애니메이션을 부드럽게 전환할 수 있습니다. GSAP의 다양한 기능을 활용하여 웹 애니메이션을 더욱 멋지게 표현해보세요.

참고 자료

GSAP 공식 문서: https://greensock.com/docs
Easing Functions Cheat Sheet: https://easings.net/ko