GSAP 시작하기 - 학습센터 | GSAP

 

GreenSock Animation Platform(GSAP)은 JavaScript가 만질 수 있는 모든 것(CSS 속성, SVG, React, 캔버스, 일반 객체 등)을 애니메이션화하고 수많은 브라우저 불일치를 해결하며, 이 모든 것을 놀라운 속도(jQuery보다 최대 20배 빠른 속도)로 해결한다. GSAP가 1,000,000개의 사이트와 많은 주요 브랜드에서 사용되는 이유를 확인하세요.

 

학습 곡선를 따라 가면 코드로 애니메이션을 만드는 것이 얼마나 재미있을 수 있는지 알게 될 것입니다. 시간을 낼 만한 가치가 있다고 약속합니다.

 

 

GSAP는 속성 조작자

애니메이션은 궁극적으로 초당 여러 번 속성 값을 변경함으로써 어떤 것이 움직이고, 희미해지고, 회전하는 것처럼 보이게 합니다. GSAP는 시작 값, 끝 값을 잡아채고 그 사이를 초당 60회 보간한다.

 

예를 들어, 개체의 x 좌표를 1초 동안 0에서 1000으로 변경하면 개체가 오른쪽으로 빠르게 이동하게 한다. 불투명도를 1에서 0으로 점차 변경하면 요소가 페이드 아웃됩니다. 애니메이터로서 어떤 속성을 변경할지, 얼마나 빨리 변경할지, 그리고 모션 스타일(easing 이라고 함)을 결정하는 것입니다.

기술적으로 정확하기 위해 GSAP를 "GreenSock Property Manipulator"(GSPM)로 명명 할 수 있었지만 동일한 링이 없습니다.

 

 

DOM, SVG, <canvas> 및 그 이상

GSAP에는 처리할 수 있는 속성 목록이 미리 정의되어 있지 않습니다. 매우 유연하며, 작성하는 거의 모든 것에 적응합니다.

 

GSAP는 다음을 모두 애니메이션 할 수 있습니다.

• CSS : 2D 및 3D 변형, 색상, 너비, 불투명도, 테두리 반경, 여백 및 거의 모든 CSS 값.
• SVG 속성 : viewBox, 너비, 높이, 채우기, 스트로크, cx, r, 불투명도 등. MorphSVG 및 DrawSVG와 같은 플러그인은 고급 효과에 사용할 수 있습니다.
• 임의의 숫자 값 : 예를 들어 <canvas>로 렌더링되는 개체입니다. 3D 장면 또는 필터 값에서 카메라 위치를 애니메이션합니다. GSAP는 Three.js 및 Pixi.js와 함께 자주 사용됩니다.

 

기본 구문을 익히면 JavaScript가 실행되는 모든 곳에서 GSAP를 사용할 수 있습니다. 이 가이드에서는 가장 인기 있는 사용 사례인 DOM 요소의 CSS 속성을 애니메이션화하는 데 초점을 맞춥니다. (참고: 리액트를 사용하는 경우 이 항목도 읽어보십시오.)

다음 프레임워크 중 하나를 사용하는 경우 다음 문서가 도움이 될 수 있습니다.

• React
• Vue
• Angular

 

 

GSAP가 정확히 무엇입니까?

GSAP는 스크립트 애니메이션을위한 도구 모음입니다. 다음이 포함됩니다.

• GSAP 코어-모든 객체의 속성에 애니메이션을 적용하는 엔진의 핵심입니다. 트윈을 사용하고 애니메이션을 더 잘 제어 할 수 있습니다.
• 시간을 절약하는 플러그인, 여유 도구, 유틸리티 방법 등과 같은 추가 기능.

 

 

GSAP 로드

GSAP를 얻는 방법에는 여러 가지가 있습니다. CDN에서 로드하거나 사이트에서 다운로드하거나 NPM / Yarn을 통해 설치하거나 Github에서 가져옵니다.  자세한 내용은 설치 페이지를 참조하세요. 다양한 플러그인을 로드하기 위한 코드를 보여주는 대화형 도구도 있습니다. 핵심 GSAP 도구를 페이지에 추가하는 가장 간단한 방법은 다음과 같은 스크립트 태그를 사용하는 것입니다.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" > </ script> 

 

