gsap 버튼(정지, 재시작,일시정지..)

gsap 애니메이션을 통제하는 버튼 만들기

gsap 버튼(정지, 재시작,일시정지..)

사용환경 설정

우선 cdn을 가져와서 붙여준다.

 

gsap cdn 복사하러 가기

 

gsap 버튼

 

gsap 버튼을 만드는 방법

예제 코드를 드리도록 하겠습니다.

.box css는 알아서 네모 만들어서 테스트 해보시길 바랍니다.

 

html 코드

<div class="box"></div>


<div id="controller">
  <button class="play">play</button>
  <button class="pause">pause</button>    
  <button class="resume">resume</button>    
  <button class="reverse">reverse</button>
  <button class="restart">restart</button>
</div>

 

 

 

스크립트 코드

document.addEventListener('click', function (event) {
  if (event.target.matches('button')) {
    event.target.focus()
  }
  
})                                                                                                     
  let tween = gsap.to('.box',{x:300, duration:3, paused:true})




document.querySelector('.play').addEventListener('click',()=>{ tween.play( )})
document.querySelector('.pause').addEventListener('click',()=>{ tween.pause( )})
document.querySelector('.resume').addEventListener('click',()=>{ tween.resume( )})
document.querySelector('.reverse').addEventListener('click',()=>{ tween.reverse( )})
document.querySelector('.restart').addEventListener('click',()=>{ tween.restart( )})

 

let tween = gsap.to('.box',{x:300, duration:3, paused:true})

- paused를 넣어줘야 하는 이유는 이것을 안넣어주면 브라우저에 로딩 됫을경우 바로 play가 시작되기 때문이다.

- 변수로 만들어서 여러 통제를 할수 있다.

 

 

 

 gsap 사용법(핵심만 간단)

gsap 사용법(핵심만 간단)