개발공부 임고미

공식문서 : greensock.com/docs/v3/GSAP/Timeline 타임라인이 트윈맥스의 꽃입니당! 어렵지 않으니 꼭 잘 읽어보세요! 타임라인은, 연결되는 모션을 만들어줄때 유용하게 사용할 수 있습니다. 만약, timeline을 사용해주지 않고 연결된 모션을 만든다고 생각한다면 delay를 이용해 모션 끝나는 시간을 계산해 delay를 주어 연결된 모션을 만들어야할것입니다! 트윈맥스에서도 마찬가지로, timeline을 사용하지 않고, 일반 gsap을 사용해서 만든다면 delay를 이용해야합니다. // WITHOUT Timelines (only using tweens with delays): gsap.to("#id", {x: 100, duration: 1}); gsap.to("#id", {y: 5..

공식 사이트 트윈 : 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: ..

1. Increment and decrement operators let counter = 2; const preIncrement = ++counter; // 앞에 연산자가 있는 경우, 더해주고 할당한다! counter = counter + 1; preIncrement = counter; const preIncrement = counter++; // 뒤에 연산자가 있는 경우, 할당해주고 더해준다! preIncrement = counter; counter = counter + 1; ▶ ' -- ' 연산자도 마찬가지의 순서로 한다! 2. Assignment operators let x = 1; let y = 2; x += y; //x = x+y; x -= y; x *= y; x /= y; 3.Comparsi..

Symbol은, 고유의 식별자를 처리하기위해 사용합니다. 따라서, 이름 충돌할 만한 위험이 없는 객체에서 유일한 프로퍼티 키를 만들때 사용하기도 합니다. 간혹 식별자를 string으로 처리하기도 하는데, 그럴때 이런 symbol을 사용해주면 동일한 'id'로 만들었지만 동일하지 않다고 판단합니다. const symbol1 = Symbol('id'); const symbol2 = Symbol('id'); symbol1 === symbol2 //false 만약, 동일한 symbol을 만들고 싶다면? 주어진 string에 맞는 symbol을 만들어 달라고 요청하는, Symbol.for('')을 사용해 만들어 사용해주면 됩니다. - 출력 symbol은 그냥 출력하면 안나오고, symbol1.description..

개념 1. null null 과 Null 은 다릅니다 ( 대소문자 구별). 의도적으로 값이 없음을 표현할때 사용합니다. 2. undefined 값이 선언됐지만, 할당된 적 없을때 undifined가 출력됩니다. null과 undefined는 falsy한 값으로 치부합니다. null == undefined ( 0 ) // 없다와, 할당 되지 않았다는 둘다 falsy 한 값이긴 하지만 null === undefined ( X ) // 완전 동일하진 않습니다. 따라서, 예를들어, test의 값이 undefined 또는 null값일때 !test 로 표현이 가능합니다. 값이 꼭 있을때만 값을 넣겠다! 라고 표현할땐 test && ~~~ 로 작성 할 수 있다