CodePen

GSAP로 놀이를 시작하려면 많은 CodePen 데모 중 하나로 시작하여 브라우저에서 라이브로 편집하는 것이 좋습니다 . 재미있습니다! 그런 다음 오른쪽 하단의 "포크"버튼을 클릭하여 버전을 저장할 수 있습니다. 

 

 

트위닝 기본

기본 트윈 작업을 시작하겠습니다. CodePen 데모를 사용하면 브라우저에서 각 예제를 쉽게 포크하고 편집할 수 있습니다.

 

gsap.to ()

gsap.to는 애니메이션을 제작하기 위해 다음과 같은 두 가지가 필요합니다.

• targets : 애니메이션을 적용할 개체입니다. 원시 객체, 객체의 배열, 또는 ".myClass" 와 같은 선택자 텍스트
• vars : 애니메이션을 적용할 속성/값 쌍(예를 들어, opacity: 0.5, rotation: 45)과 duratiom, onComplete와 같은 기타 선택적 특수 속성이 있는 개체입니다

 

예를 들어 ID가 "logo"인 요소를 1초 동안 100의 x 좌표(transform: translateX(100px) 와 동일)를 이동하려면 다음과 같이 합니다.

gsap.to("#logo", {duration: 1, x: 100});

참고: GSAP는 DOM 요소만을 위한 것이 아니므로 다음과 같은 원시 개체의 사용자 지정 속성을 애니메이션화할 수도 있습니다.

var obj = {prop: 10};
gsap.to(obj, {
  duration: 1,
  prop: 200, 
  // onUpdate는 트윈이 업데이트 될 때마다 실행됩니다. 나중에 콜백에 대해 설명하겠습니다. 
  onUpdate: function() {
    console.log(obj.prop); // 업데이트 할 때마다 값을 기록합니다.
  }
});

opacity, scale, rotation 및 x 값이 모두 애니메이션화되지만 DOM 요소에는 실제로 이러한 속성이 없습니다. 다시 말해서, element.scale나 element.opacity 같은 것은 존재하지 않습니다. 그럼 어떻게 된 거죠? GSAP의 마법이죠. 그 뒤에 숨겨진 세부 사항에 대해 이야기하기 전에 GSAP의 플러그인과 일반적인 작동 방식을 살펴보겠습니다. 그러면 몇 가지 중요한 개념이 명확해지기 때문입니다.

 

 

플러그인

추가 기능을 주입하기 위해 GSAP에 동적으로 추가되는 특수 속성 추가와 같은 플러그인을 생각해 보십시오. 이를 통해 코어 엔진을 작고 효율적으로 유지하면서도 무제한 확장이 가능합니다. 각 플러그인은 특정 속성 이름과 연결됩니다.

 

가장 인기 있는 플러그인은 다음과 같습니다.

• SplitText : 텍스트 블록을 선, 단어 및 문자로 분할하고 각 부분에 쉽게 애니메이션을 적용 할 수 있습니다.
• Draggable : 요소를 드래그 앤 드롭하는 기능을 추가합니다.
• MorphSVGPlugin : 복잡한 SVG Paths를 부드럽게 모핑합니다.
• DrawSVGPlugin : SVG Strokes의 길이와 위치를 애니메이션합니다.
• MotionPathPlugin : Path를 따라 모든 요소에 애니메이션을 적용합니다.

 

CSSPlugin

이전 예에서 GSAP는 CSSPlugin이라는 핵심 플러그인(GSAP의 핵심에 포함 된 플러그인)을 사용했습니다. 대상이 DOM 요소임을 자동으로 인식하여 값을 가로채고 추가 작업을 수행하여 인라인 스타일(element.style.transform 및 element.style.opacity)로 적용합니다. 이 문서의 맨 위에 있는 "시작하기" 비디오를 보고 실제로 작동하는지 확인하십시오.

 

CSSPlugin 기능 :

