본문 바로가기

Webstoryboy

Category

Explanation

GSAP

 (36)
[GSAP] .paused() [GSAP] .paused() .paused()는 애니메이션이 현재 일시 중지되었는지 여부를 나타냅니다. 일시 중지 상태를 가져오거나 설정할 수 있습니다. .paused() .paused()는 애니메이션이 현재 일시 중지되었는지 여부를 나타냅니다. 특징 설명 반환값(returns) 불린값(Boolean) 또는 자신값(self) 문법(Syntax) .paused(불린); 불린(Boolean) : 기본값(false) : 일시 중시 상태는 true로 설정합니다.. 정의(Definition) .paused()는 애니메이션이 현재 일시 중지되었는지 여부를 나타냅니다. .paused()는 애니메이션의 일시 중지 상태를 가져 오거나 설정 할 수 있습니다. 이것은 부모의 타임 라인을 고려하지 않습니다. 참고(Refe..
[GSAP] .pause() [GSAP] .pause() .pause()는 애니메이션을 일시정지 합니다. .pause() .pause()는 애니메이션을 일시정지 합니다.. 특징 설명 반환값(returns) 자신값(self) 문법(Syntax) .pause(숫자, 불린); 숫자(atTime) : 애니메이션의 정지 시간을 설정합니다. 불린(suppressEvents) : 기본값(true) : 새로운 애니메이션이 시작될 때 콜백되지 되지 않습니다. 정의(Definition) .pause()는 애니메이션을 일시정지 합니다. 참고(Reference) GSAP
[GSAP] .kill() [GSAP] .kill() .kill()는 애니메이션을 종료합니다. 매개 변수에 따라 전체 또는 일부를 종료시킬 수 있습니다. .kill() .kill()는 애니메이션을 종료합니다. 특징 설명 반환값(returns) 자신값(self) 정의(Definition) .kill()는 애니메이션을 종료합니다. 매개 변수에 따라 전체 또는 일부를 종료시킬 수 있습니다. .kill()는 애니메이션에서 특정 대상만 종료하려면 첫 번째 매개 변수를 사용합니다. 애니메이션을 다시 사용할 경우 .kill() 메서드를 사용하지 말고 .pause() 메서드를 사용합니다. 참고(Reference) GSAP
[GSAP] .iteration() [GSAP] .iteration() .iteration()는 애니메이션의 반복 횟수를 설정합니다. 반복 횟수를 가져올 수도 있으며, 설정도 가능합니다. .iteration() .iteration()는 애니메이션의 반복 횟수를 설정합니다. 특징 설명 반환값(returns) 반복횟수(Number) 정의(Definition) .iteration()는 애니메이션의 반복 횟수를 설정합니다. .iteration()는 반복 횟수를 설정하면 애니메이션이 반복적으로 작동합니다. 참고(Reference) GSAP
[GSAP] .play() [GSAP] .play() .play()는 애니메이션의 재생을 정의합니다. .play() .play()는 애니메이션의 재생을 정의합니다. 특징 설명 반환값(returns) 자신값(self) 문법(Syntax) .pause(숫자, 불린); 숫자(atTime) : 애니메이션의 재생 시간을 설정합니다. 불린(suppressEvents) : 기본값(true) : 새로운 애니메이션이 시작될 때 콜백되지 않습니다. 정의(Definition) .play()는 애니메이션의 재생을 정의합니다. 참고(Reference) GSAP
[GSAP] .progress() [GSAP] .progress() .progress()는 애니메이션의 진행률을 정의합니다. .progress() .progress()는 애니메이션의 진행률을 정의합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(self) 문법(Syntax) .progress(숫자, 불린); 숫자(atTime) : 애니메이션의 진행 시간을 설정합니다. 불린(suppressEvents) : 기본값(false) : 새로운 애니메이션이 시작될 때 콜백 되지 않습니다. 정의(Definition) .progress()는 애니메이션의 진행률을 정의합니다. 참고(Reference) GSAP
[GSAP] .repeat() [GSAP] .repeat() .repeat()는 애니메이션의 반복을 정의합니다. .repeat() .repeat()는 애니메이션의 반복을 정의합니다. 특징 설명 반환값(returns) 반복 횟수(Number) 또는 자신값(Self) 문법(Syntax) .repeat(숫자); 숫자(Number) : 애니메이션의 반복 횟수를 설정합니다. 정의(Definition) .repeat()는 애니메이션이 끝나고 반복해야하는 횟수를 가져오거나 설정합니다. .repeat(1)이면 두번 재생이 되고, .repeat(-1)이면 무한 반복합니다. .repeat()에는 정수만 사용할 수 있습니다. 애니메이션을 연속적으로 반복 실행하려면 yoyo를 true로 설정하면 됩니다. 참고(Reference) GSAP
[GSAP] .repeatDelay() [GSAP] .repeatDelay() .repeat()는 애니메이션의 반복되는 시간을 정의합니다. .repeatDelay() .repeatDelay()는 애니메이션의 반복되는 시간을 정의합니다. 특징 설명 반환값(returns) 반복 횟수(Number) 또는 자신값(Self) 문법(Syntax) .repeatDelay(숫자); 숫자(Number) : 애니메이션의 지연 시간을 설정합니다. 정의(Definition) .repeatDelay()는 애니메이션 반복 사이의 시간을 가져오거나 설정합니다. 예를 들어 repeat가 2이고 repeatDelay가 1이면 애니메이션이 처음에 재생 된 다음 반복되기 전에 1초 동안 기다립니다. 참고(Reference) GSAP
[GSAP] .restart() [GSAP] .restart() .restart()는 애니메이션을 처음부터 다시 시작합니다. .restart() .restart()는 애니메이션을 처음부터 다시 시작합니다. 특징 설명 반환값(returns) 자신값(Self) 문법(Syntax) .restart(불린, 불린); 불린(includeDelay) : 기본값(false) : 애니메이션 다시 시작할 때 지연이 필요한 경우 true를 설정합니다. 불린(suppressEvents) : 기본값(true) : 기본값이면 애니메이션이 끝난 후 이벤트나 콜백이 일어나지 않습니다. 정의(Definition) .restart()는 애니메이션을 처음부터 다시 시작합니다. 참고(Reference) GSAP
[GSAP] .resume() [GSAP] .resume() .resume()는 애니메이션 방향을 바꾸지 않고 재생을 다시 시작합니다. .resume() .resume()는 애니메이션 방향을 바꾸지 않고 재생을 다시 시작합니다. 특징 설명 반환값(returns) 자신값(Self) 정의(Definition) .resume()는 애니메이션 방향을 바꾸지 않고 재생을 다시 시작합니다. 참고(Reference) GSAP
[GSAP] .reverse() [GSAP] .reverse() .reverse()는 애니메이션 방향을 바꾸지 않고 재생을 다시 시작합니다. .reverse() .reverse()는 애니메이션 방향을 바꾸지 않고 재생을 다시 시작합니다. 특징 설명 반환값(returns) 자신값(Self) 문법(Syntax) .reverse(숫자, 불린); 숫자(from) : 기본값(null) : 애니메이션이 역방향으로 재생되는 시작 시간 불린(suppressEvents) : 기본값(true) : 기본값이면 애니메이션이 끝난 후 이벤트나 콜백이 일어나지 않습니다. 정의(Definition) .reverse()는 애니메이션 방향을 바꾸지 않고 재생을 다시 시작합니다. 참고(Reference) GSAP
[GSAP] .reversed() [GSAP] .reversed() .reversed()는 애니메이션을 뒤로 재생해야하는지 여부를 가져오거나 설정합니다. .reversed() .reversed()는 애니메이션을 뒤로 재생해야하는지 여부를 가져오거나 설정합니다. 특징 설명 반환값(returns) 자신값(Self) 또는 불린(Boolean) 문법(Syntax) .reverse(불린); 불린(Boolean) : 기본값(false) : true을 설정하면 방향을 반전으로 설정합니다. 정의(Definition) .reversed()는 애니메이션을 뒤로 재생해야하는지 여부를 가져오거나 설정합니다. .reversed()는 yoyo 반복의 영향을 받지 않으며 상위 타임라인의 반전 된 상태를 고려하지 않습니다. 참고(Reference) GSAP
[GSAP] .seek() [GSAP] .seek() .seek()는 애니메이션을 특정 시간으로 이동합니다. .seek() .seek()는 애니메이션을 특정 시간으로 이동합니다. 특징 설명 반환값(returns) 자신값(Self) 문법(Syntax) .seek(시간, 이벤트); 시간(time) : 이동할 시간을 설정합니다. 이벤트(suppressEvents) : 기본값(true) : 기본값이면 애니메이션이 끝난 후 이벤트나 콜백이 일어나지 않습니다. 정의(Definition) .seek()는 애니메이션을 특정 시간으로 이동합니다. 참고(Reference) GSAP
[GSAP] .startTime() [GSAP] .startTime() .startTime()는 애니메이션이 부모 타임라인에서 시작되는 시간을 가져오거나 설정합니다. .startTime() .startTime()는 애니메이션이 부모 타임라인에서 시작되는 시간을 가져오거나 설정합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(Self) 문법(Syntax) .startTime(시간); 시간(number) : 시작시간을 설정합니다.. 정의(Definition) .startTime()는 애니메이션이 부모 타임라인에서 시작되는 시간을 가져오거나 설정합니다 참고(Reference) GSAP
[GSAP] .targets() [GSAP] .targets() .targets()는 애니메이션이 속성을 적용할 대상을 설정합니다. .targets() .targets()는 애니메이션이 속성을 적용할 대상을 설정합니다. 정의(Definition) .targets()는 애니메이션이 속성을 적용할 대상을 설정합니다. 참고(Reference) GSAP
[GSAP] .then() [GSAP] .then() .then() 메서드는 애니메이션 완료 후 promise를 반환합니다. .then() .then() 메서드는 애니메이션 완료 후 promise를 반환합니다. 특징 설명 반환값(returns) 콜백함수(Promise) 문법(Syntax) .then(콜백함수); 콜백함수(Promise) : 애니메이션 완료 후 promise를 반환합니다. 정의(Definition) .then() 메서드는 애니메이션 완료 후 promise를 반환합니다. 참고(Reference) GSAP
[GSAP] .time() [GSAP] .time() .time() 메서드는 애니메이션 재생 시간을 가져오거나 설정합니다. .time() .time() 메서드는 애니메이션 재생 시간을 가져오거나 설정합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(Self) 문법(Syntax) .time(시간, 이벤트); 시간(Number) : 애니메이션 완료 후 promise를 반환합니다. 이벤트(suppressEvents) : 기본값(false) : 기본값이면 애니메이션이 끝난 후 이벤트나 콜백이 일어나지 않습니다. 정의(Definition) .time() 메서드는 애니메이션 재생 시간을 가져오거나 설정합니다. 참고(Reference) GSAP
[GSAP] .timeScale() [GSAP] .timeScale() .timeScale() 메서드는 애니메이션 재생 스피드 시간을 설정합니다. .timeScale() .timeScale() 메서드는 애니메이션 재생 스피드 시간을 설정합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(Self) 문법(Syntax) .time(숫자); 숫자(Number) : 재생 시간을 설정합니다. 정의(Definition) .timeScale() 메서드는 애니메이션 재생 스피드 시간을 설정합니다. 참고(Reference) GSAP
[GSAP] .totalDuration() [GSAP] .totalDuration() .totalDuration() 메서드는 반복되는 애니메이션을 포함하여 지속 시간을 가저오거나 설정합니다. .totalDuration() .totalDuration() 메서드는 반복되는 애니메이션을 포함하여 지속 시간을 가저오거나 설정합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(Self) 문법(Syntax) .totalDuration(숫자); 숫자(Number) : 전체 재생 시간을 설정합니다. 정의(Definition) .totalDuration() 메서드는 반복되는 애니메이션을 포함하여 지속 시간을 가저오거나 설정합니다. 참고(Reference) GSAP
[GSAP] .totalProgress() [GSAP] .totalProgress() .totalProgress() 메서드는 애니메이션은 전체 진행 상태를 설정합니다. 0에서 1로 애니메이션이 진행될 경우 0은 시작지점 1은 끝나는 지점 0.5는 중간 지점을 의미합니다. .totalProgress() .totalProgress() 메서드는 애니메이션은 전체 진행 상태를 설정합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(Self) 문법(Syntax) .totalProgress(숫자, 이벤트); 숫자(Number) : 전체 재생 시간을 설정합니다. 이벤트(suppressEvents) : 기본값(false) : 기본값이면 애니메이션이 끝난 후 이벤트나 콜백이 일어나지 않습니다. 정의(Definition) .totalPro..
[GSAP] .totalTime() [GSAP] .totalTime() .totalTime() 메서드는 애니메이션의 전체 시간을 설정합니다. .totalTime() .totalTime() 메서드는 애니메이션의 전체 시간을 설정합니다. 특징 설명 반환값(returns) 숫자(Number) 또는 자신값(Self) 문법(Syntax) .totalProgress(숫자, 이벤트); 숫자(Number) : 전체 재생 시간을 설정합니다. 이벤트(suppressEvents) : 기본값(false) : 기본값이면 애니메이션이 끝난 후 이벤트나 콜백이 일어나지 않습니다. 정의(Definition) .totalTime() 메서드는 애니메이션의 전체 시간을 설정합니다. 참고(Reference) GSAP
[GSAP] .yoyo() [GSAP] .yoyo() .yoyo() 메서드는 애니메이션의 반복 여부를 설정합니다. .yoyo() .yoyo() 메서드는 애니메이션의 반복 여부를 설정합니다. 특징 설명 반환값(returns) 불린(Boolean) 또는 자신값(Self) 문법(Syntax) .yoyo(불린); 불린(Boolean) : 기본값(false) : 애니메이션 반복 여부를 설정합니다. 정의(Definition) .yoyo() 메서드는 애니메이션의 반복 여부를 설정합니다. 참고(Reference) GSAP
[GSAP] .invalidate() [GSAP] .invalidate() .invalidate()는 기존의 애니메이션을 무효화하고 다시 애니매이션합니다. .invalidate() .invalidate()는 기존의 애니메이션을 무효화하고 다시 애니매이션합니다. 특징 설명 반환값(returns) 자신값(self) 정의(Definition) .invalidate()는 기존의 애니메이션을 무효화하고 다시 애니매이션합니다. .invalidate()는 이전 애니메이션 시작 값으로 돌리지 않고 새로운 애니메이션으로 다시 시작합니다. .invalidate()는 이전 애니메이션을 초기화하고 다시 시작합니다. 애니메이션이 반복 될 때마다 모션을 invalidate() 하려는 경우는 repeatRefresh : true 속성을 사용합니다. 참고(Referen..
[GSAP] .eventCallback() [GSAP] .eventCallback() .eventCallback()는 이벤트에 전달해주는 콜백함수입니다. "onComplete", "onUpdate", "onStart", "onReverseComplete" 또는 "onRepeat"와 같이 애니메이션이 끝난 후 콜백함수를 설정합니다. .eventCallback() .eventCallback()는 이벤트에 전달해주는 콜백함수입니다. 특징 설명 반환값(returns) 함수(Function) 정의(Definition) .eventCallback()는 이벤트에 전달해주는 콜백함수입니다. .eventCallback()의 장점은 애니메이션 인스턴스가 생성 된 후에도 콜백을 설정할 수 있습니다. 애니메이션 인스턴스는 각 이벤트 유형과 연관된 하나의 콜백만 가질 ..
[GSAP] .endTime() [GSAP] .endTime() .endTime()는 애니메이션의 끝나는 시간을 반환합니다. .endTime() .endTime()는 애니메이션의 끝나는 시간을 반환합니다. 특징 설명 반환값(returns) 시간(Number) 정의(Definition) .endTime()는 애니메이션의 끝나는 시간을 반환합니다. 참고(Reference) GSAP
[GSAP] .duration() [GSAP] .duration() .duration()는 애니메이션이 지속 시간을 설정합니다. .duration() .duration()는 애니메이션이 지속 시간을 설정합니다. 특징 설명 반환값(returns) 시간(Number) 정의(Definition) .duration()는 애니메이션이 지속 시간을 설정합니다. .duration()의 지속 시간은 반복되는 시간과 별개입니다. 참고(Reference) GSAP
[GSAP] Repeat [GSAP] .delay() .delay()는 애니메이션이 시작되기 전에 지연 시간을 설정합니다. .delay() .delay()은 애니메이션 지연 시간을 설정합니다. 특징 설명 반환값(returns) 시간(Number) 정의(Definition) .delay()는 애니메이션이 시작되기 전에 지연 시간을 설정합니다. .delay()는 timeScale에 영향을 주지 않습니다. 참고(Reference) GSAP
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..
1 2
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바