GSAP을 사용하여 랜덤하게 움직이는 애니메이션 구현하기

GSAP을 사용하여 랜덤한 위치로 움직이는 애니메이션을 구현하려고 한다.

1. CSS

 .solution-sec { 
 	position: relative; 
 	--translate-x: 0; 
 	--translate-y: 0; 
 }
 
 .solution-sec::before { 
   display: block; 
   position: absolute; 
   right: -10%; 
   top: -70%; 
   z-index: -1; 
   width: 31.25%; 
   min-width: 300px; 
   padding-top: 31.25%; 
   border-radius: 50%; 
   background-color: var(--em-color-11); 
   opacity: 0.08; 
   content: ''; 
   filter: blur(50px); 
   transform: translateX(var(--translate-x)) translateY(var(--translate-y));
} 

내가 애니메이션을 적용할 요소는 가상요소이기 때문에 바로 애니메이션 적용이 불가능하다. 부모 요소에 변수를 정의해주고, 실제 애니메이션이 적용될 가상요소에 변수값을 넣어준다.

2. JavaScript

let animateInterval;

function initCicleAnimate() {
  if (animateInterval) { // 이미 애니메이션이 존재할 경우
    clearInterval(animateInterval); // 초기화해준다
  }
  
  if (window.innerWidth > 768) { // 768px 이상 pc 사이즈에서만 동작하도록
    function circleAnimate() {
      	const randomX = Math.random() * 200 - 200; // -200 ~ 0 사이의 랜던함 값 생성
      	const randomY = Math.random() * 200 - 50; // -50 ~ 150 사이의 랜덤한 값 생성

      	gsap.to(".solution-sec", { // 부모 요소에 gsap 애니메이션 적용
        	duration: 4,
        	"--translate-x": `${randomX}%`, // 변수에 랜던함 값 설정
        	"--translate-y": `${randomY}%`, // 변수에 랜던함 값 설정
        	ease: "power1.inOut",
        	yoyo: true, // 역방향으로 재생되도록
        	repeat: -1, // 무한 반복
      	});
    }

    circleAnimate();
    animateInterval = setInterval(circleAnimate, 4000);
  } else { // 768px 이하 모바일 사이즈에서는 애니메이션 제거
    gsap.killTweensOf(".solution-sec"); // 애니메이션 중지
    // 초기값으로 설정
    gsap.set(".solution-sec", { "--translate-x": 0, "--translate-y": 0 });
  }
}

initCicleAnimate(); // 초기 함수 호출
// debounce 적용하여 0.2초마다 initCicleAnimate 함수 호출
const debouncingInitCircleAnimate = debounce(initCicleAnimate, 200); 
// resize 이벤트에 디바운스 함수 연결
window.addEventListener("resize", debouncingInitCircleAnimate);