개발공부 임고미

공식 사이트 트윈 : greensock.com/docs/v3/GSAP/Tween 1. callbackScope( onStart, onUpdate, onComplete 등) 주로 쓰는것 : onComplete tween이 완료될때 실행시킬 함수가 있는경우 사용합니다. 2. delay (지연) 지연을 주고 싶을때 사용합니다. 3. duration (기간) 얼마나 걸릴지 결정해줍니다. 설정해주지 않는다면 0.5가 기본값입니다. 4. repeat (반복) 말그대로 반복을 의미합니다. Default는 0 이며, 반복하고 싶은 숫자를 넣어주면 됩니다. 무제한으로 실행시키고싶으면 -1 을 넣어줍니다. 5. yoyo 참고 : css animation 효과인 animation-direction: alternate; 와 ..

트윈맥스 컨트롤하기 : greensock.com/docs/v3/GSAP/Tween Tween 인스턴스를 제어하기 위해선 변수에 할당해야합니다. 가능한 제어는 여러가지가있습니다. 세팅 const test = document.querySelector('.test'); let tween = gsap.to(test, {duration: 4, rotation: 360}); 1. play ( 실행 ) 트윈맥스는 기본적으로 즉시 실행됩니다. 따라서, 단순 실행이 목적이라면 따로 인스턴스를 제어할 필요가 없습니다! . play(from : Number , suppressEvents : Boolean ) : self from : 재생 시작하는 시간 (1초부터 보여줘! 0초부터 보여줘!!!) suppressEvents: ..

공식사이트 : greensock.com/ 트윈맥스는, 다양한 애니메이션 모션을 만들기에 수월한 라이브러리다. 간단한 몇가지만 익혀놔도 다양하게 사용 가능하므로 모션만들일이 많다면 한번쯤 알아놓으면 좋은것같다! gsap객체는 Tween과 Timeline을 만들고 제어하는 다양한 메서드와 속성이 있다. Tween 바로 실행되어야하는 간단한 모션만들때 유용 Timeline 다양한 메서드를 사용해 모션을 컨트롤할 수 있습니다. pause () , play () , progress () , reverse () , timeScale () 등등 아래의 메소드드 들은, gsap의 메소드들입니다. 다양한 메소드가 있지만, 여기서 다룰건 .set(), .to(), .from(), .fromTo, .killTweensOf(..

트윈맥스는 다양한 애니메이션을 만들기에 너무 유용한 라리브러리 입니다. 또 리액트도 지원해줘서 다양하게 활용이 가능합니다. greensock.com에 문서정리가 잘 되어있어서 딱히 블로그 글을 읽지 않고 원본 문서들만봐도 충분히 활용 할 수 있겠지만 실무를 하면서 유용하게 자주 사용한던 메소드와 기능들을 위주로 블로그글을 적어나가보고자 합니다! installation : greensock.com/docs/v3/Installation 1. CDN 간단하게 cdn 으로 불러올 수 있습니다. html 하단에 다음과 같이 불러옵니다. js에서 사용하는 방법입니다. 간단하게 gsap으로 불러와, 문법에 맞게 작성해주면 됩니다. //js gsap.from('.circle', 5, { x: 500, opacity: ..