먼저, TweenMax 라이브러리를 HTML 페이지에 추가해야 합니다. <script> 태그를 사용하여 TweenMax CDN 링크를 추가하거나, 로컬로 다운로드하여 사용할 수 있습니다. 다음은 라이브러리를 추가하는 예시 코드입니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
이제 애니메이션을 적용할 요소를 선택해야 합니다. 요소를 선택하는 방법은 여러 가지가 있지만, 예시로 querySelector를 사용하여 선택하도록 하겠습니다.
const element = document.querySelector('#myElement');
투명도를 조절하려면 TweenMax.to() 메서드를 사용해야 합니다. 다음은 요소의 투명도를 애니메이션으로 조절하는 예시 코드입니다.
TweenMax.to(element, 1, { opacity: 0.5 });
위의 코드에서 element는 애니메이션을 적용할 요소를 가리키는 변수입니다. 1은 애니메이션의 지속시간을 나타내는 값으로, 여기서는 1초 동안 애니메이션이 진행됩니다. { opacity: 0.5 }는 애니메이션의 목표값을 나타내는 객체입니다. 여기서는 요소의 투명도를 0.5로 설정하게 됩니다.
만약, 색상을 조절하려면 TweenMax.to() 메서드의 backgroundColor 속성을 사용해야 합니다. 다음은 요소의 배경색을 애니메이션으로 조절하는 예시 코드입니다.
TweenMax.to(element, 1, { backgroundColor: 'red' });
위의 코드에서 { backgroundColor: 'red' }는 요소의 배경색을 빨간색으로 설정하라는 의미입니다. 원하는 색상을 지정하여 애니메이션을 만들 수 있습니다.
이와 같은 방식으로, TweenMax를 사용하여 애니메이션의 투명도와 색상을 조절할 수 있습니다. TweenMax에는 다양한 효과와 옵션을 사용할 수 있으니, 필요에 따라 문서를 참조하시기 바랍니다.
참조: