웹 애니메이션은 현대 웹 디자인에서 매우 중요한 역할을 합니다. 사용자 경험을 향상시키고 웹사이트를 더 동적이고 재미있게 만들어 줄 수 있습니다. 그중에서도 GSAP (GreenSock Animation Platform)은 가장 인기있는 자바스크립트 애니메이션 라이브러리 중 하나입니다. GSAP를 사용하면 웹 애니메이션을 쉽게 구현할 수 있고, 보다 화려하고 효과적인 애니메이션을 만들 수 있습니다.
이 포스트에서는 GSAP를 사용하여 만든 웹 애니메이션 포트폴리오 및 쇼케이스를 소개합니다. 다양한 예제와 함께 GSAP가 제공하는 다양한 애니메이션 기능을 살펴보고, 웹 디자인에 GSAP를 활용하는 방법을 알아보겠습니다.
목차
포트폴리오 #1: 로딩 애니메이션
이 포트폴리오 예제는 웹 페이지가 로딩될 때 나타나는 로딩 애니메이션을 구현한 것입니다. GSAP의 강력한 타이밍 기능을 활용하여 로딩 애니메이션을 만들 수 있습니다.
const loader = document.querySelector('.loader');
gsap.to(loader, {
duration: 1,
opacity: 0,
onComplete: () => {
loader.style.display = 'none';
}
});
위의 코드에서는 .loader 클래스를 가진 요소를 찾아서, 1초 동안 투명도를 0으로 애니메이션화시킵니다. 애니메이션이 완료된 후에는 display 속성을 none으로 변경하여 로딩 애니메이션이 사라지도록 설정합니다.
포트폴리오 #2: 스크롤 애니메이션
다음으로는 스크롤 이벤트에 따라 웹 페이지의 요소가 부드럽게 움직이는 애니메이션을 구현한 포트폴리오 예제입니다. 이런 종류의 애니메이션은 사용자가 스크롤할 때 웹 페이지의 요소들이 자연스럽게 변화하는 효과를 줄 수 있습니다.
const elements = document.querySelectorAll('.animate-on-scroll');
elements.forEach(element => {
gsap.from(element, {
duration: 1,
y: 100,
opacity: 0,
scrollTrigger: {
trigger: element,
start: 'top 80%',
}
});
});
위의 코드에서는 .animate-on-scroll 클래스를 가진 요소들을 찾아서, 요소가 화면에 보여질 때까지 1초 동안 애니메이션을 주어 요소를 위로 100px만큼 이동시키고, 투명도를 0에서 1로 변경합니다. scrollTrigger 속성을 사용하여 스크롤 시작 위치를 조정할 수 있습니다.
포트폴리오 #3: 마우스 호버 애니메이션
마지막으로 마우스 호버 시 웹 요소가 반응하는 애니메이션을 구현한 포트폴리오 예제입니다. 이런 종류의 애니메이션은 사용자의 상호작용에 따라 웹 요소가 변화하는 효과를 줄 수 있습니다.
const elements = document.querySelectorAll('.hover-animation');
elements.forEach(element => {
element.addEventListener('mouseenter', () => {
gsap.to(element, {
scaleX: 1.2,
scaleY: 1.2,
duration: 0.3
});
});
element.addEventListener('mouseleave', () => {
gsap.to(element, {
scaleX: 1,
scaleY: 1,
duration: 0.3
});
});
});
위의 코드에서는 .hover-animation 클래스를 가진 요소들을 찾아서, 요소에 마우스가 올라갔을 때와 마우스가 떠났을 때의 애니메이션을 정의합니다. mouseenter 이벤트와 mouseleave 이벤트를 사용하여 요소의 scaleX와 scaleY를 변경하여 크기가 변하는 애니메이션 효과를 줍니다.
결론
GSAP를 사용하여 웹 애니메이션을 구현하는 것은 웹 디자인을 더욱 흥미롭고 동적으로 만들어 줄 수 있습니다. 이 포트폴리오 및 쇼케이스 예제들을 통해 GSAP의 다양한 애니메이션 기능을 살펴보고, 자신만의 웹 애니메이션을 구현해보세요. GSAP 공식 문서 및 자료를 참고하면 더욱 다양하고 멋진 웹 애니메이션을 만들 수 있을 것입니다.