GSAP 플러그인은(는) 무엇을 하나요?
이 스킬을 사용해야 하는 경우
GSAP 플러그인을 사용하거나 검토할 때 적용하세요: 플러그인 등록, 스크롤 이동, 플립/FLIP 애니메이션, 드래그 가능 요소, SVG(DrawSVG, MorphSVG, MotionPath), 텍스트(SplitText, ScrambleText), 물리, 이징 플러그인(CustomEase, EasePack, CustomWiggle, CustomBounce) 또는 GSDevTools. ScrollTrigger는 자체 스킬(gsap-scrolltrigger)이 있습니다.
관련 스킬: 핵심 트윈에는 gsap-core를, ScrollTrigger에는 gsap-scrolltrigger를, React에는 gsap-react를 사용하세요.
라이선스 및 설치 (중요)
모든 GSAP 플러그인은 상업적 사용을 포함해 무료입니다. Webflow의 GSAP 인수 이후 Club GSAP는 더 이상 유료 등급이 아니며 어떤 플러그인도 멤버십, 라이선스 키 또는 인증 토큰이 필요하지 않습니다 — 여기에는 이전에 Club 전용이었던 플러그인(SplitText, MorphSVG 등)이 포함됩니다.
- ✅ 모든 항목을 공개
gsapnpm 패키지에서 설치하세요:npm install gsap. 모든 플러그인이 포함되어 있습니다.gsap/SplitText,gsap/MorphSVGPlugin등으로 가져오세요. - ❌ GreenSock 인증 토큰이 포함된
.npmrc를 생성하거나, 비공개npm.greensock.com레지스트리를 제안하거나, 사용자에게 플러그인 접근을 위해 Club GSAP에 가입하라고 알리지 마세요. 해당 지침은 구식입니다.
플러그인 등록
각 플러그인을 한 번 등록하여 GSAP(및 번들러)가 포함해야 함을 알 수 있도록 하세요. 프로젝트에서 사용되는 모든 플러그인에 대해 **gsap.registerPlugin()**을 사용하세요:
import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";
gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
- ✅ 트윈 또는 API 호출에서 플러그인을 사용하기 전에 등록하세요.
- ✅ React에서는 최상위 레벨 또는 앱에서 한 번 등록하세요(예: 첫 useGSAP 전); 다시 렌더링되는 컴포넌트 내부에서 등록하지 마세요. useGSAP는 사용 전에 등록해야 하는 플러그인입니다.
스크롤
ScrollToPlugin
스크롤 위치(창 또는 스크롤 가능 요소)를 애니메이션합니다. ScrollTrigger 없이 "요소로 스크롤" 또는 "위치로 스크롤"에 사용하세요.
gsap.registerPlugin(ScrollToPlugin);
gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
ScrollToPlugin — 주요 설정 (scrollTo 객체):
| 옵션 | 설명 |
|---|---|
x, y | 대상 스크롤 위치(숫자) 또는 최대값의 경우 "max" |
element | 스크롤할 요소로 이동시키기 위한 선택자 또는 요소 |
offsetX, offsetY | 대상 위치에서의 오프셋(픽셀) |
ScrollSmoother
부드러운 스크롤 래퍼(네이티브 스크롤을 부드럽게 처리). ScrollTrigger와 특정 DOM 구조(콘텐츠 래퍼 + 부드러운 래퍼)가 필요합니다. 모멘텀 스타일의 부드러운 스크롤이 필요할 때 사용하세요. 설정은 GSAP 문서를 참조하고 ScrollTrigger 후에 등록하세요. DOM 구조는 다음과 같아야 합니다:
<body>
<div id="smooth-wrapper">
<div id="smooth-content">
<!--- 모든 콘텐츠는 여기에 --->
</div>
</div>
<!-- position: fixed 요소는 외부에 배치 가능 --->
</body>
DOM / UI
Flip
Flip.getState()로 상태를 캡처한 후 변경 사항(예: 레이아웃 또는 클래스 변경)을 적용한 다음 Flip.from()을 사용하여 이전 상태에서 새 상태로 애니메이션합니다(FLIP: First, Last, Invert, Play). 두 레이아웃 상태(목록, 그리드, 확장/축소) 사이를 애니메이션할 때 사용하세요.
gsap.registerPlugin(Flip);
const state = Flip.getState(".item");
// DOM 변경 (재정렬, 추가/제거, 클래스 변경)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
Flip — 주요 설정 (Flip.from vars):
| 옵션 | 설명 |
|---|---|
absolute | 플립 중 position: absolute 사용 (기본값: false) |
nested | true인 경우 첫 번째 수준의 자식만 측정됨(중첩된 변환에 더 좋음) |
scale | true인 경우 요소를 맞게 크기 조정(늘어짐 방지); 기본값 true |
simple | true인 경우 위치/크기만 애니메이션(더 빠르고 덜 정확) |
duration, ease | 표준 트윈 옵션 |
추가 정보
https://gsap.com/docs/v3/Plugins/Flip
Draggable
요소를 마우스/터치로 드래그, 회전 또는 던질 수 있게 만듭니다. 슬라이더, 카드, 재정렬 가능 목록 또는 모든 드래그 상호작용에 사용하세요.
gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
Draggable.create(".knob", { type: "rotation" });
Draggable — 주요 설정 옵션:
| 옵션 | 설명 |
|---|---|
type | "x", "y", "x,y", "rotation", "scroll" |
bounds | 드래그를 제한하는 요소, 선택자 또는 { minX, maxX, minY, maxY } |
inertia | true로 던지기/모멘텀 활성화(InertiaPlugin 필요) |
edgeResistance | 0–1; 경계를 넘어 드래그할 때의 저항 |
cursor | 드래그 중 CSS 커서 |
onDragStart, onDrag, onDragEnd | 콜백; 이벤트와 대상을 받음 |
onThrowUpdate, onThrowComplete | 관성이 활성화될 때의 콜백 |
Inertia (InertiaPlugin)
Draggable과 함께 작동하여 해제 후 모멘텀을 제공하거나, 객체의 모든 속성의 관성/속도를 추적하여 간단한 트윈을 통해 매끄럽게 정지할 수 있도록 합니다. inertia: true를 사용할 때 Draggable과 함께 등록하세요:
gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", inertia: true });
또는 속성의 속도를 추적합니다:
InertiaPlugin.track(".box", "x");
그런 다음 "auto"를 사용하여 현재 속도를 계속 유지하고 정지합니다:
gsap.to(obj, { inertia: { x: "auto" } });
Observer
장치 간 포인터 및 스크롤 입력을 정규화합니다. ScrollTrigger처럼 스크롤 위치에 직접 연결하지 않고 스와이프, 스크롤 방향 또는 사용자 정의 제스처 로직에 사용하세요.
gsap.registerPlugin(Observer);
Observer.create({
target: "#area",
onUp: () => {},
onDown: () => {},
onLeft: () => {},
onRight: () => {},
tolerance: 10
});
Observer — 주요 설정 옵션:
| 옵션 | 설명 |
|---|---|
target | 관찰할 요소 또는 선택자 |
onUp, onDown, onLeft, onRight | 스와이프/스크롤이 해당 방향의 임계값을 초과할 때의 콜백 |
tolerance | 방향이 감지되기 전의 픽셀; 기본값 10 |
type | "touch", "pointer" 또는 "wheel" (기본값: "touch,pointer") |
텍스트
SplitText
요소의 텍스트를 문자, 단어 및/또는 줄로 분할(각각 자체 요소 안에)하여 지연 애니메이션 또는 단위별 애니메이션에 사용합니다. 텍스트를 문자별, 단어별 또는 줄별로 애니메이션할 때 사용하세요. chars, words, lines를 포함하는 인스턴스를 반환합니다(masks가 설정된 경우 masks 포함). **revert()**로 원래 마크업을 복원하거나 **gsap.context()**가 복원하도록 합니다. gsap.context(), matchMedia() 및 **useGSAP()**와 통합됩니다. API: SplitText.create(target, vars) (target = 선택자, 요소 또는 배열).
gsap.registerPlugin(SplitText);
const split = SplitText.create(".heading", { type: "words, chars" });
gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
// 나중에: split.revert() 또는 gsap.context() 정리가 복원하도록 함
onSplit()(v3.13.0+)을 사용하면 자동 분할(autoSplit)이 사용될 때 각 분할 및 재분할에서 애니메이션이 실행됩니다. **onSplit()**에서 트윈/타임라인을 반환하면 SplitText가 재분할 시 애니메이션을 정리하고 진행 상황을 동기화할 수 있습니다:
SplitText.create(".split", {
type: "lines",
autoSplit: true,
onSplit(self) {
return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
}
});
SplitText — 주요 설정 (SplitText.create vars):
| 옵션 | 설명 |
|---|---|
| type | 쉼표로 구분: "chars", "words", "lines". 기본값 "chars,words,lines". 필요한 것만 분할하세요(예: 줄을 사용하지 않는 경우 "words, chars") 성능 향상. 문자만 분할할 때는 단어/줄 없이 하지 말거나 smartWrap: true를 사용하여 비정상적인 줄바꿈을 방지하세요. |
| charsClass, wordsClass, linesClass | 각 분할 요소의 CSS 클래스. "++"를 추가하여 증가하는 클래스를 추가합니다(예: linesClass: "line++" → line1, line2, …). |
| aria | "auto" (기본값), "hidden" 또는 "none". 접근성: "auto"는 분할 요소에 aria-label을 추가하고 줄/단어/문자 요소에 aria-hidden을 추가하여 스크린 리더가 레이블을 읽도록 함; "hidden"은 모든 것을 리더에서 숨김; "none"은 aria를 변경하지 않음. 중첩된 링크/의미가 노출되어야 하는 경우 스크린 리더 전용 복제본과 함께 "none"을 사용하세요. |
| autoSplit | true인 경우 글꼴 로딩이 완료되거나 요소 너비가 변경될 때(그리고 줄이 분할된 경우) 복원 후 재분할하여 잘못된 줄바꿈을 방지합니다. 애니메이션은 onSplit() 내부에서 생성되어야 새로 분할된 요소를 대상으로 합니다. 자동 정리 및 재분할 시 시간 동기화를 위해 **onSplit()**에서 애니메이션을 반환하세요. |
| onSplit(self) | 분할 완료 시 콜백(autoSplit이 true인 경우 각 재분할 시에도). SplitText 인스턴스를 받습니다. GSAP 트윈 또는 타임라인을 반환하면 재분할 시 해당 애니메이션의 자동 복원/동기화가 가능합니다. |
| mask | "lines", "words" 또는 "chars". 각 단위를 overflow: clip이 있는 추가 요소로 감싸 마스크/드러내기 효과를 냅니다. 하나의 유형만 가능; 인스턴스의 masks 배열에서 래퍼에 접근합니다(또는 클래스가 설정된 경우 -mask 클래스 사용). |
| tag | 래퍼 요소 태그; 기본값 "div". 인라인의 경우 "span" 사용(참고: 회전/크기 조정과 같은 변환은 일부 브라우저에서 인라인 요소에 렌더링되지 않을 수 있음). |
| deepSlice | true(기본값)인 경우 여러 줄에 걸쳐 있는 중첩 요소(예: <strong>)가 세로로 늘어나지 않도록 하위 분할됩니다. 줄을 분할할 때만 적용됩니다. |
| ignore | 분할하지 않을 선택자 또는 요소(예: ignore: "sup"). |
| smartWrap | chars만 분할할 때 단어를 white-space: nowrap 스팬으로 감싸 단어 중간 줄바꿈을 방지합니다. 단어나 줄이 분할되면 무시됩니다. 기본값 false. |
| wordDelimiter | 단어 경계: 문자열(기본값 " "), RegExp 또는 사용자 정의 분할을 위한 { delimiter: RegExp, replaceWith: string }(예: 해시태그용 제로 너비 조이너, 또는 비라틴 문자). |
| prepareText(text, parent) | 원시 텍스트와 부모 요소를 받는 함수; 분할 전 수정된 텍스트를 반환합니다(예: 공백이 없는 언어에 대한 중단 마커 삽입). |
| propIndex | true인 경우 각 분할 요소에 인덱스가 있는 CSS 변수를 추가합니다(예: --word: 1, --char: 2). |
| reduceWhiteSpace | 연속 공백을 축소합니다; 기본값 true. v3.13.0부터 줄바꿈도 적용하고 <pre>에 <br>을 삽입할 수 있습니다. |
| onRevert | 인스턴스가 복원될 때의 콜백. |
팁: 애니메이션할 것만 분할하세요(예: 단어만 애니메이션하는 경우 문자 건너뛰기). 사용자 정의 글꼴의 경우 로드 후 분할하거나(예: document.fonts.ready.then(...)) **onSplit()**과 함께 autoSplit: true를 사용하세요. 문자 분할 시 커닝 이동을 방지하려면 CSS font-kerning: none; text-rendering: optimizeSpeed;를 사용하세요. text-wrap: balance는 분할을 방해할 수 있으므로 피하세요. SplitText는 SVG <text>를 지원하지 않습니다.
더 알아보기: SplitText
ScrambleText
스크램블/글리치 효과로 텍스트를 애니메이션합니다. 스크램블 효과로 텍스트를 드러내거나 전환할 때 사용하세요.
gsap.registerPlugin(ScrambleTextPlugin);
gsap.to(".text", {
duration: 1,
scrambleText: { text: "New message", chars: "01", revealDelay: 0.5 }
});
SVG
DrawSVG (DrawSVGPlugin)
stroke-dashoffset / stroke-dasharray를 애니메이션하여 SVG 요소의 선을 드러내거나 숨깁니다. <path>, <line>, <polyline>, <polygon>, <rect>, <ellipse>에서 작동합니다. 선을 "그리거나" "지울" 때 사용하세요.
drawSVG 값: 경로를 따라 선의 보이는 세그먼트를 설명합니다(시작 및 끝 위치). "시간에 따라 A에서 B로 애니메이션"이 아닙니다. 형식: 퍼센트 또는 길이로 "start end". 예: "0% 100%" = 전체 선; "20% 80%" = 20%와 80% 사이의 선만(양쪽 끝에 간격). 트윈은 요소의 현재 세그먼트에서 대상 세그먼트로 애니메이션합니다. 예: gsap.to("#path", { drawSVG: "0% 100%" })는 현재 상태에서 전체 선으로 이동합니다. 단일 값(예: 0, "100%")은 시작이 0임을 의미: "100%"는 "0% 100%"와 동일합니다.
필수: 요소에 보이는 선이 있어야 합니다. CSS 또는 SVG 속성으로 stroke 및 stroke-width를 설정하세요; 그렇지 않으면 아무것도 그려지지 않습니다.
gsap.registerPlugin(DrawSVGPlugin);
// 아무것도 없는 상태에서 전체 선으로 그리기
gsap.from("#path", { duration: 1, drawSVG: 0 });
// 또는 명시적 세그먼트: 0–0에서 0–100%로
gsap.fromTo("#path", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%", duration: 1 });
// 중간에만 선 (끝에 간격)
gsap.to("#path", { duration: 1, drawSVG: "20% 80%" });
주의사항: 선에만 영향을 미칩니다(채우기 아님). 단일 세그먼트 <path> 요소를 선호하세요; 다중 세그먼트 경로는 일부 브라우저에서 이상하게 렌더링될 수 있습니다. <use>의 내용은 시각적으로 변경할 수 없습니다. DrawSVGPlugin.getLength(element) 및 **DrawSVGPlugin.getPosition(element)**는 선 길이와 현재 위치를 반환합니다.
더 알아보기: DrawSVG
MorphSVG (MorphSVGPlugin)
d 속성(경로 데이터)을 애니메이션하여 한 SVG 모양을 다른 모양으로 변형합니다. 시작 및 끝 모양은 동일한 수의 점이 필요하지 않습니다. MorphSVG는 3차 베지어로 변환하고 필요에 따라 점을 추가합니다. 아이콘 간 변형, 모양 전환 또는 경로 기반 애니메이션에 사용하세요. <path>, <polyline> 및 <polygon>에서 작동합니다. <circle>, <rect>, <ellipse> 및 <line>은 내부적으로 또는 **MorphSVGPlugin.convertToPath(선택자 | 요소)**를 통해 변환됩니다(DOM에서 요소를 <path>로 대체).
morphSVG 값: 선택자(예: "#lightning"), 요소, 원시 경로 데이터(예: "M47.1,0.8 73.3,0.8...") 또는 다각형/폴리라인의 경우 점 문자열(예: "240,220 240,260 260,260")일 수 있습니다.
gsap.registerPlugin(MorphSVGPlugin);
// 선택자 사용 (대상을 자동으로 찾음)
gsap.to("#lightning", { morphSVG: "#circle" });
// raw 데이터 사용
gsap.to("#shape", { morphSVG: { shape: "M10,10 L100,10 L100,100 Z" } });
// convertToPath를 사용하여 직사각형을 경로로 변환
MorphSVGPlugin.convertToPath("rect");
gsap.to("rect", { morphSVG: "#star" });
MorphSVG — 주요 config (morphSVG 객체):
| 옵션 | 설명 |
|---|---|
shape | 대상 모양(선택자, 요소 또는 원시 경로 데이터) |
ease | 변형에 사용할 이징 함수(기본값: "power1.inOut") |
prepend | 경로 데이터 앞에 추가할 문자열(예: "M0,0 ") |
append | 경로 데이터 뒤에 추가할 문자열(예: " Z") |
shapeIndex | 경로 데이터에서 사용할 모양 인덱스(다중 모양 경로용) |
type | "rotational" (기본값) or "linear" — 점 매핑 방식 |
map | 점 매핑 함수(고급 사용자 정의용) |
주의사항: 성능상의 이유로 가능한 경우 선택자 사용을 선호하세요. 변형이 예상대로 보이지 않으면 type: "linear"를 시도하세요. 복잡한 모양은 많은 점이 필요할 수 있습니다. 변환이 필요하지 않은 경우 불필요한 변환을 피하세요.
더 알아보기: MorphSVG
MotionPath (MotionPathPlugin)
SVG 경로를 따라 요소를 애니메이션합니다. 사용자 정의 경로, 미리 정의된 경로(예: 원, 직사각형) 또는 기존 SVG 경로 요소를 사용할 수 있습니다.
gsap.registerPlugin(MotionPathPlugin);
gsap.to(".element", {
motionPath: {
path: "#path",
align: "#path",
alignOrigin: [0.5, 0.5]
},
duration: 2,
ease: "power1.inOut"
});
MotionPath — 주요 config (motionPath 객체):
| 옵션 | 설명 |
|---|---|
path | 경로(선택자, 요소, 점 배열 또는 raw 경로 데이터 문자열) |
align | 경로 방향에 요소 정렬(선택자, 요소 또는 true) |
alignOrigin | 정렬 기준점(예: [0.5, 0.5]는 중앙 정렬) |
offsetX, offsetY | 경로에서 요소 오프셋(픽셀) |
autoRotate | 경로 방향에 맞게 요소 회전 (기본값: false) |
start, end | 경로의 시작 및 끝 지점(0–1) |
curviness | 경로 곡률(기본값: 1) |
resolution | 경로 해상도(기본값: 20) |
더 알아보기: MotionPath
물리
Physics2DPlugin
중력, 속도 및 각도를 시뮬레이션하는 2D 물리 애니메이션을 만듭니다. 발사체, 튀는 공 또는 중력 기반 효과에 사용하세요.
gsap.registerPlugin(Physics2DPlugin);
gsap.to(".ball", {
physics2D: {
velocity: 400,
angle: 60,
gravity: 800,
bounce: 0.8
},
duration: 3
});
Physics2D — 주요 config (physics2D 객체):
| 옵션 | 설명 |
|---|---|
velocity | 초기 속도(px/s) |
angle | 발사 각도(도) |
gravity | 중력(px/s²) |
bounce | 바운스 계수(0–1) |
friction | 마찰 계수(기본값: 0) |
acceleration | 추가 가속도(객체) |
더 알아보기: Physics2D
PhysicsPropsPlugin
특정 속성(예: x, y, rotation)에 물리 시뮬레이션을 적용합니다. 자연스러운 관성, 감쇠, 탄성 또는 스프링 같은 동작을 만드는 데 사용하세요.
gsap.registerPlugin(PhysicsPropsPlugin);
gsap.to(".box", {
physicsProps: {
x: { velocity: 200, acceleration: -50 },
rotation: { velocity: 100, friction: 0.2 }
},
duration: 4
});
PhysicsProps — 주요 config: 각 속성에 대해 { velocity, acceleration, friction, spring, stiffness, damping } 객체를 전달합니다.
더 알아보기: PhysicsProps
이징
CustomEase
사용자 정의 이징 곡선을 만듭니다. 베지어 경로를 사용하거나 GSAP의 도구에서 곡선을 생성할 수 있습니다.
gsap.registerPlugin(CustomEase);
CustomEase.create("myCustomEase", "M0,0 C0.5,1 0.5,0 1,1");
// 사용자 정의 이징 사용
gsap.to(".box", { x: 200, ease: "myCustomEase", duration: 1 });
CustomEase.create(name, pathData):
name: 이징 함수의 고유 이름pathData: 4개의 제어점이 있는 SVG 경로 데이터 문자열 (예:"M0,0 C0.5,1 0.5,0 1,1")
더 알아보기: CustomEase
EasePack
여분의 이징 함수 모음: Sine, Circ, Back, Bounce, Elastic(기본 GSAP보다 더 많은 변형). 추가 이징이 필요할 때 사용하세요.
gsap.registerPlugin(EasePack);
gsap.to(".box", { x: 200, ease: "sine.inOut", duration: 1 });
gsap.to(".box", { y: 200, ease: "elastic.out(1, 0.3)", duration: 2 });
더 알아보기: EasePack
CustomWiggle
사용자 정의 흔들기 패턴을 만듭니다. 떨림, 진동 또는 "흔들림" 효과에 사용하세요.
gsap.registerPlugin(CustomWiggle);
CustomWiggle.create("myWiggle", { wiggles: 8, type: "sine" });
gsap.to(".box", { x: 100, ease: "myWiggle", duration: 1 });
CustomWiggle.create(name, config):
wiggles: 흔들기 횟수(숫자)type:"sine","sharp","bounce"중 하나amplitude: 흔들기 진폭(기본값:50)ease: 흔들기의 이징
더 알아보기: CustomWiggle
CustomBounce
사용자 정의 바운스 곡선을 만듭니다. 바운스의 힘과 간격을 제어하세요.
gsap.registerPlugin(CustomBounce);
CustomBounce.create("myBounce", { strength: 0.7, squash: 2, squashDuration: 0.3 });
gsap.to(".box", { y: 100, ease: "myBounce", duration: 2 });
CustomBounce.create(name, config):
strength: 바운스 강도(0–1)squash: 찌그러짐 강도(기본값:1)squashDuration: 찌그러짐 기간(초)endAtStart: 바운스가 시작 위치에서 끝남(기본값:false)
더 알아보기: CustomBounce
GSDevTools
GSAP 애니메이션을 시각적으로 디버깅하기 위한 개발자 도구. 트윈/타임라인을 제어하고, 현재 시간을 확인하고, 속도를 조정할 수 있습니다.
gsap.registerPlugin(GSDevTools);
const tl = gsap.timeline();
tl.to(".box", { x: 200 });
GSDevTools.create({ animation: tl });
GSDevTools.create(config):
| 옵션 | 설명 |
|---|---|
animation | 제어할 타임라인 또는 트윈 |
container | 도구를 배치할 요소(선택 사항) |
css | 사용자 정의 CSS(선택 사항) |
global | 전역 객체에 애니메이션 할당(기본값: true) |
더 알아보기: GSDevTools
텍스트 스크램블(고급)
ScrambleTextPlugin (고급 사용)
텍스트를 스크램블/글리치 효과로 애니메이션하고, 사용자 정의 문자 세트, 지연 드러내기 등이 가능합니다.
gsap.registerPlugin(ScrambleTextPlugin);
gsap.to(".text", {
duration: 2,
scrambleText: {
text: "Revealed text!",
chars: "abcdefghijklmnopqrstuvwxyz",
revealDelay: 0.5,
tweenLength: false
}
});
ScrambleText — 주요 config:
| 옵션 | 설명 |
|---|---|
text | 최종 텍스트(문자열) |
chars | 스크램블에 사용할 문자(문자열; 기본값: 대소문자 알파벳 및 숫자) |
revealDelay | 각 문자를 순서대로 드러내기 전 지연 시간(초) |
tweenLength | 최종 텍스트와 길이가 다른 경우 텍스트 길이를 트윈(기본값: true) |
speed | 스크램블 속도(기본값: 1) |
delimiter | 텍스트 분할에 사용할 구분 기호(기본값: "") |
더 알아보기: ScrambleText
추가 정보 및 문서
다른 GSAP 스킬에 대해서는 gsap-core (핵심 트윈), gsap-scrolltrigger (ScrollTrigger), gsap-react (React 통합)를 확인하세요.