gsap에서 반복되는 애니메이션을 한 번에 통제하는 방법을 알려드리도록 하겠습니다. 사용환경 설정 우선 cdn을 가져와서 붙여준다. gsap cdn 복사하러 가기 stagger 예제 코드를 드리도록 하겠습니다. . box css는 알아서 네모 만들어서 테스트해보시길 바랍니다. html 코드 gsap.to(".box", {y:-50, stagger:{ each:0.2(or amount:1), from:"end" } }); gsap의 stagger의 속성은 . box 클래스를 갖고 있는 코드들에게 동일한 애니메이션을 주면서 시차를 주는 것입니다. each는 왼쪽부터 하나씩 실행되면 0.2의 시차를 갖고 실행됩니다. amount:1을 1초 동안 모든 box가 동일한 시차를 갖고 애니메이션이 실행된다. from..

gsap 애니메이션을 통제하는 버튼 만들기 사용환경 설정 우선 cdn을 가져와서 붙여준다. gsap cdn 복사하러 가기 gsap 버튼을 만드는 방법 예제 코드를 드리도록 하겠습니다. .box css는 알아서 네모 만들어서 테스트 해보시길 바랍니다. html 코드 play pause resume reverse restart 스크립트 코드 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..

퍼블리싱을 하는 사람이라면 꼭 사용해야 할 gsap을 알려드리도록 하겠습니다. 간단하면서 화려한 애니메이션을 제공하는 gsap 사용법을 알려드리도록 하겠습니다. 목차 사용환경설정 gsap 애니메이션의 범위 설정하기 gsap 애니메이션 반복 설정 사용환경 설정 우선 cdn을 가져와서 붙여준다. gsap cdn 복사하러 가기 애니메이션 범위 설정하기 기본 정의 gsap. 범위(’ 타깃’, {옵션(오브젝트)}) gsap.to() ~까지 —> 타깃을 오브젝트로 설정한 위치까지 옮겨라. ex) gsap.to('. hero', {x:100, y:100,}); === 해석: 클래스 hero을 x로 100y로 100만큼 이동해라. gsap.from() ~부터 —> 움직인 타깃을 오브젝트를 사용하면서 원래 위치로 옮겨라..