[javascript] GSAP를 활용한 드로잉 애니메이션 및 스케치 효과
GSAP(GreenSock Animation Platform)는 JavaScript로 웹 애니메이션을 구현할 수 있는 강력한 라이브러리입니다. 이번 글에서는 GSAP를 사용하여 드로잉 애니메이션과 스케치 효과를 구현하는 방법에 대해 알아보겠습니다.
1. 드로잉 애니메이션 구현하기
드로잉 애니메이션은 원하는 이미지나 요소를 차례대로 그리는 효과를 주는 것을 말합니다. GSAP는 애니메이션 효과를 적용하기 위해 다양한 기능을 제공합니다.
// HTML 요소 선택
const element = document.querySelector('.drawing-element');
// 드로잉 애니메이션 적용
gsap.to(element, {
duration: 2, // 애니메이션 지속시간
drawSVG: '0%', // 드로잉 애니메이션 효과
});
위의 코드는 drawing-element라는 CSS 클래스가 적용된 HTML 요소를 선택하고, GSAP의 to() 메서드를 사용하여 드로잉 애니메이션 효과를 적용하는 예시입니다. duration 속성은 애니메이션의 지속 시간을 설정하고, drawSVG 속성은 원하는 드로잉 애니메이션 효과를 설정합니다.
2. 스케치 효과 구현하기
스케치 효과는 사용자의 입력에 따라 이미지가 흐릿하게 그려지는 효과를 말합니다. GSAP를 활용하여 스케치 효과를 구현하는 방법은 다음과 같습니다.
// HTML 요소 선택
const element = document.querySelector('.sketch-element');
// 스케치 효과 적용
gsap.to(element, {
duration: 1, // 애니메이션 지속시간
filter: 'blur(10px)', // 흐릿하게 만드는 효과
});
위의 코드에서는 sketch-element라는 CSS 클래스가 적용된 HTML 요소를 선택하고, to() 메서드를 사용하여 스케치 효과를 적용하는 예시입니다. duration 속성은 애니메이션의 지속 시간을 설정하고, filter 속성을 사용하여 요소를 흐릿하게 만드는 효과를 추가합니다.
결론
GSAP를 활용하면 드로잉 애니메이션과 스케치 효과를 쉽게 구현할 수 있습니다. 위에서 소개한 예시 코드를 기반으로 창의력을 발휘하여 다양한 애니메이션 효과를 구현해보세요.