[javascript] TweenMax의 프리셋(preset) 애니메이션을 어떻게 사용할 수 있나요?

27 Nov 2023

javascript

프리셋 애니메이션을 사용하기 위해 다음의 단계를 따라주세요:

TweenMax 라이브러리를 다운로드하고 웹 페이지에 포함시킵니다. HTML 파일의 <head> 부분에 다음과 같은 코드를 추가합니다:

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

애니메이션을 적용할 HTML 요소를 선택합니다. 예를 들어, <div> 요소를 선택하려면 다음과 같이 작성합니다:

const myElement = document.querySelector('div');

선택한 요소에 프리셋 애니메이션을 적용합니다. 다음은 fadeIn() 프리셋 애니메이션을 적용하는 예시입니다:

TweenMax.from(myElement, 1, {
    opacity: 0,
    ease: Power2.easeInOut
});

위의 코드에서 from() 함수는 선택한 요소를 페이드 인하는 애니메이션을 생성하는 역할을 합니다. 첫 번째 인자로는 애니메이션을 적용할 요소를 전달하고, 두 번째 인자로는 애니메이션의 지속 시간을 전달합니다. 마지막 인자는 애니메이션의 속성과 옵션을 설정하는 객체입니다. opacity 속성을 0에서 1로 변화시킴으로써 페이드 인 효과를 생성하고, ease 옵션으로 애니메이션의 이징을 설정합니다.

다양한 프리셋 애니메이션과 옵션을 사용하여 더 다채로운 애니메이션 효과를 구현할 수 있습니다. TweenMax의 공식 문서를 참고하면 더 많은 프리셋 애니메이션과 사용 방법을 확인할 수 있습니다.