• 브라우저 간의 동작을 표준화하고 다양한 브라우저 버그 및 불일치를 해결합니다.
• 자동 계층화, 변환 구성 요소 캐싱, 레이아웃 스래싱 방지 등을 통해 성능을 최적화합니다.
• 2D 및 3D 변환 구성 요소( x, y, rotation, scaleX, scaleY, skewX, 등)를 독립적으로 제어합니다.(작업 순서 문제 제거)
• 계산된 값을 읽으므로 시작값을 수동으로 정의할 필요가 없습니다.
• borderRadius: "50% 50%", boxShadow: "0px 0px 20px 20px red" 와 같은 복잡한 값을 애니메이션화 합니다.
• 필요한 경우 벤더별 접두사 ( -moz-, -ms-, -webkit-, 등)를 적용합니다.
• CSS 변수를 애니메이션합니다.
• SVG와 DOM 요소 사이의 동작을 표준화합니다 (특히 변환에 유용함).
• ... 그 외에도 더 많은 것들이 있습니다.

 

기본적으로 CSSPlugin은 많은 골칫거리를 줄여줍니다.

애니메이션 CSS 속성은 매우 일반적이기 때문에 GSAP는 대상이 DOM 요소 일 때 자동으로 감지하고 CSS 값을 내부적으로 CSSPlugin에 제공합니다. CSS: {}로 포장할 필요가 없습니다.

CSSPlugin의 고급 기능을 이해하려면 전체 CSSPlugin 문서를 읽어보세요.

 

 

2D 및 3D 변환

CSSPlugin은 다음과 같은 변환 관련 속성에 대한 다수의 단축 코드를 인식합니다.

GSAP	CSS
x : 100	transform : translateX (100px)
y : 100	transform : translateY (100px)
rotation : 360	transform : 회전 (360deg)
rotationX : 360	transform : rotateX (360deg)
rotationY : 360	transform : rotateY (360deg)
skewX : 45	transform : skewX (45deg)
skewY : 45	transform : skewY (45deg)
scale : 2	transform : scale (2, 2)
scaleX : 2	transform : scaleX (2)
scaleY : 2	transform : scaleY (2)
xPercent : -50	transform : translateX (-50 %)
yPercent : -50	transform : translateY (-50 %)

GSAP는 모든 transform값에 애니메이션을 적용 할 수 있지만 위의 단축 코드를 사용하는 것이 더 빠르고 정확합니다. (GSAP는 180도 이상의 회전 값에 대해 모호한 계산 행렬 값 구문 분석을 건너 뛸 수 있음). GSAP가 제공하는 또 다른 주요 편의성은 일관된 작동 순서를 제공하면서 각 구성 요소를 독립적으로 제어하는 ​​것입니다.

 

성능 참고: 브라우저가 문서 흐름에 영향을 미치는 top과 left 대신 x 와 y (transform)를 업데이트하는 것이 훨씬 쉽습니다. 그래서 무언가를 이동하려면 x와 y를 애니메이션화하는 것이 좋습니다.

 

유의사항 : 

• 모든 하이픈이 있는 속성을 camelCase 해야 합니다. font-size는 fontSize, background-color는 backgroundColor
• left 및 top과 같은 위치 속성을 애니메이션화할 때 이동하려는 요소에 CSS position 값 (absolute, relative, fixed) 이 있어야 합니다.

 

from() 트윈

경우에 따라 요소를 설정(예: 소개 애니메이션 이후)한 다음 다른 값에서 애니메이션화하는 것이 매우 편리합니다. 그것이 바로 gsap의 목적입니다.

예를 들어, "#logo" 요소가 현재 x 좌표가 0 이면, 다음 트윈을 만들 수 있습니다.

gsap.from("#logo", {duration: 1, x: 100});

#logo는 즉시 100의 x 좌표로 이동하고 0의 x 좌표(또는 트윈이 시작되었을 때의 값)로 애니메이션됩니다. 즉, 현재 제공하는 값에서 애니메이션을 적용하는 것입니다.

시작 값과 끝 값을 정의 할 수있는 fromTo () 메서드도 있습니다.

// width는 0 에서 100 으로, 높이는 0 에서 200 으로
gsap.fromTo("#logo", {width: 0, height: 0}, {duration: 1.5, width: 100, height: 200});

 

set()

일부 속성을 즉시 설정하려면 .set () 메서드를 사용하세요. 기본적으로 duration이 0 인 트윈이므로 다른 GSAP 트윈에서 사용할 수있는 동일한 속성을 모두 사용할 수 있습니다.

gsap.set("#logo", {fontSize: 20, x: 10});

 

특수 속성

특수 속성은 GSAP가 일반 (애니메이션) 속성과 다르게 처리하는 예약된 키워드와 같습니다. callbacks, delays, easing, staggers 등을 정의하는 데 특수 속성이 사용됩니다.

특수 속성의 기본 예는 (이미 사용하고 있는) duration입니다.

gsap.to("#logo", {duration: 1, x: 100});

 

기타 일반적인 특수 속성은 다음과 같습니다.

• delay : 지연 - 애니메이션을 시작하기 전의 지연입니다.
• onComplete : 애니메이션이 완료될 때 호출해야 하는 콜백입니다.
• onUpdate : 애니메이션 업데이트/렌더링 될 때마다 호출해야 하는 콜백입니다.
• easy : "power2.inOut" 과 같이 사용해야 하는 ease 입니다.
• stagger : 각 대상/요소 애니메이션의 시작 시간을 조정합니다.

 

 

Easing

A점과 B점 사이의 이동 스타일을 결정하기 때문에 당신은 예민한 ease를 발달시켜야 합니다. ease는 트윈 중 변경 속도를 제어합니다. 

 

ease 특수 속성을 사용하세요.

gsap.to("#logo", {duration: 1, x: 300, ease: "bounce"});

 

ease에 대한 자유로운 제어를 위해서는 CustomEase을 확인하세요. CustomEase는 상상할 수 있는 모든 이완 곡선을 그대로 그릴 수 있습니다. CustomWiggle 및 CustomBounce는 매우 복잡하고 사실적인 효과를 만드는 고급 솔루션입니다.

 

 

Staggers

Staggers를 사용하면 각 개체의 애니메이션 시작 사이에 약간의 지연이있는 개체 그룹을 쉽게 애니메이션 할 수 있습니다.

몇 가지 구성 옵션을 추가하여 그리드에 배치된 항목을 엇갈리게 할 수도 있습니다 :

gsap.to(".box", 1, {
    scale: 0.1, 
    y: 60,
    yoyo: true, 
    repeat: -1, 
    ease: "power1.inOut",
    delay:1,
    stagger: {
    amount: 1.5, 
    grid: "auto",
    from: "center"
  }
});

GSAP의 고급 Staggers 기능에 대한 자세한 내용은 CodePen을 참조하십시오.

 

 

Callbacks

콜백은 특정 애니메이션 관련 이벤트가 발생할 때 함수를 호출합니다.

• onComplete : 애니메이션이 완료되면 호출됩니다.
• onStart : 애니메이션이 시작될 때 호출됩니다.
• onUpdate : 애니메이션이 업데이트 될 때마다 호출됩니다 (애니메이션이 활성화된 동안 모든 프레임에서).
• onRepeat : 애니메이션이 반복 될 때마다 호출됩니다.
• onReverseComplete : 애니메이션이 역방향 (반복 제외)에서 다시 시작될 때 호출 할 함수입니다.

 

애니메이션이 끝날 때 tweenComplete () 함수를 실행하려면 다음을 수행합니다.

gsap.to("#logo", {duration: 1, x: 100, onComplete: tweenComplete});

function tweenComplete() {
  console.log("the tween is complete");
}

 

콜백 매개변수

각 콜백 함수는 임의의 매개 변수를 선택적으로 전달할 수 있습니다. 매개 변수가 여러 개일 수 있으므로 매개 변수가 하나만 있더라도 하나의 배열로 전달되어야 합니다.

gsap.to("#logo", {duration: 1, x: 100, onComplete: tweenComplete, onCompleteParams: ["done!"]});

function tweenComplete(message) {
  console.log(message);
}

 

기본적으로 콜백의 범위 (해당 함수 내에서 참조하는 것)는 트윈 자체이지만 원하는 경우 callbackScope : yourScope와 같이 다른 것으로 정의 할 수 있습니다.

데모 : 기본 콜백 및 매개 변수

var output = document.querySelector("#output");

gsap.to(".green", {
  duration: 2,
  x: 300,
  onStart: showMessage, 
  onStartParams: ["the green div has started to move"], 
  onComplete: showMessage, 
  onCompleteParams: ["the green div is done moving"],
  delay: 1
});
gsap.to(".orange", {
  duration: 2,
  x: 300, 
  onStart: showMessage, 
  onStartParams: ["the orange div has started to move"], 
  onComplete: showMessage, 
  onCompleteParams: ["the orange div is done moving"],
  delay: 5
});

function showMessage(message) {
  output.innerHTML += message + "</br>";
}

 

모든 특수 속성의 자세한 목록은 API 문서를 참조하세요.

 

 

애니메이션 제어

애니메이션을 제어하려면 작업할 인스턴스가 필요합니다. to(), from() 및 fromTo() 메서드는 모두 트윈 인스턴스를 반환하므로 변수로 저장한 다음 쉽게 제어할 수 있습니다.

// 애니메이션에 대한 참조를 만듭니다
var tween = gsap.to("#logo", {duration: 1, x: 100});

// 일시 중지
tween.pause();

// 다시 시작 (방향 전환 - 역방향 또는 역방향 제외).
tween.resume();

// 역방향 (항상 처음으로 돌아감)
tween.reverse();

// 0.5초 점프
tween.seek(0.5);

// 진행률의 1/4로 점프
tween.progress(0.25);

// 절반 속도
tween.timeScale(0.5);

// 배속
tween.timeScale(2);

// 즉식 종료하고 가비지 컬렉션에 적합하게 만듬
tween.kill();

 

 

타임라인을 사용한 시퀀싱

복잡한 시퀀스를 짜는 것은 GSAP의 타임라인을 사용하면 매우 간단합니다.

타임라인은 스케쥴과 같이 시간에 배치하는 트윈 용 컨테이너입니다. 겹치거나 그 사이에 간격이 있을 수 있습니다. 타임라인의 재생 헤드가 이동함에 따라 하위 트윈을 스크럽하고 그에 따라 렌더링합니다! 표준 메서드 (play(), reverse(), pause() 등)를 사용하여 원하는만큼 삽입하고 전체 그룹을 제어합니다. 타임라인 안에 타임라인을 중첩 할 수도 있습니다!

타임라인에 익숙해지면 완전히 새로운 가능성의 세계가 열릴 것입니다. 애니메이션 코드를 모듈화 하는 환상적인 방법을 제공합니다.

 

타임라인을 사용하는 경우

• 애니메이션 그룹을 전체적으로 제어합니다.
• delay 값을 많이 사용하지 않고 시퀀스를 빌드합니다 (이전 애니메이션에 대한 타이밍 조정이 자동으로 나중 애니메이션에 영향을 미치도록 점진적으로 빌드하여 실험 및 유지 관리를 크게 단순화합니다).
• 애니메이션 코드를 모듈화합니다.
• 어떻게 복잡하게 짜든 지.
• 애니메이션 그룹을 기준으로 콜백을 실행하려면 (예: "모든 애니메이션이 완료된 후 myFunction()으로 전화하십시오.")

 

여기저기서 트윈 만하는 경우 타임라인이 과도 할 수 있습니다.

 

기본 시퀀싱

타임라인에는 to(), from(), fromTo()와 같은 익숙한 메소드가 있습니다. 이 메소드는 트윈을 만들고 타임라인에 add() 하는 빠른 방법입니다.

// 타임라인 인스턴스 생성
var tl = gsap.timeline();

// 다음 두 줄은 동일한 작업을 수행합니다. 
tl.add( gsap.to("#id", {duration: 2, x: 100}) );
tl.to("#id", {duration: 2, x: 100}); // 더 짧은 구문

기본적으로 애니메이션은 순서대로 삽입되지만 위치 매개 변수를 사용하여 작업이 진행되는 위치를 정확하게 제어할 수 있습니다.

데모 : 기본 시퀀싱

var tl = gsap.timeline({repeat: 30, repeatDelay: 1});

// 연속적으로 재생할 3 개의 트윈을 추가합니다.
tl.to(".green", {duration: 1, x: 200});
tl.to(".orange", {duration: 1, x: 200, scale: 0.2});
tl.to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

to() 메서드에 초점을 맞추지만 비슷한 방식으로 from() 또는 fromTo() 트윈을 타임라인에 추가 할 수 있습니다.

 

메서드 체이닝

메서드 체이닝은 코드를 매우 간결하게 유지할 수 있습니다.

var tl = gsap.timeline();

// 모든 to() 메서드를 한 줄에 연결
tl.to(".green", {duration: 1, x: 200}).to(".orange", {duration: 1, x: 200, scale: 0.2}).to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

// 가독성을 위해 각 to() 메서드를 자체 줄로 나누는 것이 좋습니다.
tl.to(".green", {duration: 1, x: 200})
  .to(".orange", {duration: 1, x: 200, scale: 0.2})
  .to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

 

타임라인 기본값

defaults라는 특수 속성을 사용하여 모든 하위 트윈과 타임라인에서 값을 상속할 수 있습니다. 따라서 위의 예에서 duration: 1을 입력하는 대신 타임라인의 defaults에 넣고 입력을 절약 할 수 있습니다!

var tl = gsap.timeline({defaults: {duration: 1}});

// 더 이상 duration: 1 반복 없음!
tl.to(".green", {x: 200})
  .to(".orange", {x: 200, scale: 0.2})
  .to(".grey", {x: 200, scale: 2, y: 20});

 

기본값에서 상속된 값은 상속된 속성에 대한 새 값을 포함하여 간단히 덮어 쓸 수 있습니다.

var tl = gsap.timeline({defaults: {duration: 1}});

tl.to(".green", {x: 200})
  .to(".orange", {duration: 3, x: 200, scale: 0.2}) // 상속된 기본값을 덮어 씁니다. 
  .to(".grey", {x: 200, scale: 2, y: 20});

 

위치 매개변수로 배치 제어

근사하고 정확하게 타이밍을 맞춘 시퀀스를 만드는 비결은 위치 매개 변수를 이해하는 것입니다. 매우 유연한 이 매개변수는  트윈, 레이블, 콜백, 일시정지, 중첩된 타임라인의 배치를 제어합니다.

 

위치 매개변수는 아래와 같이 변수 객체를 따릅니다.

tl.to(element, {x: 200})
  .to(element, {y: 200}, "+=1") // 타임라인 종료 후 1 초 (갭)
  .to(element, {rotation:90}, "-=0.5") // 타임라인 종료 0.5 초 전 (오버랩)
  .to(element, {scale: 4}, 6); // 타임라인 시작으로부터 정확히 6 초 (절대적)

 

아래 데모는 작동중인 위치 매개 변수를 보여줍니다.

// TimelineMax를 생성하고 1초 간격으로 3회 반복되도록 합니다.
var tl = gsap.timeline({repeat: 3, repeatDelay: 1});

tl.to(".green", {duration: 1, x: 200})
  // 이전 트윈이 끝난 후 1 초 후에 시작 (갭)
  .to(".orange", {duration: 1, x: 200, scale: 0.2}, "+=1")
  // 끝에 레이블을 추가합니다.
  .addLabel("greyAndPink")
  // 두 애니메이션을 동시에 "greyAndPink" 레이블에서 시작합니다.
  .to(".grey", {duration: 1, x: 200, scale: 2, y: 20}, "greyAndPink") 
  .to(".pink", {duration: 1, x: 200, rotation: 360}, "greyAndPink");

 

 

타임라인 제어

