본문 바로가기

Webstoryboy

Category

Explanation

GSAP/Alphabet

(7)
gsap.timeline() gsap.timeline() gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다. gsap.to()와 delay 속성을 이용하면, 연속적인 애니메이션이 가능하지만, gsap.timeline()이용하면 연속적인 애니메이션을 간편하게 설정 할 수 있습니다. gsap.timeline() gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다. 특징 설명 버전 GSAP3 결과값(return) 타임라인(Timeline) 사용성 ★★★★★ 문법(Syntax) gsap.timeline("타겟", {속성: 속성값, ....}); //일반적인 애니메이션 연속 작업 gsap.to("#id", {x: 50, duration: 1}); gsap.to("#id", {x: 150, duration..
gsap.set() gsap.set() gsap.set() 메서드는 요소에 속성 값을 설정합니다. gsap.to() 메서드를 이용하여 애니메이션 주기 위하여, 애니메이션 초기 설정이 필요합니다. 이럴 경우 CSS를 통해 설정 할 수도 있지만, gsap.set()를 통해 설정하면, 조금 더 편합니다. 물론 초기 설정 즉 시작 값이 설정이 불편하면, gsap.from() 또는 gsap.fromTo() 메서드를 활용 할 수 있습니다. gsap.set() gsap.set() 메서드는 요소에 속성 값을 설정합니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) 사용성 ★★★★☆ 문법(Syntax) gsap.set("타겟", {속성: 속성값, ....}); //애니메이션 속성을 설정하고 애니메이션을 주는 경우 g..
gsap.getProperty() gsap.getProperty() gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다. 단위를 적지 않으면 숫자만 반환되고, 단위를 적으면 단위까지 같이 나옵니다. 값이 없을 경우 null을 반환합니다. gsap.getProperty() gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다. 특징 설명 버전 GSAP3 결과값(return) 모든 속성 값(*) 사용성 ★★★☆☆ 문법(Syntax) gsap.getProperty("타겟", "속성"); gsap.getProperty("#id", "x"); // #id의 x 속성 값을 반환합니다. 20 gsap.getProperty("#id", "x", "px") // 단위를 적으면 단위 값을 반환합니다. "20px" gs..
gsap.getById() gsap.getById() gsap.getById() 메서드는 애니메이션의 id 값을 설정하거나 id 값을 불러올 때 사용합니다. CSS 선택자 id 값과 별개로 사용합니다. 만약 id 값이 없으면 undefined를 반환합니다. gsap.getById() gsap.getById() 메서드는 요소의 id 값을 설정하거나 가져옵니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) or 타임라인(Timeline) 사용성 ★☆☆☆☆ 문법(Syntax) gsap.to("타겟", {id: "id 이름", 속성: 속성값, ....}); //id를 설정하는 경우 gsap.to("target", {id: "myTween", duration: 1, x: 100}); //id를 불러오는 경우 gsap..
gsap.fromTo() 애니메이션을 줄 때 시작점과 끝점을 지정해주는 메서드입니다. gsap.to() 메서드는 끝나는 애니메이션 지점을 설정하고, gsap.from() 메서드는 시작하는 애니메이션 지점을 설정하고, gsap.fromTo() 메서드는 시작하는 점과 끝나는 점 모두를 설정할 수 있습니다. 이렇게 하면 CSS 속성을 따로 수정하지 않고 스크립트로 애니매이션을 완벽하게 통제할 수 있습니다. gsap.fromTo() gsap.fromTo() 메서드는 시작 점과 끝나는 점을 지정하는 애니메이션입니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) 사용성 ★★★★☆ 문법(Syntax) gsap.fromTo("타겟", {시작 속성: 시작 속성값, ....},{끝나는 속성: 끝나는 속성값, ....}); ..
gsap.from() gsap.from() 애니메이션을 줄 때 시작 지점을 지정해주는 메서드입니다. 즉 gsap.to() 메서드와 반대입니다. gsap.to() 메서드는 시작점을 지정하지 않고, 완료된 점을 지정해주면 현재 지점에서 완료 지점까지 애니메이션 됩니다. gsap.from()은 시작점을 지정해주면, 시작점에서 현재점으로 이동하게 됩니다. 메서드만으로 애니메이션을 쉽게 컨트롤 하기 좋은 메서드입니다. gsap.from() gsap.from() 메서드는 시작 점을 지정하는 애니메이션입니다. 특징 설명 버전 GSAP3 결과값(return) 움직임(tween) 사용성 ★★★★★ 문법(Syntax) gsap.from("타겟", {속성: 속성값, ....}); 타겟(targets) : 애니메이션을 적용할 개체를 선택합니다. ..
gsap.to() gsap.to() gsap.to()는 애니메이션을 주기 위한 모션을 설정하는 가장 일반적인 애니메이션 값을 정의합니다. 현재 지점을 기준으로 끝나는 지점을 설정하면, 애니메이션이 완성됩니다. CSS에서 animation()과 jQuery에서 .animate()과 유사합니다. gsap.to() gsap.to() 메서드는 움직임의 끝나는 점을 지정하는 애니메이션입니다. 특징 설명 버전 GSAP3 결과값(return) 모션(tween) 사용성 ★★★★★ 문법(Syntax) gsap.to("타겟", {속성: 속성값, ....}); 타겟(targets) : 애니메이션을 적용할 개체를 선택합니다. (CSS 선택자, Javascript 선택자 가능) 속성(values) : 애니메이션과 관련된 속성을 설정합니다. 속성..
1