JS와 GSAP stagger API 로 만드는 스트리밍 써클 애니메이션!

이전 애니메이션 | 스크롤 트리거 애니메이션

바닐라 자바스크립트를 이용한 스크롤 트리거 애니메이션의 원리와 구현

---

 

들어가는 말

최근에 데이터 패킷이 네트워크를 통해 스트리밍 되는 시뮬레이션 영상을 보게 되었고, 이에 영감을 받아서 제작하게 되었습니다.

 
 

동작원리

해당 애니메이션의 동작 원리는 GSAP Stagger API 에 있습니다. Stagger API 는 애니메이션이 각 요소에 적용될 때, 요소와 요소 사이에 실행되는 간격을 두는 것으로 언뜻보면 애니메이션 delay 를 설정하는 것과 유사해 보이지만, 차이점이 있다면, Stagger 는 애니메이션이 실행되고 종료되는 시점에 차이만 있을 뿐 마우스 포인터가 이동할 때 각 요소는 해당 마우스 포인터의 위치를 공통으로 기억하고 있다가 순차적으로 해당 위치로 이동하게 된다는 점 입니다.

 

HTML

cursor 는 향후 추가할 .circle 요소의 부모 컨테이너 역할을 하므로 추가해줍니다.

<div class="cursor"></div>

 

CSS

/* 여백 초기화 */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* 배경 초기화 */
body {
  width:100%;
  height:100vh;
  background:#333;
}

/* circle 요소의 컨테이너 역할*/
.cursor {
  overflow:hidden;
  width: 10px;
  hewight:10px;
}

/* 각 막대 요소를 만듭니다. 이들은 모였을 때 하나의 써클을 형성하게 됩니다*/
.circle{
  opacity:0; /* 처음에는 보이지 않도록 숨겨줍니다.*/
  visibiity:hidden; /* 처음에는 보이지 않도록 숨겨줍니다.*/
  width:80px;
  height:3px;
  background:gold;
  border-radius:50%;
  color:white;
  position:absolute; /* mousemove 를 통해 조작하므로 꼭 설정해줍니다.*/
}

 
 

JS

const body = document.querySelector('body')
const cursor = document.querySelector('.cursor')

// 360 개의 써클을 구성한 막대 요소를 생성합니다.
const circle = []
for(let i=0; i<360; i++) {
  let c = document.createElement('div')
  c.classList.add('circle')
  circle.push(c)
}

// 생성된 모든 막대기를 cursor 요소에 추가합니다.
cursor.append(...circle)

// body 요소에 mousemove 이벤트를 등록하고, 콜백으로 gsap 트윈을 적용합니다.
body.addEventListener('mousemove',(e)=>{
  gsap.to('.circle',{
    x:e.clientX,
    y:e.clientY,
    visibility:'visible',
    rotation:(i)=>{
       return i
    },
    stagger:0.01,
    alpha:(i)=>{
      return i
    },
  })
})

 
코드 자체는 특별할 게 없으므로, 핵심적인 부분만 별도 설명하겠습니다.
 

gsap.to

gsap.to는 GreenSock Animation Platform(GSAP)의 주요 메서드 중 하나로, 애니메이션을 정의하고 실행하는 데 사용됩니다. 즉,  특정 요소를 지정된 속성 값으로 애니메이트합니다
 
사용법은 아래와 같으며, target 이 되는 부분이 HTML 요소의 class 혹은 id 를 지정합니다. 물론, querySelector 를 통해 DOM 객체로 부터 읽어온 요소의 참조도 가능합니다(ex. const div = document.querySelector('div') -> gsap.to(div,{}) ) 

gsap.to(target, { duration: 1, x: 100 });

 

적용된 각 gsap.to 속성

- x: e.clientX: 마우스의 X 좌표로 요소를 이동시킵니다.
- y: e.clientY: 마우스의 Y 좌표로 요소를 이동시킵니다.
- visibility: 'visible': 요소를 가시화합니다.
- rotation: (i) => { return i; }: 요소의 회전 각도를 설정하는데, 인덱스 i를 그대로 반환합니다. 이는 요소가 배열에 있을 때 인덱스를 사용하여 개별적으로 회전 각도를 다르게 설정할 수 있습니다. 각 i 는 트윈으로 생성된 .circle 배열의 인덱스를 의미하며 현재 생성된 요소가 360개 이므로 i=0 ~ 360 이 됩니다. 
- stagger: 0.01: 애니메이션이 여러 요소에 적용될 때 각 요소의 애니메이션 시작을 0.01초씩 지연시킵니다. 이 때 마우스 포인터가 위치하는 좌표를 모든 요소가 각각 개별적으로 기억해둡니다.
- alpha: (i) => { return i; }: 요소의 투명도를 설정하는데, 인덱스 i를 그대로 반환합니다.  
 

전체코드

모든 코드가 적용된 결과입니다. 

See the Pen 스트리밍 써클 by youngwan2 (@youngwan2) on CodePen.

 
 

나가는 말

오늘은 GSAP Stagger 를 사용하여 스트리밍 느낌의 마우스 애니메이션을 만들어보았습니다. 코드 자체가 어려운 것은 없기 때문에 한 번 뜯어보시고 여러분의 입 맛에 맞는 재밌는 효과를 만들어보는 기회가 되길 바라며 이만 물러가봅니다. 감사합니다.