타임라인과 트윈은 공통 제어 방법 세트를 공유합니다. 모든 애니메이션의 재생 헤드는 부모 타임라인에 의해 제어되기 때문에 타임라인의 재생 헤드를 일시 중지하면 모든 하위 항목에 자동으로 영향을 줍니다. 타임라인에서 다른 time() 또는 progress()로 이동하면 모든 하위 항목이 그에 따라 렌더링됩니다.

 

타임라인 특수 속성

타임라인에는 생성자에 선택적으로 전달할 수있는 특수 속성이 있습니다. 가장 일반적으로 사용되는 타임라인 옵션은 다음과 같습니다.

 

• repeat : 애니메이션이 반복되는 횟수입니다.
• repeatDelay : 반복 사이의 시간(초)입니다.
• yoyo : true이면 재생이 반복될 때마다 앞뒤로 번갈아 재생됩니다.
• delay : 타임라인이 시작되기 전 시간(초)입니다.
• onComplete : 타임라인 재생이 끝났을 때 호출할 함수입니다.

var tl = gsap.timeline({
  repeat: 1, 
  yoyo: true, 
  onRepeat: onRepeatHandler,
  onComplete: onCompleteHandler
});

 

 

Getter/Setter 메소드

트윈과 타임라인은 유사한 콜백 및 제어 메서드를 공유할 뿐만 아니라 애니메이션의 특정 속성을 가져오고 설정하는 공통 메서드도 있습니다. 가장 일반적으로 사용되는 getter/setter 메서드는 다음과 같습니다.

• time() : repeat 또는 repeatDelay를 포함하지 않는 재생 헤드의 로컬 위치(현재 시간, 초)입니다.
• progress() : 재생 헤드의 위치를 ​​나타내는 0과 1 사이의 값으로 트윈의 진행률입니다. 여기서 0은 시작 부분, 0.5는 중간 완료, 1은 끝 부분입니다.
• duration() : repeat 또는 repeatDelay를 포함하지 않는 애니메이션의 지속 시간(초)입니다.
• delay() : 애니메이션의 초기 지연 시간(애니메이션이 시작되기 전의 시간, 초)입니다.

 

이러한 메서드는 setter(값 전달) 또는 getter(모든 인수 생략)로 사용할 수 있습니다. 아래 코드 샘플에서 duration() 메서드는 트윈과 타임라인 모두에 대해 정확히 동일한 방식으로 사용될 수 있습니다.

var tween = gsap.to(".orange", {duration: 1, x: 100});

console.log(tween.duration()); // 1

tween.duration(2); // duration을 2초로 설정

var tl = gsap.timeline();
tl.to(".green", {duration: 5, x: 200})
  .to(".orange", {duration: 5, x: 200});
  // 타임 라인에 5초 길이의 시퀀스된 트윈이 2개 있습니다.

console.log(tl.duration()); // 10

// duration을 2초로 설정합니다. 타임라인의 경우 실제로 timeScale을 변경하여 해당 기간 내에서 재생됩니다.
tl.duration(2);

 

 

요소 속성의 현재 값 얻기

트윈의 콜백 함수 내에서 this.targets()를 사용하여 트윈이 영향을 미치는 대상의 배열을 가져올 수 있습니다. 이것은 화살표 함수의 범위가 지정되는 방식으로 인해 화살표 함수 내에서 작동하지 않으므로 대상에 액세스해야하는 경우 일반 함수를 사용해야합니다.

 

특정 요소의 현재 값을 가져오려면 (화살표 내 기능을 포함하여 언제든지) GSAP의 .getProperty() 메서드를 사용하는 것이 가장 좋습니다.

let w = gsap.getProperty("#id", "width"); // 선택기 텍스트를 사용할 수 있다.
let bgColor = gsap.getProperty(element, "backgroundColor"); // 또는 변수 참조를 사용할 수 있다.

// this.targets()와 함께 사용됩니다.
gsap.to(".class", {x: 100, onUpdate: function() {
  let elem = this.targets()[0];
  
  console.log(gsap.getProperty(elem, "x");); // 콘솔에 트위닝된 첫 번째 요소에 사용된 모든 값을 기록합니다.
} });