{"id":441,"date":"2026-06-26T13:35:39","date_gmt":"2026-06-26T13:35:39","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=441"},"modified":"2026-06-26T13:35:39","modified_gmt":"2026-06-26T13:35:39","slug":"gsap-2","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=441","title":{"rendered":"GSAP \ud50c\ub7ec\uadf8\uc778 \uc885\ub958\uc640 \uae30\ucd08 \uc560\ub2c8\uba54\uc774\uc158"},"content":{"rendered":"

GSAP(GreenSock Animation Platform)\uc740 \uc6f9\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc774 \uc4f0\uc774\ub294 JavaScript \uc560\ub2c8\uba54\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\ub2e4.<\/p>\n

CSS\ub098 \uc21c\uc218 JavaScript\ubcf4\ub2e4 \ud0c1\uc6d4\ud55c \ud37c\ud3ec\uba3c\uc2a4\ub97c \ubc1c\ud718\ud560 \uc218 \uc788\ub3c4\ub85d \ucd5c\uc801\ud654\ub41c \uc560\ub2c8\uba54\uc774\uc158 \uc804\uc6a9 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\uba70, 12\ub9cc \uac1c \uc774\uc0c1\uc758 \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ub418\uace0 \uc788\ub2e4.<\/p>\n

\n

2024\ub144 10\uc6d4 Webflow\uac00 GSAP\uc744 \uc778\uc218\ud588\ub2e4. 2025\ub144 4\uc6d4 30\uc77c\ubd80\ud130 GSAP 3.13 \ubc84\uc804\uacfc \ud568\uaed8 \ubaa8\ub4e0 \ud50c\ub7ec\uadf8\uc778\uc774 100% \ubb34\ub8cc<\/strong>\ub85c \uc804\ud658\ub418\uc5c8\ub2e4. \uc774\uc804\uc5d0 \uc720\ub8cc\uc600\ub358 SplitText, MorphSVG \ub4f1\ub3c4 \uc0c1\uc5c5 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ubb34\ub8cc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n

\n

Note<\/strong>: ### 0.1. \ucc38\uc870\ub9c1\ud06c<\/p>\n

    \n
  1. GSAP \uacf5\uc2dd\uc0ac\uc774\ud2b8<\/a><\/li>\n
  2. GSAP CodePen<\/a><\/li>\n
  3. GSAP \uce58\ud2b8\uc2dc\ud2b8<\/a><\/li>\n<\/ol>\n<\/blockquote>\n
    \n

    1. GSAP \uc124\uce58\uc640 \uae30\ubcf8 \uc138\ud305<\/h2>\n

    1.1. CDN\uc73c\ub85c \ubd88\ub7ec\uc624\uae30<\/h3>\n

    \uac00\uc7a5 \uac04\ub2e8\ud55c \ubc29\ubc95\uc740 HTML \ud30c\uc77c\uc5d0 CDN \ub9c1\ud06c\ub97c \ucd94\uac00\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n

    <!DOCTYPE html>\n<html lang="ko">\n<head>\n  <meta charset="UTF-8" \/>\n  <title>GSAP \uc2dc\uc791\ud558\uae30<\/title>\n<\/head>\n<body>\n  <div class="box">\uc548\ub155 GSAP!<\/div>\n  <script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n  <script src="app.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    8<\/td>\n\uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud560 \ub300\uc0c1 element\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    9<\/td>\nGSAP \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c CDN\uc5d0\uc11c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
    10<\/td>\n\uc6b0\ub9ac\uac00 \uc791\uc131\ud560 JavaScript \ud30c\uc77c\uc744 \uc5f0\uacb0\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    Tip<\/strong>: CDN \ubc29\uc2dd\uc740 \ubcc4\ub3c4 \uc124\uce58 \uc5c6\uc774 \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4 \ud559\uc2b5 \ub2e8\uacc4\uc5d0\uc11c \ud3b8\ub9ac\ud558\ub2e4.<\/p>\n<\/blockquote>\n
    1.2. npm\uc73c\ub85c \uc124\uce58\ud558\uae30<\/h3>\n
    React\ub098 Vite \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 npm\uc73c\ub85c \uc124\uce58\ud55c\ub2e4. GSAP 3.13\ubd80\ud130 \ubaa8\ub4e0 \ud50c\ub7ec\uadf8\uc778\uc774 \uacf5\uac1c npm \uc800\uc7a5\uc18c\uc5d0 \ud3ec\ud568\ub418\uc5b4, \ubcc4\ub3c4\uc758 token\uc774\ub098 \ube44\uacf5\uac1c \uc800\uc7a5\uc18c \uc124\uc815\uc774 \ud544\uc694 \uc5c6\ub2e4.<\/p>\n
    npm install gsap\n<\/code><\/pre>\n
    import gsap from "gsap";\n<\/code><\/pre>\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n\uc124\uce58\ud55c gsap package\ub97c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    Info<\/strong>: React \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 @gsap\/react<\/code> \ud328\ud0a4\uc9c0\ub3c4 \ud568\uaed8 \uc124\uce58\ud558\uba74 useGSAP()<\/code> hook\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. npm install gsap @gsap\/react<\/code><\/p>\n<\/blockquote>\n
    2. Tween \u2014 \ud575\uc2ec Method 4\uac00\uc9c0<\/h2>\n
    Tween\uc740 GSAP\uc758 \uae30\ubcf8 \uc560\ub2c8\uba54\uc774\uc158 \ub2e8\uc704\uc774\ub2e4. \ub300\uc0c1(target), \uc9c0\uc18d \uc2dc\uac04(duration), \uc18d\uc131\uc744 \uc785\ub825\ud558\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc644\uc131\ud574\uc900\ub2e4.<\/p>\n
    2.1. gsap.to() \u2014 "\uc5ec\uae30\ub85c \uac00\ub77c"<\/h3>\n
    \ud604\uc7ac \uc0c1\ud0dc\uc5d0\uc11c \uc9c0\uc815\ud55c \uac12\uc73c\ub85c<\/strong> \ubcc0\ud654\uc2dc\ud0a8\ub2e4. \uac00\uc7a5 \ub9ce\uc774 \uc4f0\ub294 method\uc774\ub2e4. duration \ubbf8\uc9c0\uc815 \uc2dc \uae30\ubcf8\uac12\uc740 0.5\ucd08\uc774\ub2e4.
    \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
    gsap.to(".box", {\n  x: 200,\n  duration: 1,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n.box<\/code> class\ub97c \uac00\uc9c4 \uc694\uc18c\ub97c \uc120\ud0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\nx\ucd95(\uac00\ub85c)\uc73c\ub85c 200px \uc774\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\n1\ucd08 \ub3d9\uc548 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    2.2. gsap.from() \u2014 "\uc5ec\uae30\uc11c \ucd9c\ubc1c\ud558\ub77c"<\/h3>\n
    \uc9c0\uc815\ud55c \uac12\uc5d0\uc11c<\/strong> \ud604\uc7ac \uc0c1\ud0dc\ub85c \ubcc0\ud654\uc2dc\ud0a8\ub2e4. \ub4f1\uc7a5 \ud6a8\uacfc\uc5d0 \uc790\uc8fc \uc4f4\ub2e4.<\/p>\n
    gsap.from(".box", {\n  y: -100,\n  opacity: 0,\n  duration: 1,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n.box<\/code> \uc694\uc18c\ub97c \uc120\ud0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\ny\ucd95(\uc138\ub85c) -100px \uc704\uce58\uc5d0\uc11c \ucd9c\ubc1c\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\nopacity 0(\uc644\uc804 \ud22c\uba85)\uc5d0\uc11c \uc2dc\uc791\ud55c\ub2e4<\/td>\n<\/tr>\n
    4<\/td>\n1\ucd08 \ub3d9\uc548 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    2.3. gsap.fromTo() \u2014 "\uc5ec\uae30\uc11c \uc800\uae30\uae4c\uc9c0"<\/h3>\n
    \uc2dc\uc791 \uac12\uacfc \ub05d \uac12\uc744 \ub458 \ub2e4 \uc9c1\uc811<\/strong> \uc9c0\uc815\ud55c\ub2e4.<\/p>\n
    gsap.fromTo(".box",\n  { x: 0, opacity: 0 },\n  { x: 300, opacity: 1, duration: 1 }\n);\n<\/code><\/pre>\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    2<\/td>\n\uccab \ubc88\uc9f8 object\uac00 \uc2dc\uc791 \uac12\uc774\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\n\ub450 \ubc88\uc9f8 object\uac00 \ub05d \uac12\uc774\ub2e4. duration\ub3c4 \uc5ec\uae30\uc5d0 \ub123\ub294\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    2.4. 2.4 gsap.set() \u2014 "\uc989\uc2dc \ubc14\uafd4\ub77c"<\/h3>\n
    \uc560\ub2c8\uba54\uc774\uc158 \uc5c6\uc774 \uc989\uc2dc<\/strong> \uc18d\uc131\uc744 \ubcc0\uacbd\ud55c\ub2e4. \ucd08\uae30\uac12 \uc124\uc815\uc5d0 \uc4f4\ub2e4.<\/p>\n
    gsap.set(".box", {\n  x: 100,\n  opacity: 0.5,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n.box<\/code> \uc694\uc18c\ub97c \uc120\ud0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\n\uc989\uc2dc x\ucd95 100px \uc704\uce58\ub85c \uc774\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\n\uc989\uc2dc opacity\ub97c 0.5(\ubc18\ud22c\uba85)\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    2.5. Tween \uc2e4\uc804 \uc608\uc81c \u2014 \uc774\ub3d9 + \ud68c\uc804 + \uc0c9\uc0c1<\/h3>\n
    \uc5ec\ub7ec \uc18d\uc131\uc744 \ub3d9\uc2dc\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\ud560 \uc218 \uc788\ub2e4.
    \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
    gsap.to(".box1", {\n  duration: 3,\n  x: 200,\n  opacity: 0.2,\n  ease: "steps(10)",\n  delay: 2,\n});\ngsap.to(".box2", {\n  duration: 3,\n  x: 200,\n  rotate: 720,\n  scale: 1.3,\n});\ngsap.to(".box3", {\n  duration: 3,\n  x: 200,\n  ease: "elastic",\n  backgroundColor: "red",\n  width: 300,\n  fontSize: 60,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1~7<\/td>\n.box1<\/code>\uc744 3\ucd08\uac04 \uc774\ub3d9\ud558\uba70, 10\ub2e8\uacc4\ub85c \ub04a\uc5b4\uc9c0\ub294 ease\ub97c \uc801\uc6a9\ud55c\ub2e4. 2\ucd08 \ud6c4 \uc2dc\uc791\ud55c\ub2e4<\/td>\n<\/tr>\n
    8~13<\/td>\n.box2<\/code>\ub97c \uc774\ub3d9\ud558\uba74\uc11c 720\ub3c4 \ud68c\uc804\ud558\uace0 1.3\ubc30\ub85c \ud655\ub300\ud55c\ub2e4<\/td>\n<\/tr>\n
    14~22<\/td>\n.box3<\/code>\ub97c \uc774\ub3d9\ud558\uba74\uc11c elastic ease, \ubc30\uacbd\uc0c9 \ubcc0\uacbd, \ud06c\uae30\uc640 \uae00\uc790 \ud06c\uae30\ub97c \ub3d9\uc2dc\uc5d0 \ubc14\uafbc\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    Note<\/strong>: from()<\/code>\uc73c\ub85c \ubc14\uafb8\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc18\uc804<\/strong>\ub418\uc5b4 \uc2e4\ud589\ub41c\ub2e4. \uc9c0\uc815\ud55c \uac12\uc5d0\uc11c \uc6d0\ub798 \uac12\uc73c\ub85c \ub3cc\uc544\uc624\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n<\/blockquote>\n
    \n
    3. \uc790\uc8fc \uc4f0\ub294 \uc560\ub2c8\uba54\uc774\uc158 \uc18d\uc131<\/h3>\n
    \uc544\ub798 \uc18d\uc131\ub4e4\uc740 to()<\/code>, from()<\/code>, fromTo()<\/code> \uc548\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \uc870\ud569\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \uc18d\uc131<\/th>\n\uc124\uba85<\/th>\n\uc608\uc2dc \uac12<\/th>\n<\/tr>\n<\/thead>\n
    x<\/code><\/td>\n\uac00\ub85c \uc774\ub3d9<\/td>\n100<\/code>, -50<\/code><\/td>\n<\/tr>\n
    y<\/code><\/td>\n\uc138\ub85c \uc774\ub3d9<\/td>\n200<\/code>, -100<\/code><\/td>\n<\/tr>\n
    rotation<\/code><\/td>\n\ud68c\uc804(\ub3c4)<\/td>\n360<\/code>, -90<\/code><\/td>\n<\/tr>\n
    scale<\/code><\/td>\n\ud06c\uae30 \ubc30\uc728<\/td>\n2<\/code>(2\ubc30), 0.5<\/code>(\uc808\ubc18)<\/td>\n<\/tr>\n
    opacity<\/code><\/td>\n\ud22c\uba85\ub3c4<\/td>\n0<\/code>~`1`<\/td>\n<\/tr>\n
    duration<\/code><\/td>\n\uc9c0\uc18d \uc2dc\uac04(\ucd08)<\/td>\n1<\/code>, 0.5<\/code>, 2<\/code><\/td>\n<\/tr>\n
    delay<\/code><\/td>\n\uc9c0\uc5f0 \uc2dc\uac04(\ucd08)<\/td>\n0.5<\/code>, 1<\/code><\/td>\n<\/tr>\n
    repeat<\/code><\/td>\n\ubc18\ubcf5 \ud69f\uc218<\/td>\n3<\/code>, -1<\/code>(\ubb34\ud55c)<\/td>\n<\/tr>\n
    repeatDelay<\/code><\/td>\n\ubc18\ubcf5 \uc804 \uc9c0\uc5f0 \uc2dc\uac04<\/td>\n0.5<\/code>, 1<\/code><\/td>\n<\/tr>\n
    yoyo<\/code><\/td>\n\uc655\ubcf5 \uc5ec\ubd80<\/td>\ntrue<\/code>, false<\/code><\/td>\n<\/tr>\n
    ease<\/code><\/td>\n\uac00\uc18d\ub3c4 \uace1\uc120<\/td>\n"power2.out"<\/code>, "bounce.out"<\/code><\/td>\n<\/tr>\n
    stagger<\/code><\/td>\n\uc5ec\ub7ec \uc694\uc18c \uc2dc\uac04\ucc28<\/td>\n0.2<\/code>, 0.5<\/code><\/td>\n<\/tr>\n
    onComplete<\/code><\/td>\n\uc644\ub8cc \uc2dc callback<\/td>\n() => console.log("\ub05d")<\/code><\/td>\n<\/tr>\n
    onUpdate<\/code><\/td>\n\ub9e4 \ud504\ub808\uc784 callback<\/td>\n() => console.log("\uc9c4\ud589\uc911")<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    4. Ease \u2014 \uc6c0\uc9c1\uc784\uc5d0 \uc0dd\ub3d9\uac10 \uc8fc\uae30<\/h2>\n
    Ease\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc18d\ub3c4 \ubcc0\ud654 \uace1\uc120<\/strong>\uc774\ub2e4. \ub85c\ubd07\ucc98\ub7fc \ub531\ub531\ud55c \uc6c0\uc9c1\uc784 \ub300\uc2e0, \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \ub290\ub08c\uc744 \uc900\ub2e4.<\/p>\n
    4.1. \uc8fc\uc694 Ease \uc885\ub958<\/h3>\n
    gsap.to(".box", { x: 300, ease: "power1.out", duration: 1 });\n<\/code><\/pre>\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\nease \uc18d\uc131\uc5d0 \uc6d0\ud558\ub294 \uc774\ub984\uc744 string\uc73c\ub85c \ub123\ub294\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Ease \uc774\ub984<\/th>\n\ub290\ub08c<\/th>\n<\/tr>\n<\/thead>\n
    "none"<\/code><\/td>\n\uc77c\uc815\ud55c \uc18d\ub3c4(\uae30\ubcf8)<\/td>\n<\/tr>\n
    "power1"<\/code> ~ "power4"<\/code><\/td>\n\uc22b\uc790\uac00 \ud074\uc218\ub85d \uac15\ud55c \uac00\uac10\uc18d<\/td>\n<\/tr>\n
    "back"<\/code><\/td>\n\ubaa9\ud45c\ub97c \uc0b4\uc9dd \ub118\uacbc\ub2e4 \ub3cc\uc544\uc634<\/td>\n<\/tr>\n
    "bounce"<\/code><\/td>\n\ud1b5\ud1b5 \ud280\ub294 \ud6a8\uacfc<\/td>\n<\/tr>\n
    "elastic"<\/code><\/td>\n\uace0\ubb34\uc904\ucc98\ub7fc \ud754\ub4e4\ub9bc<\/td>\n<\/tr>\n
    "circ"<\/code><\/td>\n\uc6d0\ud615 \uace1\uc120 \uac00\uac10\uc18d<\/td>\n<\/tr>\n
    "expo"<\/code><\/td>\n\uc9c0\uc218 \uace1\uc120 \uac00\uac10\uc18d<\/td>\n<\/tr>\n
    "sine"<\/code><\/td>\n\uc0ac\uc778 \uace1\uc120 \uac00\uac10\uc18d<\/td>\n<\/tr>\n
    "steps(n)"<\/code><\/td>\nn\ub2e8\uacc4\ub85c \ub04a\uc5b4\uc9c0\ub294 \ud6a8\uacfc<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    Info<\/strong>: GSAP \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc758 Ease Visualizer\uc5d0\uc11c \ubaa8\ub4e0 ease\ub97c \ub208\uc73c\ub85c \ube44\uad50\ud560 \uc218 \uc788\ub2e4. https:\/\/gsap.com\/docs\/v3\/Eases<\/a><\/p>\n<\/blockquote>\n
    4.2. Ease \ube44\uad50 \uc608\uc81c<\/h3>\n
    \uc5ec\ub7ec ease\ub97c \ud55c \ubc88\uc5d0 \ube44\uad50\ud560 \uc218 \uc788\ub294 \uc608\uc81c\uc774\ub2e4. \uac01 \uc694\uc18c\uac00 \ub3d9\uc2dc\uc5d0 \ucd9c\ubc1c\ud558\uc5ec ease\ubcc4 \ucc28\uc774\ub97c \ub208\uc73c\ub85c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.
    \n    \uc2e4\ud589\ud654\uba74<\/a><\/p>\n
    gsap.to(".box1", { x: 600, ease: "none", duration: 5 });\ngsap.to(".box2", { x: 600, ease: "power1", duration: 5 });\ngsap.to(".box3", { x: 600, ease: "power2", duration: 5 });\ngsap.to(".box4", { x: 600, ease: "power3", duration: 5 });\ngsap.to(".box5", { x: 600, ease: "power4", duration: 5 });\ngsap.to(".box6", { x: 600, ease: "back", duration: 5 });\ngsap.to(".box7", { x: 600, ease: "elastic", duration: 5 });\ngsap.to(".box8", { x: 600, ease: "bounce", duration: 5 });\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\nnone<\/code> \u2014 \uc77c\uc815 \uc18d\ub3c4\ub85c \uc774\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
    2~5<\/td>\npower1<\/code>~`power4` \u2014 \uc22b\uc790\uac00 \ucee4\uc9c8\uc218\ub85d \uae09\uaca9\ud558\uac8c \uac10\uc18d\ud55c\ub2e4<\/td>\n<\/tr>\n
    6<\/td>\nback<\/code> \u2014 \uc0b4\uc9dd \ub118\uacbc\ub2e4 \ub3cc\uc544\uc628\ub2e4<\/td>\n<\/tr>\n
    7<\/td>\nelastic<\/code> \u2014 \uace0\ubb34\uc904\ucc98\ub7fc \ud754\ub4e4\ub9b0\ub2e4<\/td>\n<\/tr>\n
    8<\/td>\nbounce<\/code> \u2014 \ubc14\ub2e5\uc5d0\uc11c \ud1b5\ud1b5 \ud284\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    5. Timeline \u2014 \uc5ec\ub7ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc21c\uc11c\ub300\ub85c<\/h2>\n
    gsap.timeline()<\/code>\uc744 \uc0ac\uc6a9\ud558\uba74 \uc5ec\ub7ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc21c\uc11c\ub300\ub85c<\/strong> \ub610\ub294 \ub3d9\uc2dc\uc5d0<\/strong> \uc2e4\ud589\ud560 \uc218 \uc788\ub2e4.<\/p>\n
    5.1. \uc21c\uc11c\ub300\ub85c \uc2e4\ud589\ud558\uae30<\/h3>\n
    \uc2e4\ud589\ud654\uba74<\/a><\/p>\n
    let tl = gsap.timeline();\n\ntl.to(".one", { duration: 2, x: 500 })\n  .to(".two", { duration: 3, x: 500 }, 1)\n  .to(".three", { duration: 1, x: 500 }, "<")\n  .to(".four", { duration: 1, x: 500 }, "<0.5");\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\ntimeline \uac1d\uccb4\ub97c \uc0dd\uc131\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\n.one<\/code>\uc774 2\ucd08 \ub3d9\uc548 x\ucd95\uc73c\ub85c 500px \uc774\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
    4<\/td>\n\uc808\ub300\uac12 1<\/code> \u2014 timeline \uc2dc\uc791 \ud6c4 1\ucd08 \uc2dc\uc810\uc5d0 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n
    5<\/td>\n"<"<\/code> \u2014 \uc774\uc804 tween\uc758 \uc2dc\uc791 \uc2dc\uc810<\/strong>\uacfc \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n
    6<\/td>\n"<0.5"<\/code> \u2014 \uc774\uc804 tween\uc758 \uc2dc\uc791 \uc2dc\uc810\ubcf4\ub2e4 0.5\ucd08 \ub4a4\uc5d0 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    5.2. Position Parameter \uc815\ub9ac<\/h3>\n\n\n\n\n\n\n\n\n\n\n
    \ud45c\uae30<\/th>\n\uc758\ubbf8<\/th>\n<\/tr>\n<\/thead>\n
    "-=0.5"<\/code><\/td>\n\uc774\uc804 \uc560\ub2c8\uba54\uc774\uc158 \uc885\ub8cc 0.5\ucd08 \uc804<\/strong>\uc5d0 \uc2dc\uc791 (\uc624\ubc84\ub7a9)<\/td>\n<\/tr>\n
    "+=0.3"<\/code><\/td>\n\uc774\uc804 \uc560\ub2c8\uba54\uc774\uc158 \uc885\ub8cc 0.3\ucd08 \ud6c4<\/strong>\uc5d0 \uc2dc\uc791 (\uac2d)<\/td>\n<\/tr>\n
    "<"<\/code><\/td>\n\uc774\uc804 tween\uc758 \uc2dc\uc791 \uc2dc\uc810<\/strong>\uacfc \ub3d9\uc2dc<\/td>\n<\/tr>\n
    ">"<\/code><\/td>\n\uc774\uc804 tween\uc758 \uc885\ub8cc \uc2dc\uc810<\/strong>\uacfc \ub3d9\uc2dc<\/td>\n<\/tr>\n
    "<0.5"<\/code><\/td>\n\uc774\uc804 tween \uc2dc\uc791 \uc2dc\uc810 + 0.5\ucd08<\/td>\n<\/tr>\n
    3<\/code><\/td>\ntimeline \uc2dc\uc791 \uae30\uc900 3\ucd08 \uc2dc\uc810 (\uc808\ub300\uac12)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    5.3. defaults\ub85c \uacf5\ud1b5 \uc124\uc815\ud558\uae30<\/h3>\n
    defaults<\/code> \uc18d\uc131\uc744 \uc0ac\uc6a9\ud558\uba74 \ubaa8\ub4e0 \ud558\uc704 tween\uc5d0 \uacf5\ud1b5 \uac12\uc744 \uc0c1\uc18d\ud560 \uc218 \uc788\ub2e4.
    \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
    let tl = gsap.timeline({ defaults: { duration: 1 } });\n\ntl.from("h1", { y: -50, opacity: 0 })\n  .from("p", { y: -50, opacity: 0 }, "-=0.5")\n  .from("a", { y: -50, opacity: 0 }, "+=1")\n  .from("img", { y: 200, opacity: 0 }, "3");\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n\ubaa8\ub4e0 \ud558\uc704 tween\uc5d0 duration: 1<\/code>\uc744 \uae30\ubcf8\uac12\uc73c\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\nh1<\/code>\uc774 \uc704\uc5d0\uc11c \ub0b4\ub824\uc624\uba70 \ub098\ud0c0\ub09c\ub2e4<\/td>\n<\/tr>\n
    4<\/td>\n"-=0.5"<\/code> \u2014 \uc774\uc804 tween \uc885\ub8cc 0.5\ucd08 \uc804\uc5d0 \uc2dc\uc791\ud55c\ub2e4 (\uc624\ubc84\ub7a9)<\/td>\n<\/tr>\n
    5<\/td>\n"+=1"<\/code> \u2014 \uc774\uc804 tween \uc885\ub8cc 1\ucd08 \ud6c4\uc5d0 \uc2dc\uc791\ud55c\ub2e4 (\uac2d)<\/td>\n<\/tr>\n
    6<\/td>\n"3"<\/code> \u2014 timeline \uc2dc\uc791 3\ucd08 \ud6c4\uc5d0 \uc2dc\uc791\ud55c\ub2e4 (\uc808\ub300\uac12)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    5.4.\uc560\ub2c8\uba54\uc774\uc158 \ud578\ub4e4\ub9c1<\/h3>\n
    tween\uc744 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud558\uba74 play()<\/code>, pause()<\/code>, reverse()<\/code> \ub4f1\uc73c\ub85c \uc81c\uc5b4\ud560 \uc218 \uc788\ub2e4.
    \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
    const tween = gsap.to(".box1", {\n  duration: 8,\n  x: 400,\n  width: 400,\n  paused: true,\n});\n\ndocument.querySelector("#play").onclick = () => tween.play();\ndocument.querySelector("#pause").onclick = () => tween.pause();\ndocument.querySelector("#resume").onclick = () => tween.resume();\ndocument.querySelector("#reverse").onclick = () => tween.reverse();\ndocument.querySelector("#restart").onclick = () => tween.restart();\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    5<\/td>\npaused: true<\/code> \u2014 \uc0dd\uc131 \uc2dc \uc790\ub3d9 \uc7ac\uc0dd\ud558\uc9c0 \uc54a\uace0 \ub300\uae30\ud55c\ub2e4<\/td>\n<\/tr>\n
    8<\/td>\nplay()<\/code> \u2014 \uc7ac\uc0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    9<\/td>\npause()<\/code> \u2014 \uc77c\uc2dc\uc815\uc9c0\ud55c\ub2e4<\/td>\n<\/tr>\n
    10<\/td>\nresume()<\/code> \u2014 \uba48\ucd98 \uacf3\uc5d0\uc11c \uc774\uc5b4 \uc7ac\uc0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    11<\/td>\nreverse()<\/code> \u2014 \ubc18\ub300\ub85c \uc7ac\uc0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    12<\/td>\nrestart()<\/code> \u2014 \ucc98\uc74c\ubd80\ud130 \ub2e4\uc2dc \uc7ac\uc0dd\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \ntimeline\uc758 `reversed()` method\ub97c \ud65c\uc6a9\ud558\uba74 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc815\ubc29\ud5a5\/\uc5ed\ubc29\ud5a5\uc744 \ud1a0\uae00\ud560 \uc218 \uc788\ub2e4.<\/p>\n
    let tl = gsap.timeline({ defaults: { duration: 1 } });\n\ntl.from("h1", { y: -50, opacity: 0 })\n  .from("p", { y: -50, opacity: 0 }, "-=0.5")\n  .from("a", { y: -50, opacity: 0 }, "-=0.5");\n\ndocument.getElementById("cta").addEventListener("click", (e) => {\n  e.preventDefault();\n  tl.reversed() ? tl.play() : tl.reverse();\n});\n<\/code><\/pre>\n
    reversed()<\/code>\uac00 true<\/code>\uc774\uba74 play()<\/code>\ub85c \uc815\ubc29\ud5a5 \uc7ac\uc0dd\ud558\uace0, \uc544\ub2c8\uba74 reverse()<\/code>\ub85c \ubc18\uc804\ud55c\ub2e4.
    \n<\/Accordion><\/p>\n
    \n
    6. GSAP Plugin \uc804\uccb4 \ubaa9\ub85d<\/h2>\n
    GSAP\uc758 \uc9c4\uc9dc \ud798\uc740 Plugin\uc5d0 \uc788\ub2e4. Plugin\uc740 \uae30\ubcf8 \uae30\ub2a5\uc744 \ud655\uc7a5<\/strong>\ud558\ub294 \ucd94\uac00 \ubaa8\ub4c8\uc774\ub2e4.<\/p>\n
    \n
    Warning<\/strong>: 2024\ub144 10\uc6d4 Webflow\uac00 GreenSock\uc744 \uc778\uc218\ud588\ub2e4. \uc774\ud6c4 2025\ub144 4\uc6d4 30\uc77c GSAP 3.13 \ub9b4\ub9ac\uc2a4\uc640 \ud568\uaed8 \ubaa8\ub4e0 Plugin\uc774 100% \ubb34\ub8cc<\/strong>\ub85c \uc804\ud658\ub418\uc5c8\ub2e4. \uc774\uc804\uc5d0 Club GSAP \uc720\ub8cc \uba64\ubc84\uc2ed\uc774 \ud544\uc694\ud588\ub358 SplitText, MorphSVG, ScrollSmoother \ub4f1\ub3c4 \uc774\uc81c \ub204\uad6c\ub098 \uc0c1\uc5c5 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ubb34\ub8cc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Plugin<\/th>\n\ubd84\ub958<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    ScrollTrigger<\/strong><\/td>\n\uc2a4\ud06c\ub864<\/td>\n\uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n
    ScrollSmoother<\/strong><\/td>\n\uc2a4\ud06c\ub864<\/td>\n\ubd80\ub4dc\ub7ec\uc6b4 \uad00\uc131 \uc2a4\ud06c\ub864 \ud6a8\uacfc\ub97c \ub9cc\ub4e0\ub2e4. ScrollTrigger \uae30\ubc18\uc774\ub2e4<\/td>\n<\/tr>\n
    ScrollToPlugin<\/strong><\/td>\n\uc2a4\ud06c\ub864<\/td>\n\ud2b9\uc815 \uc704\uce58\ub85c \ubd80\ub4dc\ub7fd\uac8c \uc2a4\ud06c\ub864\ud55c\ub2e4<\/td>\n<\/tr>\n
    Observer<\/strong><\/td>\n\uc2a4\ud06c\ub864<\/td>\n\uc2a4\ud06c\ub864, \ud130\uce58, \ud3ec\uc778\ud130 \ub4f1 \ub2e4\uc591\ud55c \uc785\ub825\uc744 \uac10\uc9c0\ud55c\ub2e4<\/td>\n<\/tr>\n
    MorphSVGPlugin<\/strong><\/td>\nSVG<\/td>\nSVG \ub3c4\ud615\uc744 \ub2e4\ub978 \ub3c4\ud615\uc73c\ub85c \ubd80\ub4dc\ub7fd\uac8c \ubcc0\uc2e0\uc2dc\ud0a8\ub2e4<\/td>\n<\/tr>\n
    DrawSVGPlugin<\/strong><\/td>\nSVG<\/td>\nSVG \uc120\uc774 \uadf8\ub824\uc9c0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    MotionPathPlugin<\/strong><\/td>\nSVG<\/td>\nSVG \uacbd\ub85c\ub97c \ub530\ub77c \uc694\uc18c\ub97c \uc774\ub3d9\uc2dc\ud0a8\ub2e4<\/td>\n<\/tr>\n
    SplitText<\/strong><\/td>\n\ud14d\uc2a4\ud2b8<\/td>\n\ud14d\uc2a4\ud2b8\ub97c \uae00\uc790\/\ub2e8\uc5b4\/\uc904 \ub2e8\uc704\ub85c \ubd84\ub9ac\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4. 3.13\uc5d0\uc11c \uc644\uc804\ud788 \uc7ac\uc791\uc131\ub418\uc5c8\ub2e4<\/td>\n<\/tr>\n
    TextPlugin<\/strong><\/td>\n\ud14d\uc2a4\ud2b8<\/td>\n\ud14d\uc2a4\ud2b8\ub97c \ud55c \uae00\uc790\uc529 \ud0c0\uc774\ud551\ud558\ub294 \ud6a8\uacfc\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    ScrambleTextPlugin<\/strong><\/td>\n\ud14d\uc2a4\ud2b8<\/td>\n\ud14d\uc2a4\ud2b8\uac00 \ubb34\uc791\uc704 \ubb38\uc790\ub85c \ubcc0\ud658\ub418\uba70 \ub098\ud0c0\ub098\ub294 \ud6a8\uacfc\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    Draggable<\/strong><\/td>\n\uc0c1\ud638\uc791\uc6a9\u00b7\ubb3c\ub9ac<\/td>\n\uc694\uc18c\ub97c \ub9c8\uc6b0\uc2a4\/\ud130\uce58\ub85c \ub4dc\ub798\uadf8\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4<\/td>\n<\/tr>\n
    InertiaPlugin<\/strong><\/td>\n\uc0c1\ud638\uc791\uc6a9\u00b7\ubb3c\ub9ac<\/td>\n\ub4dc\ub798\uadf8 \ud6c4 \uad00\uc131\uc73c\ub85c \ubbf8\ub044\ub7ec\uc9c0\ub294 \ud6a8\uacfc\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    Physics2DPlugin<\/strong><\/td>\n\uc0c1\ud638\uc791\uc6a9\u00b7\ubb3c\ub9ac<\/td>\n\uc911\ub825, \uc18d\ub3c4, \ub9c8\ucc30 \ub4f1 2D \ubb3c\ub9ac \uc2dc\ubbac\ub808\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4<\/td>\n<\/tr>\n
    PhysicsPropsPlugin<\/strong><\/td>\n\uc0c1\ud638\uc791\uc6a9\u00b7\ubb3c\ub9ac<\/td>\n\uac1c\ubcc4 \uc18d\uc131\uc5d0 \ubb3c\ub9ac \ud6a8\uacfc\ub97c \uc801\uc6a9\ud55c\ub2e4<\/td>\n<\/tr>\n
    Flip<\/strong><\/td>\nEase\u00b7\uc720\ud2f8\ub9ac\ud2f0<\/td>\nlayout \ubcc0\ud654\ub97c \ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158\uc73c\ub85c \uc804\ud658\ud55c\ub2e4<\/td>\n<\/tr>\n
    CustomEase<\/strong><\/td>\nEase\u00b7\uc720\ud2f8\ub9ac\ud2f0<\/td>\nease \uace1\uc120\uc744 \uc9c1\uc811 \ub514\uc790\uc778\ud560 \uc218 \uc788\ub2e4<\/td>\n<\/tr>\n
    CustomBounce<\/strong><\/td>\nEase\u00b7\uc720\ud2f8\ub9ac\ud2f0<\/td>\nbounce \ud6a8\uacfc\ub97c \uc138\ubc00\ud558\uac8c \uc870\uc808\ud560 \uc218 \uc788\ub2e4<\/td>\n<\/tr>\n
    CustomWiggle<\/strong><\/td>\nEase\u00b7\uc720\ud2f8\ub9ac\ud2f0<\/td>\n\ud754\ub4e4\ub9bc \ud6a8\uacfc\ub97c \uc138\ubc00\ud558\uac8c \uc870\uc808\ud560 \uc218 \uc788\ub2e4<\/td>\n<\/tr>\n
    EasePack<\/strong><\/td>\nEase\u00b7\uc720\ud2f8\ub9ac\ud2f0<\/td>\n\ucd94\uac00 ease \ud568\uc218 \ubaa8\uc74c\uc774\ub2e4<\/td>\n<\/tr>\n
    PixiPlugin<\/strong><\/td>\n\ub80c\ub354\ub7ec\u00b7\uac1c\ubc1c<\/td>\nPixiJS renderer \uac1d\uccb4\ub97c \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4<\/td>\n<\/tr>\n
    EaselPlugin<\/strong><\/td>\n\ub80c\ub354\ub7ec\u00b7\uac1c\ubc1c<\/td>\nCanvas \uae30\ubc18 EaselJS \uac1d\uccb4\ub97c \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4<\/td>\n<\/tr>\n
    CSSRulePlugin<\/strong><\/td>\n\ub80c\ub354\ub7ec\u00b7\uac1c\ubc1c<\/td>\nCSS rule \uc790\uccb4\ub97c \uc9c1\uc811 \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4<\/td>\n<\/tr>\n
    GSDevTools<\/strong><\/td>\n\ub80c\ub354\ub7ec\u00b7\uac1c\ubc1c<\/td>\n\uc560\ub2c8\uba54\uc774\uc158\uc744 debugging\ud560 \uc218 \uc788\ub294 \ucee8\ud2b8\ub864 \ud328\ub110\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    7. ScrollTrigger \u2014 \uc2a4\ud06c\ub864 \uc5f0\ub3d9 \uc560\ub2c8\uba54\uc774\uc158<\/h2>\n
    \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud558\ub294 Plugin\uc774\ub2e4. \ucd5c\uc2e0 \uc6f9\uc0ac\uc774\ud2b8\uc758 \uc2a4\ud06c\ub864 \uc5f0\ub3d9 \ud6a8\uacfc\ub294 \ub300\ubd80\ubd84 \uc774\uac83\uc73c\ub85c \ub9cc\ub4e0\ub2e4.<\/p>\n
    7.1. 7.1 Plugin \ub4f1\ub85d<\/h3>\n
    Plugin\uc740 \uc0ac\uc6a9 \uc804\uc5d0 \ubc18\ub4dc\uc2dc register<\/strong>\ud574\uc57c \ud55c\ub2e4.<\/p>\n
    CDN<\/h4>\n
    <script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js"><\/script>\n<script>\n  gsap.registerPlugin(ScrollTrigger);\n<\/script>\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\nGSAP core\ub97c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\nScrollTrigger Plugin \ud30c\uc77c\uc744 \ucd94\uac00\ub85c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
    4<\/td>\nGSAP\uc5d0 Plugin\uc744 \ub4f1\ub85d\ud55c\ub2e4. \uc774 \uc904\uc774 \uc5c6\uc73c\uba74 \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    npm<\/h4>\n
    import gsap from "gsap";\nimport { ScrollTrigger } from "gsap\/ScrollTrigger";\n\ngsap.registerPlugin(ScrollTrigger);\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\ngsap core\ub97c import\ud55c\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\nScrollTrigger\ub97c \ubcc4\ub3c4\ub85c import\ud55c\ub2e4<\/td>\n<\/tr>\n
    4<\/td>\nPlugin\uc744 \ub4f1\ub85d\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    7.2. \uc8fc\uc694 \uc18d\uc131<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
    \uc18d\uc131<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    trigger<\/code><\/td>\n\uc2a4\ud06c\ub864 \uac10\uc9c0 \uae30\uc900\uc774 \ub418\ub294 \uc694\uc18c\uc774\ub2e4<\/td>\n<\/tr>\n
    start<\/code><\/td>\n\uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791 \uc9c0\uc810\uc774\ub2e4. \ud615\uc2dd: "\uc694\uc18c\uc704\uce58 viewport\uc704\uce58"<\/code><\/td>\n<\/tr>\n
    end<\/code><\/td>\n\uc560\ub2c8\uba54\uc774\uc158 \uc885\ub8cc \uc9c0\uc810\uc774\ub2e4. \ud615\uc2dd: "\uc694\uc18c\uc704\uce58 viewport\uc704\uce58"<\/code><\/td>\n<\/tr>\n
    scrub<\/code><\/td>\ntrue<\/code>\uc774\uba74 \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158 \uc9c4\ud589\ub960\uc774 \uc5f0\ub3d9\ub41c\ub2e4<\/td>\n<\/tr>\n
    pin<\/code><\/td>\ntrue<\/code>\uc774\uba74 \ud574\ub2f9 \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \ub3d9\uc548 \uace0\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
    markers<\/code><\/td>\ntrue<\/code>\uc774\uba74 \uac1c\ubc1c\uc6a9 \uc2dc\uac01 \ud45c\uc2dc\ub97c \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc900\ub2e4 (\ubc30\ud3ec \uc2dc \uc81c\uac70)<\/td>\n<\/tr>\n
    toggleActions<\/code><\/td>\n\uc9c4\uc785\/\uc774\ud0c8 \uc2dc \ub3d9\uc791\uc744 \uc9c0\uc815\ud55c\ub2e4. \uae30\ubcf8\uac12: "play none none none"<\/code><\/td>\n<\/tr>\n
    toggleClass<\/code><\/td>\n\ud2b8\ub9ac\uac70 \uad6c\uac04\uc5d0\uc11c class\ub97c \ucd94\uac00\/\uc81c\uac70\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \n`toggleActions`\ub294 4\uac1c\uc758 \uac12\uc744 \uc21c\uc11c\ub300\ub85c \uc9c0\uc815\ud55c\ub2e4.<\/p>\n
      \n
    1. onEnter<\/strong> \u2014 scroll-start~scroll-end \uc0ac\uc774 \uc9c4\uc785 \uc2dc<\/li>\n
    2. onLeave<\/strong> \u2014 scroll-end\ub97c \ub118\uc5b4\uac08 \ub54c<\/li>\n
    3. onEnterBack<\/strong> \u2014 scroll-end\uc5d0\uc11c \ub418\ub3cc\uc544\uc62c \ub54c<\/li>\n
    4. onLeaveBack<\/strong> \u2014 scroll-start\ub97c \ub2e4\uc2dc \ubc97\uc5b4\ub0a0 \ub54c<\/li>\n<\/ol>\n
      \uc0ac\uc6a9 \uac00\ub2a5\ud55c \uac12: play<\/code>, pause<\/code>, resume<\/code>, reset<\/code>, restart<\/code>, complete<\/code>, reverse<\/code>, none<\/code><\/p>\n
      toggleActions: "play none reverse none"\n<\/code><\/pre>\n
      \uc704 \uc124\uc815\uc740 \uc9c4\uc785 \uc2dc \uc7ac\uc0dd, \ub418\ub3cc\uc544\uc62c \ub54c \uc5ed\uc7ac\uc0dd\ud55c\ub2e4.
      \n<\/Accordion><\/p>\n
      7.3. \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n
      \uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      gsap.to(".box", {\n  x: 500,\n  rotation: 360,\n  borderRadius: 100,\n  duration: 2,\n  scrollTrigger: {\n    trigger: ".box",\n    start: "top 80%",\n    end: "bottom 20%",\n    toggleActions: "play none reverse none",\n    markers: true,\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      6<\/td>\nscrollTrigger \uc635\uc158 object\ub97c \ucd94\uac00\ud55c\ub2e4<\/td>\n<\/tr>\n
      7<\/td>\n.box<\/code> \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \uac10\uc9c0 \uae30\uc900\uc73c\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
      8<\/td>\n\uc694\uc18c \uc0c1\ub2e8\uc774 viewport 80% \uc704\uce58\uc5d0 \uc62c \ub54c \uc2dc\uc791\ud55c\ub2e4<\/td>\n<\/tr>\n
      9<\/td>\n\uc694\uc18c \ud558\ub2e8\uc774 viewport 20% \uc704\uce58\uc5d0 \uc62c \ub54c \ub05d\ub09c\ub2e4<\/td>\n<\/tr>\n
      10<\/td>\n\uc9c4\uc785 \uc2dc \uc7ac\uc0dd, \ub418\ub3cc\uc544\uc62c \ub54c \uc5ed\uc7ac\uc0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
      11<\/td>\n\uac1c\ubc1c\uc6a9 marker\ub97c \ud45c\uc2dc\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      7.4. scrub \u2014 \uc2a4\ud06c\ub864 \uc5f0\ub3d9<\/h3>\n
      scrub: true<\/code>\ub85c \uc124\uc815\ud558\uba74 \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158 \uc9c4\ud589\ub960\uc774 1:1\ub85c \uc5f0\ub3d9\ub41c\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      gsap.to(".box", {\n  x: 500,\n  rotation: 360,\n  borderRadius: 100,\n  scrollTrigger: {\n    trigger: ".box",\n    start: "top 50%",\n    end: "bottom 20%",\n    scrub: true,\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      8<\/td>\nscrub: true<\/code> \u2014 \uc2a4\ud06c\ub864\uc744 \ub0b4\ub9ac\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc9c4\ud589\ub418\uace0, \uc62c\ub9ac\uba74 \ub418\ub3cc\uc544\uac04\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      Tip<\/strong>: scrub<\/code>\uc5d0 \uc22b\uc790\ub97c \ub123\uc73c\uba74 \ubd80\ub4dc\ub7ec\uc6b4 \uc9c0\uc5f0 \ud6a8\uacfc\uac00 \ucd94\uac00\ub41c\ub2e4. scrub: 1<\/code>\uc740 1\ucd08\uc758 \uc9c0\uc5f0\uc744 \uc8fc\uba70 \ub354 \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n<\/blockquote>\n
      7.5. pin \u2014 \uc694\uc18c \uace0\uc815<\/h3>\n
      pin: true<\/code>\ub85c \uc124\uc815\ud558\uba74 \uc2a4\ud06c\ub864 \ub3d9\uc548 \ud574\ub2f9 \uc694\uc18c\uac00 \ud654\uba74\uc5d0 \uace0\uc815\ub41c\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      gsap.to(".box", {\n  x: 500,\n  rotation: 360,\n  scrollTrigger: {\n    trigger: ".box",\n    start: "top 50%",\n    end: "bottom 200px",\n    scrub: true,\n    pin: true,\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      9<\/td>\npin: true<\/code> \u2014 \uc2a4\ud06c\ub864\ud558\ub294 \ub3d9\uc548 .box<\/code>\uac00 \ud654\uba74\uc5d0 \uace0\uc815\ub41c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      7.6. 7.6 ScrollTrigger.create() \u2014 timeline\uacfc \ubd84\ub9ac\ud558\uae30<\/h3>\n
      ScrollTrigger.create()<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 timeline\uacfc scroll \uc124\uc815\uc744 \ubd84\ub9ac\ud558\uc5ec \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      const ani = gsap.timeline();\nani\n  .to(".box", { rotation: 450, scale: 0, borderRadius: 200 })\n  .to(".box", { rotation: 360 * 5, scale: 1, borderRadius: 20 });\n\nScrollTrigger.create({\n  animation: ani,\n  trigger: ".sec1",\n  start: "top top",\n  end: "+=2000",\n  scrub: true,\n  pin: true,\n  anticipatePin: 1,\n  markers: true,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1~4<\/td>\ntimeline \uc560\ub2c8\uba54\uc774\uc158\uc744 \uba3c\uc800 \uc815\uc758\ud55c\ub2e4<\/td>\n<\/tr>\n
      6<\/td>\nScrollTrigger.create()<\/code>\ub85c scroll \uc124\uc815\uc744 \ubcc4\ub3c4\ub85c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
      7<\/td>\nanimation<\/code> \uc18d\uc131\uc5d0 timeline\uc744 \uc5f0\uacb0\ud55c\ub2e4<\/td>\n<\/tr>\n
      10<\/td>\n"+=2000"<\/code> \u2014 \uc2dc\uc791\uc810\uc5d0\uc11c 2000px \uc2a4\ud06c\ub864 \ud6c4 \uc885\ub8cc\ud55c\ub2e4<\/td>\n<\/tr>\n
      13<\/td>\nanticipatePin: 1<\/code> \u2014 pin \uc2dc\uc791 1\ucd08 \uc804 \ubbf8\ub9ac \uc2dc\uc791\ud558\uc5ec \ub04a\uae40\uc744 \ubc29\uc9c0\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      7.7. stagger \u2014 \uc21c\ucc28 \ub098\ud0c0\ub098\uae30<\/h3>\n
      \uc5ec\ub7ec \uc694\uc18c\uc5d0 \uc2dc\uac04\ucc28\ub97c \uc8fc\uc5b4 \uc21c\ucc28\uc801\uc73c\ub85c \ub098\ud0c0\ub098\uac8c \ud55c\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      const ani = gsap.timeline();\nani.from(".sec3 .box", {\n  y: -300,\n  scale: 0.5,\n  autoAlpha: 0,\n  ease: "back.out(4)",\n  stagger: {\n    amount: 3,\n    from: "random",\n  },\n});\n\nScrollTrigger.create({\n  animation: ani,\n  trigger: ".sec3",\n  start: "top top",\n  end: "+=2000",\n  scrub: true,\n  pin: true,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      5<\/td>\nautoAlpha: 0<\/code> \u2014 opacity\uc640 visibility\ub97c \ub3d9\uc2dc\uc5d0 \uc81c\uc5b4\ud55c\ub2e4<\/td>\n<\/tr>\n
      7~10<\/td>\nstagger.amount: 3<\/code> \u2014 \ucd1d 3\ucd08 \ub3d9\uc548 \ubb34\uc791\uc704 \uc21c\uc11c\ub85c \ub4f1\uc7a5\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      7.8. callback \ud568\uc218<\/h3>\n
      ScrollTrigger \uad6c\uac04\uc5d0\uc11c \ud2b9\uc815 \uc2dc\uc810\uc5d0 \ud568\uc218\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      gsap.to(".box", {\n  x: 500,\n  scrollTrigger: {\n    trigger: ".box",\n    start: "top center",\n    end: "bottom 20%",\n    scrub: true,\n    onEnter: () => console.log("\uc9c4\uc785"),\n    onLeave: () => console.log("\uc774\ud0c8"),\n    onEnterBack: () => console.log("\uc7ac\uc9c4\uc785"),\n    onLeaveBack: () => console.log("\uc7ac\uc774\ud0c8"),\n    onUpdate: (self) => {\n      console.log("\uc9c4\ud589\ub960:", self.progress.toFixed(3));\n    },\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      8<\/td>\nonEnter<\/code> \u2014 \uc704\uc5d0\uc11c \uc544\ub798\ub85c \uc2a4\ud06c\ub864\ud558\uc5ec \uc2dc\uc791\uc810\uc744 \uc9c0\ub0a0 \ub54c<\/td>\n<\/tr>\n
      9<\/td>\nonLeave<\/code> \u2014 \ub05d\uc810\uc744 \ubc97\uc5b4\ub0a0 \ub54c<\/td>\n<\/tr>\n
      10<\/td>\nonEnterBack<\/code> \u2014 \uc544\ub798\uc5d0\uc11c \uc704\ub85c \ub418\ub3cc\uc544\uc62c \ub54c<\/td>\n<\/tr>\n
      11<\/td>\nonLeaveBack<\/code> \u2014 \uc2dc\uc791\uc810\uc744 \ub2e4\uc2dc \ubc97\uc5b4\ub0a0 \ub54c<\/td>\n<\/tr>\n
      12~14<\/td>\nonUpdate<\/code> \u2014 \uc2a4\ud06c\ub864\ud560 \ub54c\ub9c8\ub2e4 \uc9c4\ud589\ub960(0~1)\uc744 \ucd9c\ub825\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      8. SplitText \u2014 \ud14d\uc2a4\ud2b8 \ubd84\ud574 \uc560\ub2c8\uba54\uc774\uc158<\/h2>\n
      \ud14d\uc2a4\ud2b8\ub97c \uae00\uc790, \ub2e8\uc5b4, \uc904 \ub2e8\uc704\ub85c \ubd84\ub9ac\ud558\uc5ec \uac01\uac01 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4. GSAP 3.13\uc5d0\uc11c \uc644\uc804\ud788 \uc7ac\uc791\uc131\ub418\uc5b4 \ud30c\uc77c \ud06c\uae30\uac00 50% \uc904\uc5c8\uace0, screen reader \uc811\uadfc\uc131 \uc9c0\uc6d0\uc774 \ucd94\uac00\ub418\uc5c8\ub2e4.<\/p>\n
      8.1. Plugin \ub4f1\ub85d<\/h3>\n
      CDN<\/h4>\n
      <h2 class="title">\uc548\ub155\ud558\uc138\uc694, GSAP \uc138\uacc4\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4!<\/h2>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/SplitText.min.js"><\/script>\n<\/code><\/pre>\n
      npm<\/h4>\n
      import gsap from "gsap";\nimport { SplitText } from "gsap\/SplitText";\n\ngsap.registerPlugin(SplitText);\n<\/code><\/pre>\n
      8.2. \uae00\uc790 \ub2e8\uc704 \ub4f1\uc7a5 \ud6a8\uacfc<\/h3>\n
      \uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      gsap.registerPlugin(SplitText);\n\nconst split = SplitText.create(".title", {\n  type: "chars, words",\n});\n\ngsap.from(split.chars, {\n  y: 50,\n  opacity: 0,\n  stagger: 0.05,\n  duration: 0.6,\n  ease: "back.out",\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      3~5<\/td>\n.title<\/code> \ud14d\uc2a4\ud2b8\ub97c \uae00\uc790(chars)\uc640 \ub2e8\uc5b4(words) \ub2e8\uc704\ub85c \ubd84\ub9ac\ud55c\ub2e4<\/td>\n<\/tr>\n
      7<\/td>\n\ubd84\ub9ac\ub41c \uac1c\ubcc4 \uae00\uc790\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4<\/td>\n<\/tr>\n
      10<\/td>\n\uae00\uc790\ub9c8\ub2e4 0.05\ucd08 \uac04\uaca9\uc73c\ub85c \uc21c\ucc28 \ub4f1\uc7a5\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      Info<\/strong>: SplitText 3.13 \ubc84\uc804\uc740 \uc790\ub3d9\uc73c\ub85c aria-label<\/code>\uc744 \ucd94\uac00\ud558\uc5ec screen reader \uc811\uadfc\uc131\uc744 \uc9c0\uc6d0\ud55c\ub2e4.<\/p>\n<\/blockquote>\n
      \n
      9. TextPlugin \u2014 \ud0c0\uc774\ud551 \ud6a8\uacfc<\/h2>\n
      \ud14d\uc2a4\ud2b8\ub97c \ud55c \uae00\uc790\uc529 \ub098\ud0c0\ub098\uac8c \ud558\ub294 \ud0c0\uc774\ud551 \ud6a8\uacfc\ub97c \ub9cc\ub4e0\ub2e4. SplitText\uc640 \ub2ec\ub9ac \uae30\uc874 \ud14d\uc2a4\ud2b8\ub97c \uc0c8 \ud14d\uc2a4\ud2b8\ub85c \uad50\uccb4<\/strong>\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      HTML<\/h4>\n
      <h2 class="msg"><\/h2>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/TextPlugin.min.js"><\/script>\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\n\ud0c0\uc774\ud551 \ud6a8\uacfc\uac00 \ud45c\uc2dc\ub420 \ube48 \uc694\uc18c\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
      2<\/td>\nGSAP core\ub97c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
      3<\/td>\nTextPlugin \ud30c\uc77c\uc744 \ucd94\uac00\ub85c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      JavaScript<\/h4>\n
      gsap.registerPlugin(TextPlugin);\n\ngsap.to(".msg", {\n  text: "\uc548\ub155\ud558\uc138\uc694, GSAP \uc138\uacc4\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4!",\n  duration: 3,\n  ease: "none",\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\nTextPlugin\uc744 \ub4f1\ub85d\ud55c\ub2e4<\/td>\n<\/tr>\n
      4<\/td>\ntext<\/code> \uc18d\uc131\uc5d0 \ucd5c\uc885 \ubb38\uc790\uc5f4\uc744 \ub123\uc73c\uba74 \ud55c \uae00\uc790\uc529 \ub098\ud0c0\ub09c\ub2e4<\/td>\n<\/tr>\n
      6<\/td>\nease: "none"<\/code> \u2014 \uc77c\uc815\ud55c \uc18d\ub3c4\ub85c \uae00\uc790\uac00 \ub098\ud0c0\ub09c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      10. Draggable \u2014 \ub4dc\ub798\uadf8 \uc564 \ub4dc\ub86d<\/h2>\n
      \uc694\uc18c\ub97c \ub9c8\uc6b0\uc2a4\ub098 \ud130\uce58\ub85c \uc790\uc720\ub86d\uac8c \ub4dc\ub798\uadf8\ud560 \uc218 \uc788\uac8c \ub9cc\ub4e0\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      HTML<\/h4>\n
      <div class="drag-me">\ub098\ub97c \ub4dc\ub798\uadf8\ud574\ubd10!<\/div>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/Draggable.min.js"><\/script>\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\n\ub4dc\ub798\uadf8 \ub300\uc0c1\uc774 \ub420 \uc694\uc18c\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
      2<\/td>\nGSAP core\ub97c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
      3<\/td>\nDraggable Plugin \ud30c\uc77c\uc744 \ucd94\uac00\ub85c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      JavaScript<\/h4>\n
      gsap.registerPlugin(Draggable);\n\nDraggable.create(".drag-me", {\n  type: "x,y",\n  bounds: "body",\n  onDrag: function () {\n    console.log("\ub4dc\ub798\uadf8 \uc911!", this.x, this.y);\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\nDraggable Plugin\uc744 \ub4f1\ub85d\ud55c\ub2e4<\/td>\n<\/tr>\n
      4<\/td>\ntype: "x,y"<\/code> \u2014 \uac00\ub85c\uc640 \uc138\ub85c \ubc29\ud5a5 \ubaa8\ub450 \uc774\ub3d9 \uac00\ub2a5\ud558\ub2e4<\/td>\n<\/tr>\n
      5<\/td>\nbounds: "body"<\/code> \u2014 body \uc601\uc5ed \uc548\uc5d0\uc11c\ub9cc \ub4dc\ub798\uadf8\ub41c\ub2e4<\/td>\n<\/tr>\n
      6~8<\/td>\n\ub4dc\ub798\uadf8\ud558\ub294 \ub3d9\uc548 \ud604\uc7ac \uc88c\ud45c\ub97c console\uc5d0 \ucd9c\ub825\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \n– `”x”` \u2014 \uac00\ub85c \ubc29\ud5a5\uc73c\ub85c\ub9cc \ub4dc\ub798\uadf8 \uac00\ub2a5\ud558\ub2e4
      \n– `”y”` \u2014 \uc138\ub85c \ubc29\ud5a5\uc73c\ub85c\ub9cc \ub4dc\ub798\uadf8 \uac00\ub2a5\ud558\ub2e4
      \n– `”x,y”` \u2014 \uac00\ub85c + \uc138\ub85c \uc790\uc720\ub86d\uac8c \ub4dc\ub798\uadf8 \uac00\ub2a5\ud558\ub2e4
      \n– `”rotation”` \u2014 \ud68c\uc804\ub9cc \uac00\ub2a5\ud558\ub2e4 (\ub2e4\uc774\uc5bc, \uc2dc\uacc4 \ub4f1\uc5d0 \ud65c\uc6a9)
      \n<\/Accordion><\/p>\n
      \n
      11. MorphSVG \u2014 SVG \ub3c4\ud615 \ubcc0\uc2e0<\/h2>\n
      \ud558\ub098\uc758 SVG \ub3c4\ud615\uc744 \ub2e4\ub978 \ub3c4\ud615\uc73c\ub85c \ubd80\ub4dc\ub7fd\uac8c \ubcc0\ud654\uc2dc\ud0a8\ub2e4. \uc774\uc804\uc5d0\ub294 \uc720\ub8cc\uc600\uc73c\ub098 \ud604\uc7ac \ubb34\ub8cc\uc774\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      HTML<\/h4>\n
      <svg viewBox="0 0 200 200">\n  <circle id="shape" cx="100" cy="100" r="50" fill="#0ae448" \/>\n<\/svg>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/MorphSVGPlugin.min.js"><\/script>\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1~3<\/td>\n\ubcc0\uc2e0 \ub300\uc0c1\uc774 \ub420 SVG circle\uc744 \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
      4<\/td>\nGSAP core\ub97c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
      5<\/td>\nMorphSVGPlugin \ud30c\uc77c\uc744 \ucd94\uac00\ub85c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      JavaScript<\/h4>\n
      gsap.registerPlugin(MorphSVGPlugin);\n\ngsap.to("#shape", {\n  morphSVG: {\n    shape: "M50,10 L90,90 L10,90 Z",\n    type: "rotational",\n  },\n  duration: 2,\n  ease: "power2.inOut",\n  repeat: -1,\n  yoyo: true,\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\nMorphSVGPlugin\uc744 \ub4f1\ub85d\ud55c\ub2e4<\/td>\n<\/tr>\n
      4~7<\/td>\n\uc0bc\uac01\ud615 \ubaa8\uc591\uc758 path \ub370\uc774\ud130\ub85c \ubcc0\uc2e0\uc2dc\ud0a8\ub2e4<\/td>\n<\/tr>\n
      6<\/td>\ntype: "rotational"<\/code> \u2014 \uaf2d\uc9d3\uc810\uc774 \ud68c\uc804\ud558\ub4ef \uc790\uc5f0\uc2a4\ub7fd\uac8c \ubcc0\ud658\ub41c\ub2e4<\/td>\n<\/tr>\n
      10<\/td>\nrepeat: -1<\/code> \u2014 \ubb34\ud55c \ubc18\ubcf5\ud55c\ub2e4<\/td>\n<\/tr>\n
      11<\/td>\nyoyo: true<\/code> \u2014 \uc0bc\uac01\ud615 \u2192 \uc6d0 \u2192 \uc0bc\uac01\ud615\uc73c\ub85c \uc655\ubcf5\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      12. \uac00\ub85c\ubc29\ud5a5 \uc2a4\ud06c\ub864<\/h2>\n
      ScrollTrigger\ub97c \ud65c\uc6a9\ud558\uba74 \uc138\ub85c \uc2a4\ud06c\ub864\ub85c \uac00\ub85c \uc774\ub3d9\uc744 \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n
      12.1. \uae30\ubcf8 \uac00\ub85c \uc2a4\ud06c\ub864<\/h3>\n
      \uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      HTML<\/h4>\n
      <main class="cont">\n  <section class="item" id="sec1"><h2>1<\/h2><\/section>\n  <section class="item" id="sec2"><h2>2<\/h2><\/section>\n  <section class="item" id="sec3"><h2>3<\/h2><\/section>\n  <section class="item" id="sec4"><h2>4<\/h2><\/section>\n  <section class="item" id="sec5"><h2>5<\/h2><\/section>\n<\/main>\n<\/code><\/pre>\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\n\ubaa8\ub4e0 section\uc744 \uac10\uc2f8\ub294 container\uc774\ub2e4<\/td>\n<\/tr>\n
      2~6<\/td>\n\uac00\ub85c\ub85c \ub098\uc5f4\ub420 \uac01 \uc139\uc158\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      CSS<\/h4>\n
      main {\n  overscroll-behavior: none;\n  width: 500%;\n  height: 100vh;\n  display: flex;\n  flex-wrap: nowrap;\n}\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      3<\/td>\n\uc139\uc158 5\uac1c\uc774\ubbc0\ub85c 500% \ub108\ube44\ub97c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
      4<\/td>\n\ub192\uc774\ub97c viewport \uc804\uccb4\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
      5~6<\/td>\nflex\ub85c \uac00\ub85c \ubc30\uce58\ud558\uace0 \uc904\ubc14\uafc8\uc744 \ub9c9\ub294\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      JavaScript<\/h4>\n
      let sections = gsap.utils.toArray("section");\n\ngsap.to(sections, {\n  xPercent: -100 * (sections.length - 1),\n  ease: "none",\n  scrollTrigger: {\n    trigger: "main",\n    pin: true,\n    scrub: 1,\n    snap: 1 \/ (sections.length - 1),\n    end: "+=7000",\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\n\ubaa8\ub4e0 section\uc744 \ubc30\uc5f4\ub85c \ubcc0\ud658\ud55c\ub2e4<\/td>\n<\/tr>\n
      4<\/td>\n\uc804\uccb4 \uc139\uc158 \ub108\ube44\ub9cc\ud07c \uc67c\ucabd\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
      8<\/td>\npin: true<\/code> \u2014 main\uc744 \ud654\uba74\uc5d0 \uace0\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
      9<\/td>\nscrub: 1<\/code> \u2014 1\ucd08\uc758 \ubd80\ub4dc\ub7ec\uc6b4 \uc9c0\uc5f0\uc73c\ub85c \uc2a4\ud06c\ub864\uc5d0 \uc5f0\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
      10<\/td>\nsnap<\/code> \u2014 \uc139\uc158 \ub2e8\uc704\ub85c \uc2a4\ub0c5(\ucc29 \ub2ec\ub77c\ubd99\uae30) \ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      12.2. \uac00\ub85c + \uc138\ub85c \ud63c\ud569 \uc2a4\ud06c\ub864<\/h3>\n
      \uc77c\ubd80 \uad6c\uac04\ub9cc \uac00\ub85c \uc2a4\ud06c\ub864\ub85c \uc804\ud658\ud558\uace0, \ub098\uba38\uc9c0\ub294 \uc77c\ubc18 \uc138\ub85c \uc2a4\ud06c\ub864\uc744 \uc720\uc9c0\ud560 \uc218 \uc788\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      HTML<\/h4>\n
      <main class="cont">\n  <section class="item" id="sec1"><h2>1<\/h2><\/section>\n  <section class="item" id="sec2"><h2>2<\/h2><\/section>\n  <div class="horizontal">\n    <section class="item" id="sec3"><h2>3<\/h2><\/section>\n    <section class="item" id="sec4"><h2>4<\/h2><\/section>\n    <section class="item" id="sec5"><h2>5<\/h2><\/section>\n  <\/div>\n  <section class="item" id="sec6"><h2>6<\/h2><\/section>\n  <section class="item" id="sec7"><h2>7<\/h2><\/section>\n<\/main>\n<\/code><\/pre>\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      4~8<\/td>\n.horizontal<\/code>\ub85c \uac10\uc2fc \uc139\uc158\ub9cc \uac00\ub85c \uc2a4\ud06c\ub864 \ub300\uc0c1\uc774 \ub41c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      CSS<\/h4>\n
      main {\n  overflow: hidden;\n}\n.horizontal {\n  display: flex;\n  flex-wrap: nowrap;\n  width: 300%;\n}\n.horizontal > section {\n  width: 100%;\n}\n<\/code><\/pre>\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      7<\/td>\n\uac00\ub85c \uc139\uc158 3\uac1c\uc774\ubbc0\ub85c 300%\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      JavaScript<\/h4>\n
      const horizontal = document.querySelector(".horizontal");\nconst sections = gsap.utils.toArray(".horizontal > section");\n\ngsap.to(sections, {\n  xPercent: -100 * (sections.length - 1),\n  ease: "none",\n  scrollTrigger: {\n    trigger: horizontal,\n    start: "top top",\n    end: () => "+=" + (horizontal.offsetWidth - innerWidth),\n    pin: true,\n    scrub: 1,\n    snap: {\n      snapTo: 1 \/ (sections.length - 1),\n      inertia: false,\n      duration: { min: 0.1, max: 0.1 },\n    },\n    invalidateOnRefresh: true,\n    anticipatePin: 1,\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      10<\/td>\nend<\/code> \u2014 \uc804\uccb4 \uac00\ub85c \ub108\ube44\uc5d0\uc11c viewport \ub108\ube44\ub97c \ube80 \ub9cc\ud07c \uc2a4\ud06c\ub864\ud55c\ub2e4<\/td>\n<\/tr>\n
      14<\/td>\nsnapTo<\/code> \u2014 \uc139\uc158 \ub2e8\uc704\ub85c \uc2a4\ub0c5\ud55c\ub2e4<\/td>\n<\/tr>\n
      15<\/td>\ninertia: false<\/code> \u2014 \uc2a4\ud06c\ub864 \uba48\ucd94\uba74 \uc989\uc2dc \uc2a4\ub0c5 \uc9c0\uc810\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4<\/td>\n<\/tr>\n
      18<\/td>\ninvalidateOnRefresh<\/code> \u2014 viewport \ubcc0\uacbd \uc2dc \uc2a4\ub0c5 \uc9c0\uc810\uc744 \uc7ac\uacc4\uc0b0\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      13. \uc2e4\uc804 \uc885\ud569 \uc608\uc81c \u2014 \uc2a4\ud06c\ub864\uc5d0 \ubc18\uc751\ud558\ub294 \uce74\ub4dc \uac24\ub7ec\ub9ac<\/h2>\n
      \uc9c0\uae08\uae4c\uc9c0 \ubc30\uc6b4 \ub0b4\uc6a9\uc744 \uc870\ud569\ud558\uc5ec, \uc2a4\ud06c\ub864\ud558\uba74 \uce74\ub4dc\uac00 \ucc28\ub840\ub85c \ub098\ud0c0\ub098\ub294 \uac24\ub7ec\ub9ac\ub97c \ub9cc\ub4e4\uc5b4 \ubcf8\ub2e4.
      \n\uc2e4\ud589\ud654\uba74<\/a><\/p>\n
      HTML<\/h4>\n
      <!DOCTYPE html>\n<html lang="ko">\n<head>\n  <meta charset="UTF-8" \/>\n  <title>\uce74\ub4dc \uac24\ub7ec\ub9ac<\/title>\n<\/head>\n<body>\n  <section class="hero">\n    <h1>\uc2a4\ud06c\ub864\uc744 \ub0b4\ub824\ubcf4\uc138\uc694<\/h1>\n  <\/section>\n  <section class="gallery">\n    <div class="card">\uce74\ub4dc 1<\/div>\n    <div class="card">\uce74\ub4dc 2<\/div>\n    <div class="card">\uce74\ub4dc 3<\/div>\n  <\/section>\n  <script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script>\n  <script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js"><\/script>\n  <script src="app.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      8~10<\/td>\n\uccab \ud654\uba74 \uc601\uc5ed\uc774\ub2e4. \uc2a4\ud06c\ub864 \uc720\ub3c4 \ubb38\uad6c\ub97c \ub123\ub294\ub2e4<\/td>\n<\/tr>\n
      11~15<\/td>\n\uce74\ub4dc 3\uc7a5\uc774 \ub4e4\uc5b4\uc788\ub294 \uac24\ub7ec\ub9ac \uc601\uc5ed\uc774\ub2e4<\/td>\n<\/tr>\n
      16~17<\/td>\nGSAP core\uc640 ScrollTrigger Plugin\uc744 \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      JavaScript<\/h4>\n
      gsap.registerPlugin(ScrollTrigger);\n\ngsap.from(".card", {\n  y: 80,\n  opacity: 0,\n  duration: 0.8,\n  stagger: 0.3,\n  ease: "power2.out",\n  scrollTrigger: {\n    trigger: ".gallery",\n    start: "top 70%",\n  },\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
      \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
      1<\/td>\nScrollTrigger Plugin\uc744 \ub4f1\ub85d\ud55c\ub2e4<\/td>\n<\/tr>\n
      4<\/td>\n\uc544\ub798\ucabd(80px)\uc5d0\uc11c \uc62c\ub77c\uc624\uba70 \ub098\ud0c0\ub09c\ub2e4<\/td>\n<\/tr>\n
      7<\/td>\nstagger: 0.3<\/code> \u2014 \uce74\ub4dc\ub9c8\ub2e4 0.3\ucd08 \uac04\uaca9\uc73c\ub85c \uc21c\ucc28 \ub4f1\uc7a5\ud55c\ub2e4<\/td>\n<\/tr>\n
      10~12<\/td>\n.gallery<\/code> \uc601\uc5ed\uc774 viewport 70% \uc704\uce58\uc5d0 \ub3c4\ub2ec\ud558\uba74 \uc2e4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      Tip<\/strong>: stagger<\/code>\ub294 \uc5ec\ub7ec \uc694\uc18c\uc5d0 \uc2dc\uac04\ucc28\ub97c \uc8fc\ub294 \uc18d\uc131\uc774\ub2e4. \uce74\ub4dc\uac00 \ud55c\uaebc\ubc88\uc5d0 \ub098\ud0c0\ub098\ub294 \uac83\ubcf4\ub2e4 \uc21c\ucc28\uc801\uc73c\ub85c \ub098\ud0c0\ub098\uba74 \ud6e8\uc52c \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n<\/blockquote>\n
      14. \ubc14\uc774\ube0c \ucf54\ub529\uc6a9 \ud504\ub86c\ud504\ud2b8 \ubaa8\uc74c<\/h2>\n
      \uac01 \ud504\ub86c\ud504\ud2b8\ub97c AI \ucf54\ub529 \ub3c4\uad6c(Gemini CLI, Claude Code, Cursor \ub4f1)\uc5d0 \uc785\ub825\ud558\uba74 \uad50\uc548 \uc608\uc81c\uc640 \ub3d9\uc77c\ud55c \uacb0\uacfc\ubb3c\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n
      \uacf5\ud1b5 CDN \uc8fc\uc18c:<\/strong><\/p>\n
        \n
      • GSAP core: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js<\/code><\/li>\n
      • ScrollTrigger: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js<\/code><\/li>\n
      • SplitText: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/SplitText.min.js<\/code><\/li>\n
      • TextPlugin: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/TextPlugin.min.js<\/code><\/li>\n
      • Draggable: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/Draggable.min.js<\/code><\/li>\n
      • MorphSVGPlugin: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/MorphSVGPlugin.min.js<\/code><\/li>\n<\/ul>\n
        \n
        14.1. Tween \uae30\ubcf8<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n4\uac1c\uc758 100x100px \ubc15\uc2a4\ub97c \uc138\ub85c\ub85c \ubc30\uce58\ud558\uace0, \uac01\uac01 \ub2e4\ub978 \uc0c9\uc0c1\uc744 \uc801\uc6a9\ud574.\n- \ubc15\uc2a41(\ube68\uac15): gsap.to()\ub85c x\ucd95 300px \uc774\ub3d9, 1\ucd08\n- \ubc15\uc2a42(\ud30c\ub791): gsap.from()\uc73c\ub85c y\ucd95 -100px, opacity 0\uc5d0\uc11c \ub4f1\uc7a5, 1\ucd08\n- \ubc15\uc2a43(\ub178\ub791): gsap.fromTo()\ub85c x:0,opacity:0 \u2192 x:300,opacity:1, 1\ucd08\n- \ubc15\uc2a44(\ucd08\ub85d): gsap.set()\uc73c\ub85c \uc989\uc2dc x:100, opacity:0.5 \uc801\uc6a9\n\n\uac01 \ubc15\uc2a4 \uc704\uc5d0 \uba54\uc11c\ub4dc \uc774\ub984(to, from, fromTo, set)\uc744 h2\ub85c \ud45c\uc2dc\ud574.\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.2. 02-5. Tween \uc2e4\uc804 (\uc774\ub3d9+\ud68c\uc804+\uc0c9\uc0c1)<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n3\uac1c\uc758 100x100px \ubc15\uc2a4\ub97c \uc138\ub85c\ub85c \ubc30\uce58\ud574.\n- box1(\uc8fc\ud669): 3\ucd08\uac04 x:200 \uc774\ub3d9, opacity:0.2, ease:"steps(10)", delay:2\n- box2(\uc5f0\ub450): 3\ucd08\uac04 x:200 \uc774\ub3d9, 720\ub3c4 \ud68c\uc804, scale:1.3\n- box3(\ud1a0\ub9c8\ud1a0): 3\ucd08\uac04 x:200 \uc774\ub3d9, ease:"elastic", \ubc30\uacbd\uc0c9 red\ub85c \ubcc0\uacbd, width:300, fontSize:60\n\n\ubaa8\ub450 gsap.to()\ub97c \uc0ac\uc6a9\ud55c\ub2e4.\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.3. Ease \ube44\uad50<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n8\uac1c\uc758 50x50px \uc6d0\ud615(border-radius:50%) \uc694\uc18c\ub97c \uc138\ub85c\ub85c \ub098\uc5f4\ud574.\n\ubc30\uacbd\uc0c9\uc740 purple\uc774\uace0, \uac01 \uc6d0 \uc548\uc5d0 ease \uc774\ub984\uc744 \ud14d\uc2a4\ud2b8\ub85c \ud45c\uc2dc\ud574.\n\n\ubaa8\ub4e0 \uc6d0\uc774 \ub3d9\uc2dc\uc5d0 x:600\uc73c\ub85c \uc774\ub3d9\ud558\ub418, \uac01\uac01 \ub2e4\ub978 ease\ub97c \uc801\uc6a9\ud55c\ub2e4. duration\uc740 \ubaa8\ub450 5\ucd08.\n\uc21c\uc11c: none, power1, power2, power3, power4, back, elastic, bounce\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.4. Timeline \uc21c\uc11c \uc2e4\ud589<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n4\uac1c\uc758 100x100px \ubc15\uc2a4\ub97c \uc138\ub85c\ub85c \ubc30\uce58\ud574. \uc0c9\uc0c1\uc740 \ube68\uac15, \ucd08\ub85d, \ud30c\ub791, \ud551\ud06c.\n\ngsap.timeline()\uc744 \uc0ac\uc6a9\ud574\uc11c \ub2e4\uc74c \uc21c\uc11c\ub85c \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4:\n- .one: 2\ucd08\uac04 x:500 \uc774\ub3d9\n- .two: timeline \uc2dc\uc791 1\ucd08 \uc2dc\uc810\uc5d0 3\ucd08\uac04 x:500 (\uc808\ub300\uac12 1)\n- .three: \uc774\uc804 tween \uc2dc\uc791 \uc2dc\uc810\uacfc \ub3d9\uc2dc\uc5d0 1\ucd08\uac04 x:500 ("<")\n- .four: \uc774\uc804 tween \uc2dc\uc791 + 0.5\ucd08 \ud6c4 1\ucd08\uac04 x:500 ("<0.5")\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.5.Timeline defaults<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\nh2 \uc81c\ubaa9, p \uc124\uba85\ubb38, a \ubc84\ud2bc(blueviolet \ubc30\uacbd), img(picsum.photos\/200\/150) \uc694\uc18c\ub97c \ubc30\uce58\ud574.\n\ngsap.timeline({ defaults: { duration: 1 } })\uc744 \uc0ac\uc6a9\ud574\uc11c:\n- h2: y:-50, opacity:0\uc5d0\uc11c \ub4f1\uc7a5\n- p: "-=0.5" \uc624\ubc84\ub7a9\uc73c\ub85c \ub4f1\uc7a5\n- a: "+=1" \uac2d \ud6c4 \ub4f1\uc7a5\n- img: \uc808\ub300\uac12 "3"\ucd08 \uc2dc\uc810\uc5d0 y:200\uc5d0\uc11c \ub4f1\uc7a5\n\n\ubaa8\ub450 gsap.from()\uc744 \uc0ac\uc6a9\ud55c\ub2e4.\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.6.  \uc560\ub2c8\uba54\uc774\uc158 \ud578\ub4e4\ub9c1<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n100x100px \ube68\uac04 \ubc15\uc2a4 1\uac1c\uc640 5\uac1c\uc758 \ubc84\ud2bc(\uc2dc\uc791, \uc815\uc9c0, \uc7ac\uac1c, \ubc18\uc804, \uc7ac\uc2dc\uc791)\uc744 \ubc30\uce58\ud574.\n\ngsap.to()\ub85c \ubc15\uc2a4\ub97c 8\ucd08\uac04 x:400, width:400\uc73c\ub85c \uc774\ub3d9\ud558\ub418 paused:true\ub85c \uc0dd\uc131\ud574.\n\uac01 \ubc84\ud2bc \ud074\ub9ad \uc2dc:\n- \uc2dc\uc791: tween.play()\n- \uc815\uc9c0: tween.pause()\n- \uc7ac\uac1c: tween.resume()\n- \ubc18\uc804: tween.reverse()\n- \uc7ac\uc2dc\uc791: tween.restart()\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.7.  ScrollTrigger \uae30\ubcf8<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n3\uac1c\uc758 section(\uac01 100vh)\uc744 \ubc30\uce58\ud574. \ud640\uc218\ub294 #16213e, \uc9dd\uc218\ub294 #0f3460 \ubc30\uacbd.\n\ub450 \ubc88\uc9f8 section \uc911\uc559\uc5d0 150x150px \ube68\uac04 \ubc15\uc2a4\ub97c \ub123\uc5b4.\n\ngsap.registerPlugin(ScrollTrigger) \ud6c4:\n- \ubc15\uc2a4\ub97c x:500, rotation:360, borderRadius:100, duration:2\ub85c \uc560\ub2c8\uba54\uc774\uc158\n- scrollTrigger: trigger\ub294 \ubc15\uc2a4, start:"top 80%", end:"bottom 20%"\n- toggleActions: "play none reverse none"\n- markers: true\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        14.8.  ScrollTrigger scrub<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n3\uac1c\uc758 section(\uac01 100vh)\uc744 \ubc30\uce58\ud574. \ub450 \ubc88\uc9f8 section \uc911\uc559\uc5d0 150x150px \ub178\ub780 \ubc15\uc2a4.\n\ngsap.to()\ub85c \ubc15\uc2a4\ub97c x:500, rotation:360, borderRadius:100\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158.\nscrollTrigger \uc124\uc815:\n- trigger: \ubc15\uc2a4\n- start: "top 50%", end: "bottom 20%"\n- scrub: true (\uc2a4\ud06c\ub864\uc5d0 1:1 \uc5f0\ub3d9)\n- markers: true\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        15. ScrollTrigger pin<\/h2>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n3\uac1c\uc758 section(\uac01 100vh)\uc744 \ubc30\uce58\ud574. \ub450 \ubc88\uc9f8 section \uc911\uc559\uc5d0 150x150px \ucd08\ub85d \ubc15\uc2a4.\n\ngsap.to()\ub85c \ubc15\uc2a4\ub97c x:500, rotation:360\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158.\nscrollTrigger \uc124\uc815:\n- trigger: \ubc15\uc2a4\n- start: "top 50%", end: "bottom 200px"\n- scrub: true\n- pin: true (\uc2a4\ud06c\ub864 \ub3d9\uc548 \ubc15\uc2a4 \uace0\uc815)\n- markers: true\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        15.1. ScrollTrigger.create()<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n\uc704\uc544\ub798\uc5d0 100vh spacer\ub97c \ub450\uace0, \uac00\uc6b4\ub370 sec1 \uc601\uc5ed(100vh) \uc911\uc559\uc5d0 150x150px \ube68\uac04 \ubc15\uc2a4.\n\ngsap.timeline()\uc73c\ub85c:\n1) \ubc15\uc2a4\ub97c rotation:450, scale:0, borderRadius:200\n2) \uc774\uc5b4\uc11c rotation:1800, scale:1, borderRadius:20\n\nScrollTrigger.create()\ub85c \ubcc4\ub3c4 \uc124\uc815:\n- animation: \uc704 timeline \uc5f0\uacb0\n- trigger: ".sec1", start: "top top", end: "+=2000"\n- scrub: true, pin: true, anticipatePin: 1, markers: true\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        15.2. ScrollTrigger stagger<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n\uc704\uc544\ub798\uc5d0 100vh spacer\ub97c \ub450\uace0, \uac00\uc6b4\ub370 sec3 \uc601\uc5ed(100vh)\uc5d0 100x100px \ube68\uac04 \ubc15\uc2a4 5\uac1c\ub97c \uac00\ub85c\ub85c \ub098\uc5f4\ud574.\n\ngsap.timeline()\uc73c\ub85c \ubc15\uc2a4\ub4e4\uc744 gsap.from():\n- y:-300, scale:0.5, autoAlpha:0, ease:"back.out(4)"\n- stagger: { amount: 3, from: "random" }\n\nScrollTrigger.create()\ub85c:\n- trigger: ".sec3", start: "top top", end: "+=2000"\n- scrub: true, pin: true, markers: true\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        07-8. ScrollTrigger callback<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n3\uac1c\uc758 section(\uac01 100vh)\uc744 \ubc30\uce58\ud574. \ub450 \ubc88\uc9f8 section \uc911\uc559\uc5d0 150x150px \ub178\ub780 \ubc15\uc2a4.\n\n\ud654\uba74 \uc6b0\uce21 \uc0c1\ub2e8\uc5d0 position:fixed\ub85c \ub85c\uadf8 \ud328\ub110(#log)\uc744 \ub9cc\ub4e4\uc5b4. \ubc30\uacbd rgba(0,0,0,0.8), \uae00\uc790\uc0c9 #0ae448.\n\ngsap.to()\ub85c \ubc15\uc2a4\ub97c x:500\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158.\nscrollTrigger \uc124\uc815:\n- trigger: \ubc15\uc2a4, start: "top center", end: "bottom 20%"\n- scrub: true, markers: true\n- onEnter: \ub85c\uadf8 \ud328\ub110\uc5d0 "\uc9c4\uc785" \ucd94\uac00\n- onLeave: "\uc774\ud0c8" \ucd94\uac00\n- onEnterBack: "\uc7ac\uc9c4\uc785" \ucd94\uac00\n- onLeaveBack: "\uc7ac\uc774\ud0c8" \ucd94\uac00\n- onUpdate: \uc9c4\ud589\ub960(self.progress.toFixed(3)) \ucd94\uac00\n\naddLog() \ud568\uc218\ub85c p \uc694\uc18c\ub97c \ub3d9\uc801 \uc0dd\uc131\ud558\uc5ec \ub85c\uadf8 \ud328\ub110\uc5d0 append\ud55c\ub2e4.\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        16. SplitText \uae00\uc790 \ub2e8\uc704 \ub4f1\uc7a5<\/h2>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nSplitText CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/SplitText.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e\uc774\ub2e4.\n\n\ud654\uba74 \uc911\uc559\uc5d0 h2 \uc694\uc18c\ub85c "\uc548\ub155\ud558\uc138\uc694, GSAP \uc138\uacc4\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4!" \ud14d\uc2a4\ud2b8\ub97c \ubc30\uce58\ud574.\n\uae00\uc790\uc0c9\uc740 #0ae448, font-size\ub294 40px.\n\ngsap.registerPlugin(SplitText) \ud6c4:\n- SplitText.create()\ub85c h2\ub97c type:"chars, words"\ub85c \ubd84\ub9ac\n- gsap.from(split.chars)\ub85c y:50, opacity:0, stagger:0.05, duration:0.6, ease:"back.out"\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        16.1. TextPlugin \ud0c0\uc774\ud551 \ud6a8\uacfc<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nTextPlugin CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/TextPlugin.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e\uc774\ub2e4.\n\n\ud654\uba74 \uc911\uc559\uc5d0 \ube48 h2 \uc694\uc18c(.msg)\ub97c \ubc30\uce58\ud574. \uae00\uc790\uc0c9\uc740 #f0c368, font-size\ub294 36px.\n\ngsap.registerPlugin(TextPlugin) \ud6c4:\n- gsap.to(".msg")\ub85c text \uc18d\uc131\uc5d0 "\uc548\ub155\ud558\uc138\uc694, GSAP \uc138\uacc4\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4!" \uc9c0\uc815\n- duration: 3, ease: "none"\n- \ud55c \uae00\uc790\uc529 \ud0c0\uc774\ud551\ub418\ub294 \ud6a8\uacfc\uac00 \ub098\ud0c0\ub098\uc57c \ud55c\ub2e4\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        16.2. Draggable \ub4dc\ub798\uadf8 \uc564 \ub4dc\ub86d<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nDraggable CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/Draggable.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n\ud654\uba74 \uc911\uc559\uc5d0 150x150px \ube68\uac04 \ubc15\uc2a4(border-radius:16px)\ub97c \ubc30\uce58\ud574.\n\ubc15\uc2a4 \uc548\uc5d0 "\ub4dc\ub798\uadf8\ud574\ubd10!" \ud14d\uc2a4\ud2b8. cursor:grab, active \uc2dc cursor:grabbing.\n\n\ubc15\uc2a4 \uc544\ub798\uc5d0 \ud604\uc7ac \uc88c\ud45c\ub97c \ud45c\uc2dc\ud558\ub294 div(#coords)\ub97c \ub9cc\ub4e4\uc5b4. \uae00\uc790\uc0c9 #0ae448.\n\ngsap.registerPlugin(Draggable) \ud6c4:\n- Draggable.create()\ub85c type:"x,y", bounds:"body"\n- onDrag \ucf5c\ubc31\uc5d0\uc11c #coords\uc5d0 \ud604\uc7ac x, y \uc88c\ud45c\ub97c \uc2e4\uc2dc\uac04 \ud45c\uc2dc\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        16.3. MorphSVG \ub3c4\ud615 \ubcc0\uc2e0<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nMorphSVGPlugin CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/MorphSVGPlugin.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n\ud654\uba74 \uc911\uc559\uc5d0 200x200 SVG\ub97c \ubc30\uce58\ud558\uace0, \ucd08\ub85d\uc0c9(#0ae448) circle(cx:100, cy:100, r:50)\uc744 \ub123\uc5b4.\n\ngsap.registerPlugin(MorphSVGPlugin) \ud6c4:\n- gsap.to("#shape")\ub85c morphSVG \uc801\uc6a9\n- shape: "M50,10 L90,90 L10,90 Z" (\uc0bc\uac01\ud615)\n- type: "rotational"\n- duration:2, ease:"power2.inOut", repeat:-1, yoyo:true\n- \uc6d0 \u2194 \uc0bc\uac01\ud615\uc744 \ubb34\ud55c \uc655\ubcf5\ud55c\ub2e4\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        17. \uae30\ubcf8 \uac00\ub85c \uc2a4\ud06c\ub864<\/h2>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\nmain \uc548\uc5d0 5\uac1c\uc758 section(\uac01 100vw, 100vh)\uc744 \uac00\ub85c\ub85c \ub098\uc5f4\ud574.\nmain\uc758 width:500%, display:flex, flex-wrap:nowrap.\n\uac01 section\uc5d0 \ud070 \uc22b\uc790(1~5)\ub97c \uc911\uc559 \ud45c\uc2dc\ud558\uace0, \uac01\uac01 \ub2e4\ub978 \ubc30\uacbd\uc0c9\uc744 \uc801\uc6a9\ud574.\n\ngsap.registerPlugin(ScrollTrigger) \ud6c4:\n- gsap.utils.toArray("section")\uc73c\ub85c \ubc30\uc5f4 \uc0dd\uc131\n- gsap.to()\ub85c xPercent: -100 * (sections.length - 1)\n- ease: "none"\n- scrollTrigger: trigger:"main", pin:true, scrub:1, snap:1\/(sections.length-1), end:"+=7000"\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        18. \uac00\ub85c+\uc138\ub85c \ud63c\ud569 \uc2a4\ud06c\ub864<\/h2>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\nmain \uc548\uc5d0 7\uac1c \uc139\uc158\uc744 \ubc30\uce58\ud558\ub418:\n- sec1, sec2: \uc77c\ubc18 \uc138\ub85c \uc2a4\ud06c\ub864\n- sec3, sec4, sec5: .horizontal div\ub85c \uac10\uc2f8\uc11c \uac00\ub85c \uc2a4\ud06c\ub864 \uad6c\uac04\n- sec6, sec7: \uc77c\ubc18 \uc138\ub85c \uc2a4\ud06c\ub864\n\n.horizontal: display:flex, flex-wrap:nowrap, width:300%\n.horizontal > section: width:100%\nmain: overflow:hidden\n\n\uac01 \uc139\uc158\uc5d0 \ubc88\ud638\uc640 "(\uc138\ub85c)" \ub610\ub294 "(\uac00\ub85c)" \ud14d\uc2a4\ud2b8 \ud45c\uc2dc. \uac01\uac01 \ub2e4\ub978 \ubc30\uacbd\uc0c9.\n\ngsap.registerPlugin(ScrollTrigger) \ud6c4:\n- .horizontal \ub0b4\ubd80 section\ub9cc \uac00\ub85c \uc774\ub3d9\n- end: () => "+=" + (horizontal.offsetWidth - innerWidth)\n- pin:true, scrub:1\n- snap: { snapTo: 1\/(sections.length-1), inertia:false, duration:{min:0.1,max:0.1} }\n- invalidateOnRefresh:true, anticipatePin:1\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n
        \n
        18.1. \uc2e4\uc804 \uc885\ud569 \u2014 \uc2a4\ud06c\ub864 \uce74\ub4dc \uac24\ub7ec\ub9ac<\/h3>\n
        \ub2e8\uc77c HTML \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc918.\nGSAP CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js\nScrollTrigger CDN: https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/ScrollTrigger.min.js\n\ubc30\uacbd\uc0c9\uc740 #1a1a2e, \uae00\uc790\uc0c9\uc740 \ud770\uc0c9\uc774\ub2e4.\n\n- \uccab \ubc88\uc9f8 section(.hero, 100vh): \uc911\uc559\uc5d0 "\uc2a4\ud06c\ub864\uc744 \ub0b4\ub824\ubcf4\uc138\uc694 \u2193" \ud14d\uc2a4\ud2b8\n- \ub450 \ubc88\uc9f8 section(.gallery): \uce74\ub4dc 3\uc7a5\uc744 \uac00\ub85c\ub85c \ub098\uc5f4 (250x350px, \ubc30\uacbd #16213e, border-radius:16px, border:2px solid #0f3460)\n- \uc544\ub798\uc5d0 spacer(60vh)\n\ngsap.registerPlugin(ScrollTrigger) \ud6c4:\n- gsap.from(".card")\ub85c y:80, opacity:0, duration:0.8, stagger:0.3, ease:"power2.out"\n- scrollTrigger: trigger:".gallery", start:"top 70%"\n- \uc2a4\ud06c\ub864\ud558\uba74 \uce74\ub4dc\uac00 0.3\ucd08 \uac04\uaca9\uc73c\ub85c \uc544\ub798\uc5d0\uc11c \uc21c\ucc28 \ub4f1\uc7a5\ud55c\ub2e4\n\n\ubd88\ud544\uc694\ud55c CSS \uc7a5\uc2dd \uae08\uc9c0.\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
        GSAP(GreenSock Animation Platform)\uc740 \uc6f9\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc774 \uc4f0\uc774\ub294 JavaScript \uc560\ub2c8\uba54\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\ub2e4. CSS\ub098 \uc21c\uc218 JavaScript\ubcf4\ub2e4 \ud0c1\uc6d4\ud55c \ud37c\ud3ec\uba3c\uc2a4\ub97c \ubc1c\ud718\ud560 \uc218 \uc788\ub3c4\ub85d \ucd5c\uc801\ud654\ub41c \uc560\ub2c8\uba54\uc774\uc158 \uc804\uc6a9 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\uba70, 12\ub9cc \uac1c \uc774\uc0c1\uc758 \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ub418\uace0 \uc788\ub2e4. 2024\ub144 10\uc6d4 Webflow\uac00 GSAP\uc744 \uc778\uc218\ud588\ub2e4. 2025\ub144 4\uc6d4 30\uc77c\ubd80\ud130 GSAP 3.13 \ubc84\uc804\uacfc \ud568\uaed8 \ubaa8\ub4e0 \ud50c\ub7ec\uadf8\uc778\uc774 100% \ubb34\ub8cc\ub85c \uc804\ud658\ub418\uc5c8\ub2e4. \uc774\uc804\uc5d0 \uc720\ub8cc\uc600\ub358 SplitText, MorphSVG \ub4f1\ub3c4 \uc0c1\uc5c5 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ubb34\ub8cc\ub85c \uc0ac\uc6a9\ud560 \uc218 … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-441","post","type-post","status-publish","format-standard","hentry","category-html-css-animation"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=441"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/441\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}