{"id":864,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=864"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"gsap-3","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=864","title":{"rendered":"gsap"},"content":{"rendered":"<h2>1. gsap<\/h2>\n<p><a href=\"https:\/\/gsap.com\/\">gsap\uacf5\uc2dd\uc0ac\uc774\ud2b8<\/a><br \/>\n<a href=\"https:\/\/codepen.io\/GreenSock\">gsap\ucf54\ub4dc\ud39c<\/a><br \/>\n<a href=\"https:\/\/gsap.com\/cheatsheet\/\">gsap\uce58\ud2b8\uc2dc\ud2b8<\/a><br \/>\n<a href=\"https:\/\/cdnjs.com\/libraries\/gsap\">gsap\uc758 \ubaa8\ub4e0 \uae30\ub2a5\uc774 \uc788\ub294 cdn \ub9c1\ud06c<\/a><\/p>\n<blockquote><\/blockquote>\n<p>\uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac<br \/>\n\uae30\uc874 CSS\ub098 \uc21c\uc218 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\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,\u00a0HTML5\uc640\u00a0Flash\u00a0\ub450 \uac1c\uc758 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<br \/>\nGreenSock Engaging the Internet GASP\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \ud0c1\uc6d4\ud55c \ud37c\ud3ec\uba3c\uc2a4\ub85c \uc54c\ub824\uc838 \uc788\ub2e4.<\/p>\n<ul>\n<li>\n<p>gsap.to() \uba54\uc18c\ub4dc\ub97c \uc774\uc6a9\ud574 \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \uc6c0\uc9c1\uc784\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub2e4<\/p>\n<\/li>\n<li>\n<p>\ub2e4\uc591\ud55c \uc885\ub958\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uacf5\ud558\uba70 \ud544\uc694\uc5d0 \ub530\ub77c \ud50c\ub7ec\uadf8\uc778 \ud615\ud0dc\ub85c \ucd94\uac00\ud558\uc5ec \uc0ac\uc6a9\ud560\uc218 \uc788\ub2e4. (\uc77c\ubd80\uc720\ub8cc)<\/p>\n<\/li>\n<li>\n<p>\uae30\ubcf8 \uae30\ub2a5\ub9cc\uc744 \uc0ac\uc6a9\ud560\ub54c\ub294 <strong>gsap.js<\/strong>\u00a0\ud639\uc740\u00a0<strong>gsap.min.js \uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/strong><\/p>\n<\/li>\n<li>\n<p>\ubb38\ubc95\uc740 <strong>camelCase \ub97c \uc0ac\uc6a9\ud55c\ub2e4. ex) background-color (x), backgroundColor (O)<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote><\/blockquote>\n<hr>\n<h2>2. \uc124\uce58<\/h2>\n<h3>2.1. cdn<\/h3>\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<h3>2.2. npm<\/h3>\n<pre><code class=\"language-bash\">npm install gsap\n<\/code><\/pre>\n<h3>2.3. css transform\uacfc gsap \uc18d\uc131 \ube44\uad50<\/h3>\n<table>\n<thead>\n<tr>\n<th>gsap<\/th>\n<th>css<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>x: 100<\/code><\/td>\n<td><code>transform: translateX(100px)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>y: 100<\/code><\/td>\n<td><code>transform: translateY(100px)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>rotation: 360<\/code><\/td>\n<td><code>transform: rotate(360deg)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>rotationX: 360<\/code><\/td>\n<td><code>transform: rotateX(360deg)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>rotationY: 360<\/code><\/td>\n<td><code>transform: rotateY(360deg)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>skewX: 45<\/code><\/td>\n<td><code>transform: skewX(45px)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>skewY: 45<\/code><\/td>\n<td><code>transform: skewY(45deg)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>scale:  2<\/code><\/td>\n<td><code>transform: scale(2,2)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>scaleX: 2<\/code><\/td>\n<td><code>transform: scaleX(2)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>scaleY: 2<\/code><\/td>\n<td><code>transform: scaleY(2)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>xPercent: -50<\/code><\/td>\n<td><code>transform: translateX(-50%)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>yPercent: -50<\/code><\/td>\n<td><code>transform: translateY(-50%)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>2.4. \uae30\ud0c0\uc18d\uc131<\/h3>\n<table>\n<thead>\n<tr>\n<th>\uc18d\uc131<\/th>\n<th>\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>delay<\/td>\n<td>\uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791 \uc804 \uc9c0\uc5f0 \uc2dc\uac04 \uc9c0\uc815<\/td>\n<\/tr>\n<tr>\n<td>repeat<\/td>\n<td>\ubc18\ubcf5\ud69f\uc218 \uc9c0\uc815, -1(\ubb34\ud55c\ubc18\ubcf5)<\/td>\n<\/tr>\n<tr>\n<td>repeatDelay<\/td>\n<td>\ubc18\ubcf5 \uc804 \uc9c0\uc5f0 \uc2dc\uac04 \uc9c0\uc815<\/td>\n<\/tr>\n<tr>\n<td>yoyo<\/td>\n<td>true, \ubc18\ubcf5\ud560 \ub54c \ub4a4\ub85c \ub418\ub3cc\ub9ac\uae30<\/td>\n<\/tr>\n<tr>\n<td>onComplete<\/td>\n<td>\uc560\ub2c8\uba54\uc774\uc158\uc774 \ub05d\ub0ac\uc744 \ub54c \ud638\ucd9c\ud560 \ucf5c\ubc31\ud568\uc218 \uc9c0\uc815<\/td>\n<\/tr>\n<tr>\n<td>onUpdate<\/td>\n<td>\uc560\ub2c8\uba54\uc774\uc158\uc774 \uc5c5\ub370\uc774\ud2b8\ub420 \ub54c\ub9c8\ub2e4 \ud638\ucd9c\ud55c \ucf5c\ubc31\ud568\uc218 \uc9c0\uc815<\/td>\n<\/tr>\n<tr>\n<td>ease<\/td>\n<td>\uac00\uc18d\ub3c4 (power1, elastic, bounce,&#8230;)<\/td>\n<\/tr>\n<tr>\n<td>stagger<\/td>\n<td>\ud0c0\uac9f\uacfc \uc694\uc18c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uc2dc\uc791 \uc2dc\uac04 \uc9c0\uc815<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>3. Tween<\/h2>\n<h3>3.1. \uc608\uc81c<\/h3>\n<blockquote>\n<p>\uc560\ub2c8\uba54\uc774\uc158 \uc791\uc5c5\uc744 \uc218\ud589\ud55c\ub2e4. \ud0c0\uac9f(\uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub824\ub294 \uac1c\uccb4), \uc9c0\uc18d \uc2dc\uac04 \ubc0f \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub824\ub294 \uc18d\uc131\uc744 \uc785\ub825\ud558\uba74 \uac04\ub2e8\ud788 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc644\uc131\ud574\uc900\ub2e4.<br \/>\n\ud2b8\uc708\uc744 \uc0dd\uc131\ud558\ub294 \ub9e4\uc11c\ub4dc\ub294 3\uc885\ub958\uac00 \uc788\ub2e4.<\/p>\n<ul>\n<li>gsap.to()<\/li>\n<li>gsap.from()<\/li>\n<li>gsap.fromTo()<\/li>\n<\/ul>\n<\/blockquote>\n<h4>\uc774\ub3d9<\/h4>\n<blockquote>\n<p>css\ub85c transform: translateX(200px) \uacfc \uac19\uc740 \ud6a8\uacfc\ub97c \uc8fc\uba70 duration\uc740 \ubbf8\uc791\uc131\uc2dc 0.5\ucd08 \uc774\ub2e4<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/gsap01.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<pre><code class=\"language-html\">&lt;head&gt;\n\t&lt;style&gt;\n\t\t.box {\n\t\t\tmargin: 15px;\n\t\t}\n\t\t.box1 {\n\t\t\twidth: 100px;\n\t\t\theight: 100px;\n\t\t\tbackground: orange;\n\t\t}\n\t\t.box2 {\n\t\t\twidth: 200px;\n\t\t\theight: 100px;\n\t\t\tbackground: greenyellow;\n\t\t}\n\t\t.box3 {\n\t\t\twidth: 100px;\n\t\t\theight: 200px;\n\t\t\tbackground: tomato;\n\t\t}\n\t&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\t&lt;div class=&quot;box box1&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box box2&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box box3&quot;&gt;&lt;\/div&gt;\n\n\t&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.6.0\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n\t&lt;script&gt;\n\t\tgsap.to(&#39;.box&#39;, {\n\t\t\tx: 200,\n\t\t});\n\t&lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<h4>\uc774\ub3d9+\ud68c\uc804<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/gsap02.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<p>\uae30\ubcf8\uad6c\uc870\ub294 01\uacfc \uac19\ub2e4.\uc2a4\ud06c\ub9bd\ud2b8\ub9cc \uc218\uc815\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-js\">gsap.to(&#39;.box1&#39;, { duration: 3, x: 200, opacity: 0.2, ease: &#39;steps(10)&#39;, delay: 2 });\ngsap.to(&#39;.box2&#39;, { duration: 3, x: 200, rotate: 720, scale: 1.3 });\ngsap.to(&#39;.box3&#39;, { duration: 3, x: 200, ease: &#39;elastic&#39;, backgroundColor: &#39;red&#39;, width: 300, fontSize: 60 });\n<\/code><\/pre>\n<hr>\n<p><mark>from \uc73c\ub85c \ubcc0\uacbd\ud558\uba74 \uc5d0\ub2c8\uba54\uc774\uc158\uc774 \ubc18\uc804\ub418\uc5b4 \uc2e4\ud589\ub41c\ub2e4.<\/mark><\/p>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/gsap02a.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<pre><code class=\"language-js\">gsap.from(&#39;.box1&#39;, { duration: 3, x: 200, opacity: 0.2, ease: &#39;steps(10)&#39;, delay: 2 });\ngsap.from(&#39;.box2&#39;, { duration: 3, x: 200, rotate: 720, scale: 1.3 });\ngsap.from(&#39;.box3&#39;, { duration: 3, x: 200, ease: &#39;elastic&#39;, backgroundColor: &#39;red&#39;, width: 300, fontSize: 60 });\n<\/code><\/pre>\n<h4>03.  \uc774\ub3d9+\ud22c\uba85\ub3c4 \uc870\uc808<\/h4>\n<blockquote>\n<p>&quot;h2&quot; \uc694\uc18c\uc5d0 1\ucd08 \ub3d9\uc548 \ud22c\uba85\ub3c4\ub97c 30%\ub85c \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uace0 &quot;.orange&quot; \uc694\uc18c\ub294 2\ucd08 \ub3d9\uc548 x\ucd95\uc73c\ub85c 300pixel \uc774\ub3d9\ud558\uace0 &quot;.grey&quot;\ub294 Y\ucd95\uc73c\ub85c 300px \uc774\ub3d9. \u201c.green\u201d \uc694 \uc18c\ub294 3\ucd08 \ub3d9\uc548 360\ub3c4 \ud68c\uc804\ud558\uace0 \ud06c\uae30\ub97c 50%\ub85c \ucd95\uc18c\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158 \uc744 \uc801\uc6a9\ud55c\ub2e4<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/2.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<pre><code class=\"language-html\">&lt;h2 class=&quot;title&quot;&gt;gsap.to() Basic Usage&lt;\/h2&gt;\n&lt;div class=&quot;box orange&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;box grey&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;box green&quot;&gt;&lt;\/div&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">body {\n\tmargin: 10px;\n}\n.box {\n\twidth: 100px;\n\theight: 100px;\n}\n.orange {\n\tbackground: orange;\n}\n.grey {\n\tbackground: grey;\n}\n.green {\n\tbackground: green;\n}\n<\/code><\/pre>\n<pre><code class=\"language-js\">gsap.to(&#39;h2.title&#39;, { duration: 1, opacity: 0.3 });\ngsap.to(&#39;.orange&#39;, { duration: 2, x: 300 });\ngsap.to(&#39;.grey&#39;, { duration: 2, y: 300 });\ngsap.to(&#39;.green&#39;, { duration: 3, rotation: 360, scale: 0.5 });\n<\/code><\/pre>\n<h2>4. easing<\/h2>\n<blockquote>\n<p><strong>Note<\/strong>: easing \uc740 \uac00\uc18d\ub3c4\ub97c \uc124\uc815\ud560\uc218 \uc788\ub294 \uc18d\uc131\uc774\ub2e4.<br \/>\n\uc0ac\uc6a9\ud560\uc218 \uc788\ub294 \uac12\uc740 \uc544\ub798\uc640 \uac19\ub2e4.<br \/>\nnone, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, sine<br \/>\n[]\uacf5\uc2dd\ubb38\uc11c](<a href=\"https:\/\/gsap.com\/docs\/v3\/Eases\/\">https:\/\/gsap.com\/docs\/v3\/Eases\/<\/a>)<\/p>\n<\/blockquote>\n<h3>4.1. \uc608\uc81c<\/h3>\n<h4>04.  \uac00\uc18d\ub3c4<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/04.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<pre><code class=\"language-html\">&lt;section id=&quot;title&quot;&gt;\n\t&lt;div class=&quot;box box1&quot;&gt;none&lt;\/div&gt;\n\t&lt;div class=&quot;box box2&quot;&gt;power1&lt;\/div&gt;\n\t&lt;div class=&quot;box box3&quot;&gt;power2&lt;\/div&gt;\n\t&lt;div class=&quot;box box4&quot;&gt;power3&lt;\/div&gt;\n\t&lt;div class=&quot;box box5&quot;&gt;power4&lt;\/div&gt;\n\t&lt;div class=&quot;box box6&quot;&gt;back&lt;\/div&gt;\n\t&lt;div class=&quot;box box7&quot;&gt;elastic&lt;\/div&gt;\n\t&lt;div class=&quot;box box8&quot;&gt;bounce&lt;\/div&gt;\n\t&lt;div class=&quot;box box9&quot;&gt;rough&lt;\/div&gt;\n\t&lt;div class=&quot;box box10&quot;&gt;slow&lt;\/div&gt;\n\t&lt;div class=&quot;box box11&quot;&gt;steps&lt;\/div&gt;\n\t&lt;div class=&quot;box box12&quot;&gt;circ&lt;\/div&gt;\n\t&lt;div class=&quot;box box13&quot;&gt;expo&lt;\/div&gt;\n\t&lt;div class=&quot;box box14&quot;&gt;sine&lt;\/div&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\n#title {\n\twidth: 700px;\n\tmargin: 100px auto;\n}\n\n.box {\n\tbackground-color: purple;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 50%;\n\ttext-align: center;\n\tline-height: 50px;\n\tfont-size: 12px;\n}\n<\/code><\/pre>\n<pre><code class=\"language-js\">gsap.to(&#39;.box1&#39;, { x: 600, ease: &#39;none&#39;, duration: 5 });\ngsap.to(&#39;.box2&#39;, { x: 600, ease: &#39;power1&#39;, duration: 5 });\ngsap.to(&#39;.box3&#39;, { x: 600, ease: &#39;power2&#39;, duration: 5 });\ngsap.to(&#39;.box4&#39;, { x: 600, ease: &#39;power3&#39;, duration: 5 });\ngsap.to(&#39;.box5&#39;, { x: 600, ease: &#39;power4&#39;, duration: 5 });\ngsap.to(&#39;.box6&#39;, { x: 600, ease: &#39;back&#39;, duration: 5 });\ngsap.to(&#39;.box7&#39;, { x: 600, ease: &#39;elastic&#39;, duration: 5 });\ngsap.to(&#39;.box8&#39;, { x: 600, ease: &#39;bounce&#39;, duration: 5 });\ngsap.to(&#39;.box9&#39;, { x: 600, ease: &#39;rough&#39;, duration: 5 });\ngsap.to(&#39;.box10&#39;, { x: 600, ease: &#39;slow&#39;, duration: 5 });\ngsap.to(&#39;.box11&#39;, { x: 600, ease: &#39;steps(5)&#39;, duration: 5 });\ngsap.to(&#39;.box12&#39;, { x: 600, ease: &#39;circ&#39;, duration: 5 });\ngsap.to(&#39;.box13&#39;, { x: 600, ease: &#39;expo&#39;, duration: 5 });\ngsap.to(&#39;.box14&#39;, { x: 600, ease: &#39;sine&#39;, duration: 5 });\n<\/code><\/pre>\n<h2>5. gsap.timeline()<\/h2>\n<blockquote>\n<p>\ud0c0\uc784\ub77c\uc778 \uba54\uc11c\ub4dc\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc2dc\uac04\uc744 \uc9c0\uc815\ud560\uc218 \uc788\uc5b4 \ub2e4\uc591\ud55c \ubaa8\uc158 \uad6c\ud604\uc2dc \ud3b8\ub9ac\ud558\ub2e4.<\/p>\n<p>[]\uacf5\uc2dd\ubb38\uc11c](<a href=\"https:\/\/gsap.com\/docs\/v3\/GSAP\/gsap.timeline()\/\">https:\/\/gsap.com\/docs\/v3\/GSAP\/gsap.timeline()\/<\/a>)<\/p>\n<\/blockquote>\n<h3>5.1. \uc608\uc81c<\/h3>\n<h4>04.  timeline<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/09.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<pre><code class=\"language-html\">&lt;div class=&quot;one&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;two&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;three&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;four&quot;&gt;&lt;\/div&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\nbody {\n\toverflow: hidden;\n}\n\ndiv {\n\twidth: 100px;\n\theight: 100px;\n}\n\n.one {\n\tbackground: red;\n}\n\n.two {\n\tbackground: green;\n}\n\n.three {\n\tbackground: blue;\n}\n\n.four {\n\tbackground: pink;\n}\n<\/code><\/pre>\n<pre><code class=\"language-js\">let tl = gsap.timeline();\n\/\/total duration:\ntl.to(&#39;.one&#39;, { duration: 2, x: 500 })\n\t\/\/2\ucd08 \ub3d9\uc548 x\ucd95\uc73c\ub85c 500px\n\n\t.to(&#39;.two&#39;, { duration: 3, x: 500 }, 1)\n\t\/\/ 1\ucd08 \ud6c4 3\ucd08\ub3d9\uc548 x\ucd95\uc73c\ub85c 500px(1\uc740 absolute\uac12)\n\n\t.to(&#39;.three&#39;, { duration: 1, x: 500 }, &#39;&lt;&#39;)\n\t\/\/1\ucd08 \ud6c4 1\ucd08\ub3d9\uc548 x\ucd95\uc73c\ub85c 500px(&lt;\uc740 \uc774\uc804 target\uc758 timeline\uc744 \ub530\ub77c\uac10)\n\n\t.to(&#39;.four&#39;, { duration: 1, x: 500 }, &#39;&lt;0.5&#39;);\n\/\/1.5\ucd08\ud6c4 1\ucd08\ub3d9\uc740 x\ucd95\uc73c\ub85c 500px(&lt;0.5\ub97c \ucd94\uac00\ud558\uba74 \uc774\uc804 target\ubcf4\ub2e4 0.5\ucd08 \ub4a4 \uc2e4\ud589\n<\/code><\/pre>\n<h4>05.  parallax<\/h4>\n<blockquote>\n<p><strong>Note<\/strong>: timeline \uc744 \ud65c\uc6a9\ud558\uc5ec \ub2e4\ub978 \ud074\ub798\uc2a4\uc758 \uc694\uc18c\ub4e4\uc5d0 \uc2dc\ucc28\uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4.<\/p>\n<p>\ubcc0\uc218 t1\uc744 \uc120\uc5b8\ud558\uace0 \uae30\ubcf8\uac12\uc73c\ub85c 1\ucd08\ub97c delay\ub85c \ud560\ub2f9\ud55c\ub2e4.<br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/05.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<\/blockquote>\n<pre><code class=\"language-html\">&lt;section id=&quot;title&quot;&gt;\n\t&lt;div class=&quot;container&quot;&gt;\n\t\t&lt;h1 class=&quot;animation1&quot;&gt;JavaScript GSAP Library Animation&lt;\/h1&gt;\n\t\t&lt;p class=&quot;animation1&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolore.&lt;\/p&gt;\n\t\t&lt;a class=&quot;animation1&quot; href=&quot;#&quot;&gt;Button&lt;\/a&gt;\n\t&lt;\/div&gt;\n&lt;\/section&gt;\n&lt;section&gt;\n\t&lt;div class=&quot;box box1&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box box2&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n&lt;section id=&quot;thumbnail&quot;&gt;\n\t&lt;img src=&quot;http:\/\/placekitten.com\/200\/300&quot; \/&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\nbody {\n\toverflow: hidden;\n}\n\n#title {\n\twidth: 700px;\n\tmargin: 100px auto;\n}\n\n.container {\n\tpadding: 20px;\n}\n\nh1 {\n\tmargin-bottom: 20px;\n}\n\np {\n\tmargin-bottom: 15px;\n}\n\na {\n\tdisplay: block;\n\twidth: 100px;\n\tpadding: 10px;\n\tbackground-color: blueviolet;\n\ttext-decoration: none;\n\tcolor: white;\n\ttext-align: center;\n\tborder-radius: 10px;\n}\n\n#thumbnail {\n\twidth: 420px;\n\theight: 300px;\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n}\n.box {\n\twidth: 100px;\n\theight: 100px;\n}\n\n.box1 {\n\tbackground-color: red;\n}\n\n.box2 {\n\tbackground-color: blue;\n}\n<\/code><\/pre>\n<pre><code class=\"language-js\">let t1 = gsap.timeline({ defaults: { duration: 1 } });\n\/\/defaults\ub77c\ub294 \ud2b9\uc218 \uc18d\uc131\uc740 \ubaa8\ub4e0 \ud558\uc704 \ud2b8\uc708\uacfc \ud0c0\uc784\ub77c\uc778\uc5d0\uc11c \uac12\uc744 \uc0c1\uc18d\ud560 \uc218 \uc788\ub2e4.\n\/\/\uc560\ub2c8\uba54\uc774\uc158\uc744 1\ucd08\ub3d9\uc548 \uc9c4\ud589\ud558\ub294 \uae30\ubcf8\uac12 \uc124\uc815\n\nt1.from(&#39;h1&#39;, { y: -50, opacity: 0 })\n\t.from(&#39;p&#39;, { y: -50, opacity: 0 }, &#39;-=0.5&#39;) \/\/ \ud0c0\uc784\ub77c\uc778 \uc885\ub8cc 0.5\ucd08 \uc804 (\uc624\ubc84\ub7a9)\n\t.from(&#39;a&#39;, { y: -50, opacity: 0 }, &#39;+=1&#39;) \/\/ \ud0c0\uc784\ub77c\uc778 \uc885\ub8cc 1\ucd08 \ud6c4 (\uac2d)\n\t.from(&#39;img&#39;, { y: 200, opacity: 0 }, &#39;3&#39;); \/\/ \ud0c0\uc784\ub77c\uc778 \uc2dc\uc791\uc73c\ub85c\ubd80\ud130 3\ucd08 \ud6c4 (\uc808\ub300\uc801)\n\t.from(&#39;.box1&#39;, { x: 200, opacity: 0 }, &quot;&lt;&quot;) \/\/ \uc774\uc804 \ud2b8\uc708 \ud0c0\uc784\ub77c\uc778 \uc2dc\uc791\uc9c0\uc810\n\t.to(&#39;.box2&#39;, { rotate: 360, x:800, opacity: 1}, &quot;&gt;&quot;) \/\/ \uc774\uc804 \ud2b8\uc708 \ud0c0\uc784\ub77c\uc778 \uc885\ub8cc\uc9c0\uc810\n<\/code><\/pre>\n<h4>06.  \ud074\ub9ad\uc2dc \ubc18\ub300\ub85c \uc9c4\ud589<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/06.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<p>\ubb38\uc11c\uc758 \uad6c\uc870\uc640 \uc2a4\ud0c0\uc77c\uc740 \uc774\uc804\uacfc \ub3d9\uc77c<\/p>\n<pre><code class=\"language-js\">let t1 = gsap.timeline({ defaults: { duration: 1 } });\n\nt1.from(&#39;h1&#39;, { y: -50, opacity: 0 })\n\t.from(&#39;p&#39;, { y: -50, opacity: 0 }, &#39;-=0.5&#39;) \/\/ \ud0c0\uc784\ub77c\uc778 \uc885\ub8cc 0.5\ucd08 \uc804 (\uc624\ubc84\ub7a9)\n\t.from(&#39;a&#39;, { y: -50, opacity: 0 }, &#39;-=0.5&#39;) \/\/ \ud0c0\uc784\ub77c\uc778 \uc885\ub8cc 0.5\ucd08 \uc804 (\uc624\ubc84\ub7a9)\n\t.from(&#39;img&#39;, { y: 200, opacity: 0 }, &#39;-=0.5&#39;)\n\t.from(&#39;.box1&#39;, { x: 200, opacity: 0 }, &#39;&lt;&#39;) \/\/ \uc774\uc804 \ud2b8\uc708 \ud0c0\uc784\ub77c\uc778 \uc2dc\uc791\uc9c0\uc810\n\t.to(&#39;.box2&#39;, { rotate: 360, x: 800, opacity: 1 }, &#39;&gt;&#39;); \/\/ \uc774\uc804 \ud2b8\uc708 \ud0c0\uc784\ub77c\uc778 \uc885\ub8cc\uc9c0\uc810\n\ndocument.getElementById(&#39;cta&#39;).addEventListener(&#39;click&#39;, (e) =&gt; {\n\te.preventDefault();\n\tt1.reversed() ? t1.play() : t1.reverse();\n\t\/\/\ud0c0\uc784\ub77c\uc778\uc758 \uc9c4\ud589\uc0c1\ud0dc\uac00 \ubc18\uc804 \ub418\uc5c8\uc744\uacbd\uc6b0 \uc2dc\uc791\ud558\uace0 \uc544\ub2d0\uacbd\uc6b0 \ubc18\uc804\n});\n<\/code><\/pre>\n<p><mark>\uc560\ub2c8\uba54\uc774\uc158\uc758 \ud578\ub4e4\ub9c1\uc774 \uad81\uae08\ud558\ub2e4\uba74?<\/mark><\/p>\n<h4>\ud578\ub4e4\ub9c1\uc608\uc81c<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/handling.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n\t&lt;head&gt;\n\t\t&lt;meta charset=&quot;UTF-8&quot; \/&gt;\n\t\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n\t\t&lt;title&gt;Document&lt;\/title&gt;\n\t\t&lt;style&gt;\n\t\t\t.box {\n\t\t\t\twidth: 100px;\n\t\t\t\theight: 100px;\n\t\t\t}\n\n\t\t\t.box1 {\n\t\t\t\tbackground-color: red;\n\t\t\t}\n\t\t&lt;\/style&gt;\n\t&lt;\/head&gt;\n\n\t&lt;body&gt;\n\t\t&lt;div class=&quot;box box1&quot;&gt;&lt;\/div&gt;\n\t\t&lt;div class=&quot;nav&quot;&gt;\n\t\t\t&lt;button id=&quot;play&quot;&gt;\uc2dc\uc791&lt;\/button&gt;\n\t\t\t&lt;button id=&quot;pause&quot;&gt;\uc815\uc9c0&lt;\/button&gt;\n\t\t\t&lt;button id=&quot;resume&quot;&gt;\uc7ac\uac1c&lt;\/button&gt;\n\t\t\t&lt;button id=&quot;reverse&quot;&gt;\ubc18\uc804&lt;\/button&gt;\n\t\t\t&lt;button id=&quot;restart&quot;&gt;\uc7ac\uc2dc\uc791&lt;\/button&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.8.0\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n\t\t&lt;script&gt;\n\t\t\tconst tween = gsap.to(&quot;.box1&quot;, { duration: 8, x: 400, width: 400, paused: true, });\n\n\t\t\tdocument.querySelector(&quot;#play&quot;).onclick = function () { return tween.play(); };\n\t\t\tdocument.querySelector(&quot;#pause&quot;).onclick = function () { return tween.pause(); };\n\t\t\tdocument.querySelector(&quot;#resume&quot;).onclick = function () { return tween.resume(); };\n\t\t\tdocument.querySelector(&quot;#reverse&quot;).onclick = function () { return tween.reverse(); };\n\t\t\tdocument.querySelector(&quot;#restart&quot;).onclick = function () { return tween.restart(); }.\n\n\t\t\t\/\/resume \uc560\ub2c8\uba54\uc774\uc158 \uba48\ucd98\uacf3 \ubd80\ud130 \uc7ac\uc0dd\uc744 \ub2e4\uc2dc \uc2dc\uc791\n\t\t&lt;\/script&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h2>6. scrollTrigger<\/h2>\n<blockquote>\n<p>\uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70\ub294 gsap \uc758 \ud50c\ub7ec\uadf8\uc778 \uc73c\ub85c \ucd94\uac00\uc124\uce58 \ud574\uc57c\ud55c\ub2e4.<\/p>\n<p><a href=\"https:\/\/gsap.com\/docs\/v3\/Plugins\/ScrollTrigger\/\">api\ubb38\uc11c<\/a><\/p>\n<p><a href=\"https:\/\/codepen.io\/collection\/AEbkkJ\">\ucf54\ub4dc\ud39c\uc608\uc81c<\/a><\/p>\n<\/blockquote>\n<h3>6.1. \uc8fc\uc694\uc18d\uc131<\/h3>\n<table>\n<thead>\n<tr>\n<th>\uc18d\uc131<\/th>\n<th>\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>trigger<\/td>\n<td>\uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2dc\uc791\ub418\uac70\ub098 \ub05d\ub098\ub294 \uc9c0\uc810\uc744 \uac10\uc9c0\ud558\ub294 \uc694\uc18c\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>start<\/td>\n<td>\uc560\ub2c8\uba54\uc774\uc158 \ud2b8\ub9ac\uac70\uac00 \uc2dc\uc791\ub418\ub294 \uc2a4\ud06c\ub864 \uc704\uce58\uc774\ub2e4. \ud615\uc2dd\uc740 &quot;\uc2dc\uc791\uc810 \ub05d\uc810&quot;\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>end<\/td>\n<td>\uc560\ub2c8\uba54\uc774\uc158 \ud2b8\ub9ac\uac70\uac00 \ub05d\ub098\ub294 \uc2a4\ud06c\ub864 \uc704\uce58\uc774\ub2e4. \ud615\uc2dd\uc740 &quot;\uc2dc\uc791\uc810 \ub05d\uc810&quot;\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>scrub<\/td>\n<td>\uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc5f0\ub3d9\ub418\uc5b4 \uc7ac\uc0dd\ub418\ub294\uc9c0 \uc5ec\ubd80\uc774\ub2e4. <code>true<\/code>\ub85c \uc124\uc815\ud558\uba74 \uc2a4\ud06c\ub864\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc7ac\uc0dd\ub41c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>pin<\/td>\n<td>\ud2b9\uc815 \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \ub3d9\uc548 \uace0\uc815\uc2dc\ud0a4\ub294 \uae30\ub2a5\uc774\ub2e4. <code>true<\/code>\ub85c \uc124\uc815\ud558\uba74, \uc9c0\uc815\ub41c \uc694\uc18c\uac00 \uace0\uc815\ub41c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>markers<\/td>\n<td>\uc2dc\uc791\uc810, \ub05d\uc810, \uadf8\ub9ac\uace0 \ud2b8\ub9ac\uac70 \uc694\uc18c\uc758 \uc704\uce58\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud558\ub294 \uac1c\ubc1c \ub3c4\uad6c\uc774\ub2e4. <code>true<\/code>\ub85c \uc124\uc815\ud558\uba74 \ub9c8\ucee4\uac00 \ud45c\uc2dc\ub41c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>toggleActions<\/td>\n<td>\ud2b8\ub9ac\uac70 \uc9c0\uc810\ub9c8\ub2e4 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc2e4\ud589\uc81c\uc5b4 \u2022 onEnter: scroll-start ~ scroll-end \uc0ac\uc774 \u2022 onLeave : scroll-end \ubd80\ubd84\uc744 \ub118\uc5b4\uac08 \ub54c \u2022 onEnterBack : scroll-start ~ scroll-end \uc0ac\uc774 \uc7ac \uc9c4\uc785\uc2dc\u2022 onLeaveBack : scroll-end\ubd80\ubd84 \uc7ac \ud1f4\uc7a5\uc2dc  \u2022 \uc561\uc158\uac12: <code>play<\/code>, <code>pause<\/code>, <code>resume<\/code>, <code>reset<\/code>, <code>restart<\/code>, <code>complete<\/code>, <code>reverse<\/code>(\uc911\uc9c0\ub41c \uacf3\ubd80\ud130 \uc7ac\uc0dd), <code>none<\/code>; \u2022 \uae30\ubcf8\uac12 : <code>toggleActions:play none none none<\/code><\/td>\n<\/tr>\n<tr>\n<td>id<\/td>\n<td>ScrollTrigger \uc778\uc2a4\ud134\uc2a4\uc5d0 \uace0\uc720 \uc2dd\ubcc4\uc790\ub97c \ubd80\uc5ec\ud55c\ub2e4. \uc5ec\ub7ec ScrollTrigger\ub97c \uad00\ub9ac\ud560 \ub54c \uc720\uc6a9\ud558\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>onEnter<\/td>\n<td>\uc2a4\ud06c\ub864\uc774 \ud2b8\ub9ac\uac70 \uc2dc\uc791 \uc9c0\uc810\uc744 \uc9c0\ub0a0 \ub54c \uc2e4\ud589\ud560 \ucf5c\ubc31 \ud568\uc218\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>onLeave<\/td>\n<td>\uc2a4\ud06c\ub864\uc774 \ud2b8\ub9ac\uac70 \ub05d \uc9c0\uc810\uc744 \ubc97\uc5b4\ub0a0 \ub54c \uc2e4\ud589\ud560 \ucf5c\ubc31 \ud568\uc218\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>onEnterBack<\/td>\n<td>\uc2a4\ud06c\ub864\uc774 \ud2b8\ub9ac\uac70 \ub05d \uc9c0\uc810\uc5d0\uc11c \uc2dc\uc791 \uc9c0\uc810\uc73c\ub85c \ub3cc\uc544\uc62c \ub54c \uc2e4\ud589\ud560 \ucf5c\ubc31 \ud568\uc218\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>onLeaveBack<\/td>\n<td>\uc2a4\ud06c\ub864\uc774 \ud2b8\ub9ac\uac70 \uc2dc\uc791 \uc9c0\uc810\uc744 \ub2e4\uc2dc \ubc97\uc5b4\ub0a0 \ub54c \uc2e4\ud589\ud560 \ucf5c\ubc31 \ud568\uc218\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>pinSpacing<\/td>\n<td><code>pin<\/code>\uc774 \ud65c\uc131\ud654\ub41c \uc694\uc18c\uc758 \uacf5\uac04\uc744 \uc5b4\ub5bb\uac8c \ucc98\ub9ac\ud560\uc9c0 \uc815\uc758\ud55c\ub2e4. &quot;margin&quot; \ub610\ub294 &quot;padding&quot; \uac12\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>6.2. \uc8fc\uc694\uba54\uc11c\ub4dc<\/h3>\n<table>\n<thead>\n<tr>\n<th>\uba54\uc11c\ub4dc<\/th>\n<th>\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>create<\/td>\n<td>\uc0c8\ub85c\uc6b4 ScrollTrigger \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc131\ud55c\ub2e4. \uc778\uc2a4\ud134\uc2a4\ub294 \uac1c\ubcc4 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc2a4\ud06c\ub864 \ud2b8\ub9ac\uac70 \uc124\uc815\uc744 \uad00\ub9ac\ud55c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>kill<\/td>\n<td>ScrollTrigger \uc778\uc2a4\ud134\uc2a4\ub97c \uc81c\uac70\ud55c\ub2e4. \uc778\uc2a4\ud134\uc2a4\uc5d0 \uc758\ud574 \uc0dd\uc131\ub41c \ubcc0\uacbd\uc0ac\ud56d\ub4e4\ub3c4 \ud568\uaed8 \uc81c\uac70\ub41c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>6.3. \uc608\uc81c<\/h3>\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js&quot;&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<h4>07.  \uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70 \uae30\ubcf8<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/scrollTrigger\/01.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<pre><code class=\"language-html\">&lt;section&gt;&lt;\/section&gt;\n&lt;section&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n&lt;section&gt;&lt;\/section&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">.box {\n\twidth: 200px;\n\theight: 200px;\n\tbackground: pink;\n}\n\nsection {\n\theight: 100vh;\n}\n<\/code><\/pre>\n<ul>\n<li>\uc139\uc158\ubcc4 \ubc30\uacbd\uc0c9 \ucd94\uac00<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const bg = document.querySelectorAll(&#39;section&#39;);\nconst colors = {\n\tr: 255,\n\tg: 255,\n\tb: 255,\n};\n\nbg.forEach((o, i) =&gt; {\n\to.style.backgroundColor = `rgb(${colors.r - i * 100},${colors.g - i * 50},${colors.b - i * 50})`;\n});\n<\/code><\/pre>\n<ul>\n<li>\uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70 \uc791\uc131<\/li>\n<\/ul>\n<pre><code class=\"language-js\">gsap.to(&#39;.box&#39;, {\n\tscrollTrigger: &#39;.box&#39;,\n\tx: &#39;50vw&#39;,\n});\n<\/code><\/pre>\n<h4>08.  \uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70-\uc560\ub2c8\uba54\uc774\ud2b8<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/01.html\">\uc2e4\ud589\ud654\uba74<\/a> <\/p>\n<ul>\n<li>html<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;main class=&quot;cont&quot;&gt;\n\t&lt;section class=&quot;sec1 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;01&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec2 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;02&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec3 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;03&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec4 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;04&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec5 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;05&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec6 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;06&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec7 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;07&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box box7&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n\t&lt;section class=&quot;sec8 item&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;08&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t\n&lt;\/main&gt;\n<\/code><\/pre>\n<ul>\n<li>css<\/li>\n<\/ul>\n<pre><code class=\"language-css\">@import url(https:\/\/qwerewqwerew.github.io\/source\/style\/reset.css);\n.cont {\n\toverflow: hidden;\n}\n.item {\n\twidth: clamp(50%, 100%, 100%);\n\theight: 100vh;\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 5vw;\n}\n.item:nth-child(2n) {\n\tbackground-color: gray;\n}\n.num {\n\tposition: absolute;\n\tright: 20px;\n\tbottom: 20px;\n\tfont-size: 5vw;\n\tline-height: 1;\n}\n.box {\n\twidth: 10vw;\n\theight: 10vw;\n\tbackground-color: #ff1515;\n\tbackground-size: cover;\n\tbackground-position: center;\n}\n.active.box {\n\tfilter: hue-rotate(100deg);\n}\n<\/code><\/pre>\n<ul>\n<li>js<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const box1 = document.querySelector(&#39;.sec1 .box&#39;);\nconst box2 = document.querySelector(&#39;.sec2 .box&#39;);\nconst box3 = document.querySelector(&#39;.sec3 .box&#39;);\nconst box4 = document.querySelector(&#39;.sec4 .box&#39;);\nconst box5 = document.querySelector(&#39;.sec5 .box&#39;);\nconst box6 = document.querySelector(&#39;.sec6 .box&#39;);\nconst box7 = document.querySelector(&#39;.sec7 .box&#39;);\nconst box8 = document.querySelector(&#39;.sec8 .box&#39;);\nconst box9 = document.querySelector(&#39;.sec9 .box&#39;);\n<\/code><\/pre>\n<ul>\n<li>jq<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const box1 = $(&#39;.sec1 .box&#39;);\nconst box2 = $(&#39;.sec2 .box&#39;);\nconst box3 = $(&#39;.sec3 .box&#39;);\nconst box4 = $(&#39;.sec4 .box&#39;);\nconst box5 = $(&#39;.sec5 .box&#39;);\nconst box6 = $(&#39;.sec6 .box&#39;);\nconst box7 = $(&#39;.sec7 .box&#39;);\nconst box8 = $(&#39;.sec8 .box&#39;);\nconst box9 = $(&#39;.sec9 .box&#39;);\n<\/code><\/pre>\n<ul>\n<li>gsap<\/li>\n<\/ul>\n<pre><code class=\"language-js\">\/\/ 01\ngsap.to(box1, {\n\tduration: 2,\n\tx: 500,\n\tborderRadius: 100,\n\trotation: 360,\n});\n\n\/\/ 02 : trigger\ngsap.to(box2, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\tbackgroundColor: &#39;yellow&#39;,\n\tscrollTrigger: {\n\t\ttrigger: box2,\n\t},\n});\n\n\/\/ 03 : toggleActions\ngsap.to(box3, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\tscrollTrigger: {\n\t\ttrigger: box3,\n\t\ttoggleActions: &#39;play none reverse none&#39;,\n\t},\n});\n\n\/\/ 04 : start, end\ngsap.to(box4, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\tscrollTrigger: {\n\t\ttrigger: box4,\n\t\tstart: &#39;top 50%&#39;,\n\t\tend: &#39;bottom 20%&#39;,\n\t\ttoggleActions: &#39;play none reverse none&#39;,\n\t\tmarkers: true,\n\t},\n});\n\n\/\/ 05 : scrub\ngsap.to(box5, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\n\tscrollTrigger: {\n\t\ttrigger: box5,\n\t\tstart: &#39;top 50%&#39;,\n\t\tend: &#39;bottom 20%&#39;,\n\t\tscrub: true, \/\/true, 1, 2...\n\t\tmarkers: false,\n\t},\n});\n\n\/\/ 06 : pin\ngsap.to(box6, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\n\tscrollTrigger: {\n\t\ttrigger: box6,\n\t\tstart: &#39;top 50%&#39;,\n\t\tend: &#39;bottom 200px&#39;,\n\t\tscrub: true,\n\t\tpin: true,\n\t\tmarkers: false,\n\t},\n});\n\n\/\/ 07 : toggleClass\ngsap.to(box7, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\tscrollTrigger: {\n\t\ttrigger: box7,\n\t\tstart: &#39;top center&#39;,\n\t\tend: &#39;bottom 20%&#39;,\n\t\tscrub: true,\n\t\ttoggleClass: &#39;active&#39;,\n\t\tmarkers: false,\n\t\tid: &#39;box7&#39;,\n\t},\n});\n\n\/\/ 08 : callback\ngsap.to(box8, {\n\tduration: 2,\n\tx: 500,\n\trotation: 360,\n\tborderRadius: 100,\n\n\tscrollTrigger: {\n\t\ttrigger: box8,\n\t\tstart: &#39;top center&#39;,\n\t\tend: &#39;bottom 20%&#39;,\n\t\tscrub: true,\n\t\tmarkers: true,\n\t\t\/\/ onEnter: () =&gt; {console.log(&quot;onEnter&quot;)},\n\t\t\/\/ onLeave: () =&gt; {console.log(&quot;onLeave&quot;)},\n\t\t\/\/ onEnterBack: () =&gt; {console.log(&quot;onEnterBack&quot;)},\n\t\t\/\/ onLeaveBack: () =&gt; {console.log(&quot;onLeaveBack&quot;)},\n\t\tonUpdate: (self) =&gt; {\n\t\t\tconsole.log(&#39;onUpdate&#39;, self.progress.toFixed(3));\n\t\t},\n\t\tonToggle: (self) =&gt; {\n\t\t\tconsole.log(&#39;onToggle&#39;, self.isActive);\n\t\t\tmyAni();\n\t\t},\n\t},\n});\nfunction myAni() {\n\tconst txt = &#39;&lt;span&gt;1&lt;\/span&gt;&#39;;\n\tbox8.parent().append(txt);\n}\n<\/code><\/pre>\n<h4>09.  \uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70-\ud540<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/02.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<ol>\n<li>html 08\ubc88 \uc608\uc81c\uc640 \uc720\uc0ac\ud558\ub098 \uc77c\ubd80 \uc694\uc18c\uac00 \ucd94\uac00\ub41c\ub2e4.<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;section class=&quot;sec2 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;02&lt;\/h2&gt;\n\t&lt;div class=&quot;box i1&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box i2&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box i3&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec3 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;03&lt;\/h2&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec4 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;04&lt;\/h2&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec5 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;05&lt;\/h2&gt;\n\t&lt;div class=&quot;text t1&quot;&gt;Lorem&lt;\/div&gt;\n\t&lt;div class=&quot;text t2&quot;&gt;Lorem&lt;\/div&gt;\n\t&lt;div class=&quot;text t3&quot;&gt;Lorem&lt;\/div&gt;\n\t&lt;div class=&quot;text t4&quot;&gt;Lorem&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec6 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;06&lt;\/h2&gt;\n\t&lt;div class=&quot;text&quot;&gt;Lorem&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec7 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;07&lt;\/h2&gt;\n\t&lt;div class=&quot;text t1&quot;&gt;Lorem&lt;\/div&gt;\n\t&lt;div class=&quot;text t2&quot;&gt;Ipsum&lt;\/div&gt;\n\t&lt;div class=&quot;text t3&quot;&gt;Gsap&lt;\/div&gt;\n\t&lt;div class=&quot;text t4&quot;&gt;HTML&lt;\/div&gt;\n\t&lt;div class=&quot;text t5&quot;&gt;CSS&lt;\/div&gt;\n\t&lt;div class=&quot;text t6&quot;&gt;Javascript&lt;\/div&gt;\n\t&lt;div class=&quot;text t7&quot;&gt;Jquery&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec8 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;08&lt;\/h2&gt;\n\t&lt;div class=&quot;text t1&quot;&gt;Lorem&lt;\/div&gt;\n\t&lt;div class=&quot;text t2&quot;&gt;Ipsum&lt;\/div&gt;\n\t&lt;div class=&quot;text t3&quot;&gt;Gsap&lt;\/div&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;section class=&quot;sec9 item&quot;&gt;\n\t&lt;h2 class=&quot;num&quot;&gt;09&lt;\/h2&gt;\n\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n<ol>\n<li>css \ucd94\uac00<\/li>\n<\/ol>\n<pre><code class=\"language-css\">.sec4 .box,\n.sec9 .box {\n\tbackground: url(http:\/\/qwerew.cafe24.com\/images\/1.jpg) no-repeat center center\/100%;\n}\n.text {\n\tfont-size: 10rem;\n}\n.sec5.item {\n\tflex-direction: column;\n}\n.sec7 .text {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\ttransform: translate(-50%, -50%);\n\tbackground-color: #fff;\n\twidth: 100%;\n\tpadding: 2rem;\n\ttext-align: center;\n}\n<\/code><\/pre>\n<ol>\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">\/\/01 : \uc774\ubbf8\uc9c0 \uc560\ub2c8\uba54\uc774\uc158 \uc8fc\uae30\nconst ani1 = gsap.timeline();\nani1.to(&#39;.sec1 .box&#39;, { rotation: 450, scale: 0, borderRadius: 200 }).to(&#39;.sec1 .box&#39;, { rotation: 360 * 5, scale: 1, borderRadius: 20 });\nScrollTrigger.create({\n\tanimation: ani1,\n\ttrigger: &#39;.sec1&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=2000&#39;, \/\/\uc2dc\uc791 \ubd80\ubd84\ubd80\ud130 2000px\uae4c\uc9c0 \uc2a4\ud06c\ub864 \ud55c \ud6c4\uc885\ub8cc\n\tscrub: true,\n\tpin: true, \/\/\ud654\uba74\uace0\uc815 \/\/true | \uc694\uc18c\uc774\ub984\n\tanticipatePin: 1,\n\tmarkers: true,\n\tid: &#39;sec1&#39;,\n});\n\n\/\/02 : \uc21c\ucc28 \ub098\ud0c0\ub098\uae30\nconst ani2 = gsap.timeline();\nani2.from(&#39;.sec2 .i1&#39;, { y: 200, autoAlpha: 0 }).from(&#39;.sec2 .i2&#39;, { y: 100, autoAlpha: 0 }).from(&#39;.sec2 .i3&#39;, { y: -100, autoAlpha: 0 });\n\nScrollTrigger.create({\n\tanimation: ani2,\n\ttrigger: &#39;.sec2&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=2000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1,\n\tmarkers: true,\n});\n\n\/\/03 : \ub79c\ub364\nconst ani3 = gsap.timeline();\nani3.from(&#39;.sec3 .box&#39;, {\n\ty: -300,\n\tscale: 0.5,\n\tautoAlpha: 0,\n\tease: &#39;back.out(4)&#39;,\n\t\/\/stagger: 0.3, \/\/ 0.3\ucd08 \uac04\uaca9\uc73c\ub85c \uc2e4\ud589\n\tstagger: {\n\t\tamount: 3, \/\/\ucd1d 3\ucd08 \ub3d9\uc548 \ubb34\uc791\uc704\n\t\tfrom: &#39;random&#39;,\n\t},\n});\n\nScrollTrigger.create({\n\tanimation: ani3,\n\ttrigger: &#39;.sec3&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=2000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1,\n\tmarkers: true,\n});\n\n\/\/04 : \uc774\ubbf8\uc9c0 \ucd95\uc18c\ud558\uae30\nconst ani4 = gsap.timeline();\nani4.from(&#39;.sec4 .box&#39;, {\n\tautoAlpha: 0,\n\tscale: 5,\n\twidth: &#39;100vw&#39;,\n\theight: &#39;100vh&#39;,\n});\n\nScrollTrigger.create({\n\tanimation: ani4,\n\ttrigger: &#39;.sec4&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=3000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1, \/\/1\ucd08\uc804 \/\/\ud540\uc774 \uc2dc\uc791\ub418\uae30 \uc9c1\uc804\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ubbf8\ub9ac \uc2dc\uc791\ud574\uc11c \uc608\uc0c1\uce58 \ubabb\ud55c \ub04a\uae40 \ubc29\uc9c0\n\tmarkers: true,\n});\n\n\/\/05 : \ud14d\uc2a4\ud2b8 \uc560\ub2c8\uba54\uc774\uc158\nconst ani5 = gsap.timeline();\n\n\/\/&quot;-=1&quot; 1\ucd08\uc804 \uc2dc\uc791\nani5.to(&#39;.sec5 .t1&#39;, { xPercent: 300 }).to(&#39;.sec5 .t2&#39;, { xPercent: -300 }, &#39;-=1&#39;).to(&#39;.sec5 .t3&#39;, { xPercent: 300 }).to(&#39;.sec5 .t4&#39;, { xPercent: -300 });\n\n\/\/&#39;text&#39; \uadf8\ub8f9\ud551\uae30\ub2a5 \ud568\uaed8 \ub3d9\uc2dc\uc2e4\ud589\n\n\/\/ani5.to(&#39;.sec5 .t1&#39;, { xPercent: 300 }).to(&#39;.sec5 .t2&#39;, { xPercent: -300 }, &#39;text&#39;).to(&#39;.sec5 .t3&#39;, { xPercent: 300 }, &#39;text&#39;).to(&#39;.sec5 .t4&#39;, { xPercent: -300 }, &#39;text&#39;);\n\nScrollTrigger.create({\n\tanimation: ani5,\n\ttrigger: &#39;.sec5&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=3000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1,\n\tmarkers: true,\n});\n\n\/\/06 : \ud14d\uc2a4\ud2b8 \ud655\ub300\ud558\uae30\nconst ani6 = gsap.timeline();\nani6.to(&#39;.sec6 .text&#39;, { scale: 60, duration: 2 }).to(&#39;.sec6 .text&#39;, { autoAlpha: 0 });\n\nScrollTrigger.create({\n\tanimation: ani6,\n\ttrigger: &#39;.sec6&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=4000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1,\n\tmarkers: true,\n});\n\n\/\/07 : \ud14d\uc2a4\ud2b8 \uc81c\uc790\ub9ac \uc560\ub2c8\uba54\uc774\uc158\nconst ani7 = gsap.timeline();\nani7.from(&#39;.sec7 .t1&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;).from(&#39;.sec7 .t2&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;).from(&#39;.sec7 .t3&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;).from(&#39;.sec7 .t4&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;).from(&#39;.sec7 .t5&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;).from(&#39;.sec7 .t6&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;).from(&#39;.sec7 .t7&#39;, { autoAlpha: 0, duration: 1, y: 50 }, &#39;+=1&#39;);\n\nScrollTrigger.create({\n\tanimation: ani7,\n\ttrigger: &#39;.sec7&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=6000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1,\n\tmarkers: true,\n});\n\n\/\/08 : \ud14d\uc2a4\ud2b8 \uc560\ub2c8\uba54\uc774\uc158\nconst ani8 = gsap.timeline();\nani8\n\t.from(&#39;.sec8 .t1&#39;, { x: innerWidth * 1 })\n\t.from(&#39;.sec8 .t2&#39;, { x: innerWidth * -1 })\n\t.from(&#39;.sec8 .t3&#39;, { x: innerWidth * 1 })\n\t.from(&#39;.sec8 .box&#39;, { x: innerWidth * 1, rotation: 360, scale: 5.5 });\n\nScrollTrigger.create({\n\tanimation: ani8,\n\ttrigger: &#39;.sec8&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=4000&#39;,\n\tscrub: true,\n\tpin: true,\n\tanticipatePin: 1,\n\tmarkers: true,\n});\n\n\/\/09 : \uc774\ubbf8\uc9c0 \ud655\ub300\ud558\uae30\nconst ani9 = gsap.timeline();\nani9.to(&#39;.sec9 .box&#39;, { scale: 13 }).to(&#39;.sec9 .box&#39;, { autoAlpha: 0 });\n\nScrollTrigger.create({\n\tanimation: ani9,\n\ttrigger: &#39;.sec9&#39;,\n\tstart: &#39;top top&#39;,\n\tend: &#39;+=4000&#39;,\n\tscrub: true,\n\tpin: true,\n\tmarkers: false,\n\tanticipatePin: 1,\n});\n<\/code><\/pre>\n<p><code>anticipatePin<\/code> : \ud540\uc774 \uc2dc\uc791\ub418\uae30 \uc804 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ubbf8\ub9ac \uc2dc\uc791\ud574\uc11c \uc608\uc0c1\uce58 \ubabb\ud55c \ub04a\uae40 \ubc29\uc9c0 (1\uc740 1\ucd08\uc804 \uc2dc\uc791)<\/p>\n<h4>10.  \uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70-\ud540(\uc139\uc158)<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/03.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<ol>\n<li>html \uc791\uc131<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;main class=&quot;cont&quot;&gt;\n\t\n\t&lt;section class=&quot;item sec1&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;1&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec2&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;2&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec3&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;3&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec4&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;4&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec5&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;5&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<ol>\n<li>css \ucd94\uac00<\/li>\n<\/ol>\n<pre><code class=\"language-css\">.box {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100vh;\n\tbackground-color: #fff;\n\tbackground-size: cover;\n\tbackground-position: center;\n}\n.box::after {\n\tcontent: &#39;&#39;;\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100vh;\n\tbackground-color: rgba(0, 0, 0, 0.7);\n\tz-index: 1;\n}\n.num {\n\tposition: absolute;\n\tfont-size: 10vw;\n\tz-index: 10;\n\tcolor: #fff;\n\tleft: 50%;\n\ttop: 50%;\n\ttransform: translate(-50%, -50%);\n}\n.sec1 .box {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/1.jpg);\n}\n.sec2 .box {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/2.jpg);\n}\n.sec3 .box {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/3.jpg);\n}\n.sec4 .box {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/4.jpg);\n}\n.sec5 .box {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/5.jpg);\n}\n<\/code><\/pre>\n<ol>\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">\/\/ 01. \ud55c\uac1c \uc139\uc158 \uace0\uc815\uc2dc\ud0a4\uae30\n\nfunction fn1() {\n\tconst panel = document.querySelector(&#39;.sec5&#39;);\n\n\tScrollTrigger.create({\n\t\ttrigger: panel,\n\t\tstart: &#39;top top&#39;,\n\t\tpin: true,\n\t\tpinSpacing: false,\n\t});\n}\n\/\/ 02. \uc5ec\ub7ec\uac1c \uc139\uc158 \uace0\uc815\uc2dc\ud0a4\uae30\nfunction fn2() {\n\tgsap.utils.toArray(&#39;.box&#39;).forEach((panel, i) =&gt; {\n\t\tScrollTrigger.create({\n\t\t\ttrigger: panel,\n\t\t\tstart: &#39;top top&#39;,\n\t\t\tpin: true,\n\t\t\tpinSpacing: false,\n\t\t});\n\t});\n}\n\/\/ 03. \uc2a4\ub0c5 \uace0\uc815\nfunction fn3() {\n\tlet panels = gsap.utils.toArray(&#39;.box&#39;);\n\tlet tops = panels.map((panel) =&gt; ScrollTrigger.create({ trigger: panel, start: &#39;top top&#39; }));\n\tconsole.log(tops);\n\tpanels.forEach((panel, i) =&gt; {\n\t\tScrollTrigger.create({\n\t\t\ttrigger: panel,\n\t\t\tstart: () =&gt; (panel.offsetHeight &lt; window.innerHeight ? &#39;top top&#39; : &#39;bottom bottom&#39;),\n\t\t\tpin: true,\n\t\t\tpinSpacing: false,\n\t\t});\n\t});\n\n\tScrollTrigger.create({\n\t\tsnap: {\n\t\t\tsnapTo: (progress, self) =&gt; {\n\t\t\t\tlet panelStarts = tops.map((st) =&gt; st.start),\n\t\t\t\t\tsnapScroll = gsap.utils.snap(panelStarts, self.scroll());\n\t\t\t\treturn gsap.utils.normalize(0, ScrollTrigger.maxScroll(window), snapScroll);\n\t\t\t},\n\t\t\tduration: 0.5,\n\t\t},\n\t});\n}\nfn3();\n<\/code><\/pre>\n<h4>11.  \uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70-\ud328\ub7f4\ub809\uc2a4<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/04.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<ol>\n<li>html<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;main class=&quot;cont&quot;&gt;\n\t\n\t&lt;section class=&quot;item sec1&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;1&lt;\/h2&gt;\n\t\t&lt;div class=&quot;img_wrap&quot;&gt;\n\t\t\t&lt;div class=&quot;img&quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=&quot;desc&quot;&gt;Lorem ipsum dolor sit, amet&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec2&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;2&lt;\/h2&gt;\n\t\t&lt;div class=&quot;img_wrap&quot;&gt;\n\t\t\t&lt;div class=&quot;img&quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=&quot;desc&quot;&gt;Lorem ipsum dolor sit, amet&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec3&quot;&gt;\n\t\t&lt;h2 class=&quot;num reveal&quot;&gt;3&lt;\/h2&gt;\n\t\t&lt;div class=&quot;img_wrap&quot;&gt;\n\t\t\t&lt;div class=&quot;img &quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=&quot;desc reveal ltr&quot; data-delay=&quot;0.8&quot;&gt;Lorem ipsum dolor sit, amet&lt;\/div&gt;\n\t\t&lt;div class=&quot;desc reveal ttb&quot; data-delay=&quot;0.3&quot;&gt;Lorem ipsum dolor sit, amet&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item sec4&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;4&lt;\/h2&gt;\n\t\t&lt;div class=&quot;img_wrap reveal&quot;&gt;\n\t\t\t&lt;div class=&quot;img&quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=&quot;desc reveal btt&quot; data-delay=&quot;0.5&quot;&gt;Lorem ipsum dolor sit, amet&lt;\/div&gt;\n\t&lt;\/section&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<ol>\n<li>css<\/li>\n<\/ol>\n<pre><code class=\"language-css\">section.item {\n\tpadding-top: 5vw;\n\tmargin: 10vw 0;\n\tmargin-right: 0;\n\ttext-align: left;\n}\n.img_wrap {\n\tposition: relative;\n\twidth: 100%;\n\toverflow: hidden;\n\t\/* 1080\/1920*100 *\/\n\tpadding-bottom: 50%;\n}\n.img {\n\tposition: absolute;\n\tfilter: grayscale(100%);\n\ttransition: all 1s;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center center;\n\tbackground-size: cover;\n}\n.img_wrap:hover .img {\n\tfilter: grayscale(0%);\n\ttransform: scale(1.3);\n}\n.num {\n\tposition: absolute;\n\tfont-size: 10vw;\n\tz-index: 10;\n\tcolor: #fff;\n\tleft: 50%;\n\ttop: 50%;\n\ttransform: translate(-50%, -50%);\n}\n.desc {\n\tfont-size: 5vw;\n\tfont-weight: 900;\n\tmargin-left: -50%;\n\tmargin-top: 50%;\n\tz-index: 100;\n\tposition: relative;\n\t-webkit-text-fill-color: #0000802d;\n\t-webkit-text-stroke: 1px #000080;\n\ttext-stroke: 1px 000080;\n}\n.desc:before {\n\tcontent: &#39;Lorem ipsum dolor sit, amet&#39;;\n\tposition: absolute;\n\tfilter: drop-shadow(-15px -10px 10px rgba(28, 33, 106, 0.5)) drop-shadow(10px 10px 10px rgba(13, 16, 65, 0.8)) drop-shadow(20px 20px 40px rgba(9, 11, 41, 0.8));\n}\n.ttb {\n\tmargin-top: 0%;\n}\n.sec1 .img {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/1.jpg);\n}\n.sec2 .img {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/2.jpg);\n}\n.sec3 .img {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/3.jpg);\n}\n.sec4 .img {\n\tbackground-image: url(http:\/\/qwerew.cafe24.com\/images\/4.jpg);\n}\n<\/code><\/pre>\n<ol>\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">\/\/01. \ud328\ub7f4\ub809\uc2a41\uac1c\nconst fn1 = () =&gt; {\n\tgsap.to(&#39;.desc&#39;, {\n\t\tyPercent: -100,\n\t\tease: &#39;none&#39;,\n\t\tduration: 0.5,\n\t\tscrollTrigger: {\n\t\t\ttrigger: &#39;.desc&#39;,\n\t\t\tstart: &#39;top bottom&#39;,\n\t\t\tend: &#39;bottom top&#39;,\n\t\t\tmarkers: true,\n\t\t\tscrub: true,\n\t\t},\n\t});\n};\n\n\/\/02. \ud328\ub7f4\ub809\uc2a4\uc5ec\ub7ec\uac1c\nconst fn = () =&gt; {\n\tgsap.utils.toArray(&#39;.desc&#39;).forEach((item) =&gt; {\n\t\tgsap.to(item, {\n\t\t\tyPercent: -200,\n\t\t\tease: &#39;none&#39;,\n\t\t\tduration: 0.5,\n\t\t\tscrollTrigger: {\n\t\t\t\ttrigger: item,\n\t\t\t\tstart: &#39;top bottom&#39;,\n\t\t\t\tend: &#39;bottom top&#39;,\n\t\t\t\tmarkers: false,\n\t\t\t\tscrub: 0.5,\n\t\t\t},\n\t\t});\n\t});\n};\nfn();\n\n\/\/03. \ub098\ud0c0\ub098\uae30\nconst hide = (item) =&gt; {\n\tgsap.set(item, { autoAlpha: 0 });\n};\n\nconst animate = (item) =&gt; {\n\tlet x = 0;\n\tlet y = 0;\n\tlet delay = item.dataset.delay;\n\n\tif (item.classList.contains(&#39;ltr&#39;)) {\n\t\t(x = -100), (y = 0);\n\t} else if (item.classList.contains(&#39;btt&#39;)) {\n\t\t(x = 0), (y = 100);\n\t} else if (item.classList.contains(&#39;ttb&#39;)) {\n\t\t(x = 0), (y = -100);\n\t} else {\n\t\t(x = 100), (y = 0);\n\t}\n\n\tgsap.fromTo(item, { autoAlpha: 0, x: x, y: y }, { autoAlpha: 1, x: 0, y: 0, delay: delay, duration: 1.25, overwrite: &#39;auto&#39;, ease: &#39;expo&#39; });\n};\n\ngsap.utils.toArray(&#39;.reveal&#39;).forEach((item) =&gt; {\n\thide(item);\n\tScrollTrigger.create({\n\t\ttrigger: item,\n\t\tstart: &#39;top bottom&#39;,\n\t\tend: &#39;bottom top&#39;,\n\t\tmarkers: false,\n\t\tonEnter: () =&gt; {\n\t\t\tanimate(item);\n\t\t},\n\t});\n});\n<\/code><\/pre>\n<h4>12.  \uc2a4\ud06c\ub864\ud2b8\ub9ac\uac70-\ubd80\ub4dc\ub7ec\uc6b4 \uc139\uc158\uc774\ub3d9(scrollTo)<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/09.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<ol>\n<li>html<\/li>\n<\/ol>\n<pre><code class=\"language-html\">\n&lt;nav&gt;\n\t&lt;h1&gt;\uc2a4\ud06c\ub864\ud6a8\uacfc&lt;\/h1&gt;\n\t&lt;ul&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec1&quot;&gt;sec1&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec2&quot;&gt;sec2&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec3&quot;&gt;sec3&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec4&quot;&gt;sec4&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec5&quot;&gt;sec5&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec6&quot;&gt;sec6&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec7&quot;&gt;sec7&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec8&quot;&gt;sec8&lt;\/a&gt;&lt;\/li&gt;\n\t\t&lt;li&gt;&lt;a href=&quot;#sec9&quot;&gt;sec9&lt;\/a&gt;&lt;\/li&gt;\n\t&lt;\/ul&gt;\n&lt;\/nav&gt;\n&lt;main class=&quot;cont&quot;&gt;\n\t\n\t&lt;section class=&quot;item&quot; id=&quot;sec1&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;1&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec2&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;2&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec3&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;3&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec4&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;4&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec5&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;5&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec6&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;6&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec7&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;7&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec8&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;8&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec9&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;9&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<ol>\n<li>css<\/li>\n<\/ol>\n<pre><code class=\"language-css\">nav {\n\tposition: absolute;\n\tdisplay: flex;\n\tgap: 2rem;\n\tmax-width: 80%;\n\tmargin: auto;\n\tz-index: 9999;\n\ttop: 0;\n\ttransition: all 1s;\n\tleft: 0;\n\tbackground-color: gray;\n}\nnav.active {\n\tposition: fixed;\n\ttop: 0;\n\tbackground-color: rgba(128, 128, 128, 0);\n}\nnav.active ul {\n\tpadding: 0rem 8rem;\n\tborder-radius: 50px;\n\tbackground-color: rgba(19, 116, 226, 0.5);\n}\nnav ul {\n\tdisplay: flex;\n\tgap: 2rem;\n\tpadding: 0rem 2rem;\n\tborder-radius: 0px;\n\ttransition: all 1s;\n}\nnav li {\n\twidth: calc(100% \/ 9);\n\theight: 10rem;\n\tline-height: 10rem;\n}\nnav li a {\n\tfont-size: 1.8rem;\n\tcolor: white;\n}\nnav li a.active {\n\tcolor: red;\n}\n<\/code><\/pre>\n<ol>\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let links = gsap.utils.toArray(&#39;nav ul li a&#39;);\n\nlinks.forEach((link) =&gt; {\n\tlet element = document.querySelector(link.getAttribute(&#39;href&#39;));\n\tlet linkST = ScrollTrigger.create({\n\t\ttrigger: element,\n\t\tstart: &#39;top top&#39;,\n\t});\n\n\tScrollTrigger.create({\n\t\ttrigger: element,\n\t\tstart: &#39;top center&#39;,\n\t\tend: &#39;bottom center&#39;,\n\t\tonToggle: (self) =&gt; setActive(link),\n\t});\n\n\tlink.addEventListener(&#39;click&#39;, (e) =&gt; {\n\t\te.preventDefault();\n\t\tgsap.to(window, { duration: 1, scrollTo: linkST.start, overwrite: &#39;auto&#39; });\n\t});\n});\n\nfunction setActive(link) {\n\tlinks.forEach((el) =&gt; el.classList.remove(&#39;active&#39;));\n\tlink.classList.add(&#39;active&#39;);\n}\n\nScrollTrigger.create({\n\tstart: &#39;top -80&#39;,\n\tend: 99999,\n\ttoggleClass: {\n\t\tclassName: &#39;active&#39;,\n\t\ttargets: &#39;nav&#39;,\n\t},\n});\n<\/code><\/pre>\n<h2>7. \uac00\ub85c\ubc29\ud5a5 \uc2a4\ud06c\ub864<\/h2>\n<p>[]\uac00\ub85c\uc2a4\ud06c\ub864Forum]<\/p>\n<blockquote>\n<p>gsap\uc744 \uc774\uc6a9\ud558\uc5ec \ud6a1\uc2a4\ud06c\ub864\uc744 \uc81c\uc791\ud574\ubcf4\uc790<\/p>\n<p>cdn \ucd94\uac00<\/p>\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js&quot;&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<\/blockquote>\n<h3>\uc608\uc81c<\/h3>\n<h4>13.  \uac00\ub85c\uc2a4\ud06c\ub864<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/12.html\">\uc2e4\ud589\ud654\uba74<\/a> <\/p>\n<ol>\n<li>html<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;main class=&quot;cont&quot;&gt;\n\t&lt;h1&gt;\uac00\ub85c\uc2a4\ud06c\ub864&lt;\/h1&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec1&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;1&lt;\/h2&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec2&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;2&lt;\/h2&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec3&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;3&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec4&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;4&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec5&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;5&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec6&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;6&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec7&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;7&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec8&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;8&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec9&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;9&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<ol start=\"2\">\n<li>css<\/li>\n<\/ol>\n<pre><code class=\"language-css\">main {\n\toverscroll-behavior: none;\n\twidth: 900%;\n\theight: 100vh;\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n}\n<\/code><\/pre>\n<ol start=\"3\">\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let sections = gsap.utils.toArray(&#39;section&#39;);\n\nconst move = gsap.to(sections, {\n\txPercent: -100 * (sections.length - 1),\n\tease: &#39;none&#39;,\n\tscrollTrigger: {\n\t\ttrigger: &#39;main&#39;,\n\t\tpin: true,\n\t\tscrub: 1,\n\t\tsnap: 1 \/ (sections.length - 1),\n\t\tend: &#39;+=7000&#39;,\n\t\t\/\/end: document.querySelector(&#39;main&#39;).offsetWidth,\n\t},\n});\n\nif (ScrollTrigger.isTouch &gt; 0) {\n\tmove;\n}\n<\/code><\/pre>\n<blockquote>\n<p><strong>Note<\/strong>: []isTouch]<br \/>\nisTouch: \ud604\uc7ac \uc7a5\uce58\uc758 \ud130\uce58 \uae30\ub2a5\uc744 \uad6c\ubd84\ud558\ub294 \ubc29\ubc95\ub85c<br \/>\n0\uc740 \ub9c8\uc6b0\uc2a4\/\ud3ec\uc778\ud130\ub9cc \uac00\ub2a5(\ud130\uce58 \uc5c6\uc74c),<br \/>\n1\uc740 \ud130\uce58\ub9cc \uac00\ub2a5,<br \/>\n2\ub294 \ub458 \ub2e4 \uac00\ub2a5<\/p>\n<\/blockquote>\n<h4>14.  \uac00\ub85c+\uc138\ub85c<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/13.html\">\uc2e4\ud589\ud654\uba74<\/a> <\/p>\n<ol>\n<li>html<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;main class=&quot;cont&quot;&gt;\n\t&lt;h1&gt;\uac00\ub85c\uc2a4\ud06c\ub864&lt;\/h1&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec1&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;1&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec2&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;2&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;div class=&quot;horizontal&quot;&gt;\n\t\t&lt;section class=&quot;item&quot; id=&quot;sec3&quot;&gt;\n\t\t\t&lt;h2 class=&quot;num&quot;&gt;3&lt;\/h2&gt;\n\t\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t\t&lt;section class=&quot;item&quot; id=&quot;sec4&quot;&gt;\n\t\t\t&lt;h2 class=&quot;num&quot;&gt;4&lt;\/h2&gt;\n\t\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t\t&lt;section class=&quot;item&quot; id=&quot;sec5&quot;&gt;\n\t\t\t&lt;h2 class=&quot;num&quot;&gt;5&lt;\/h2&gt;\n\t\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t&lt;\/div&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec6&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;6&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n\t&lt;section class=&quot;item&quot; id=&quot;sec7&quot;&gt;\n\t\t&lt;h2 class=&quot;num&quot;&gt;7&lt;\/h2&gt;\n\t\t&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt;\n\t&lt;\/section&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<ol start=\"2\">\n<li>css<\/li>\n<\/ol>\n<pre><code class=\"language-css\">main {\n\toverflow: hidden;\n}\n.horizontal {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\twidth: 500%;\n}\n.horizontal &gt; section {\n\twidth: 100%;\n}\n<\/code><\/pre>\n<ol start=\"3\">\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const horizontal = document.querySelector(&#39;.horizontal&#39;);\nconst sections = gsap.utils.toArray(&#39;.horizontal &gt; section&#39;);\n\ngsap.to(sections, {\n\txPercent: -100 * (sections.length - 1),\n\tease: &#39;none&#39;,\n\tscrollTrigger: {\n\t\ttrigger: horizontal,\n\t\tstart: &#39;top top&#39;,\n\t\tend: () =&gt; &#39;+=&#39; + (horizontal.offsetWidth - innerWidth),\n\t\tpin: true,\n\t\tscrub: 1,\n\t\tsnap: {\n\t\t\tsnapTo: 1 \/ (sections.length - 1),\n\t\t\tinertia: false,\n\t\t\tduration: { min: 0.1, max: 0.1 },\n\t\t},\n\t\tinvalidateOnRefresh: true,\n\t\tanticipatePin: 1,\n\t},\n});\n<\/code><\/pre>\n<blockquote>\n<p><strong>Note<\/strong>: &#8211; 10:<br \/>\n  &#39;+=&#39;\ub294 \uc2dc\uc791 \uc9c0\uc810\uc73c\ub85c\ubd80\ud130\uc758 \uc0c1\ub300\uc801 \uc704\uce58.<br \/>\n  horizontal.offsetWidth\ub294 \ud2b8\ub9ac\uac70 \uc694\uc18c\uc758 \uc804\uccb4 \ub108\ube44\uc774\uba70, innerWidth\ub294 \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub0b4\ubd80 \ub108\ube44\uc774\ub2e4.<br \/>\n  (horizontal.offsetWidth &#8211; innerWidth)\ub294 \ud2b8\ub9ac\uac70 \uc694\uc18c\uc758 \ub108\ube44\uc5d0\uc11c \ubdf0\ud3ec\ud2b8\uc758 \ub108\ube44\ub97c \ube80 \uac12<\/p>\n<ul>\n<li>14: snap<br \/>\nsnapTo: \uc2a4\ud06c\ub864 \uc911\ub2e8\uc810. 1 \/ (sections.length &#8211; 1) =&gt; 1\/2 \uc744 \uc758\ubbf8\ud558\uba70 \uac01 \uc139\uc158 \uc0ac\uc774\uc758 \uc0c1\ub300\uc801\uc778 \uc2a4\ub0c5 \uc9c0\uc810\uc744 \uacc4\uc0b0\ud55c\ub2e4<\/li>\n<li>15:<br \/>\ninertia: \uc2a4\ud06c\ub864 \uc911\ub2e8\uc2dc \ubbf8\ub044\ub7ec\uc9d0 \uc801\uc6a9\uc5ec\ubd80. false\ub294 \uc2a4\ud06c\ub864\uc744 \uba48\ucd94\uba74 \uc989\uc2dc \uc2a4\ub0c5 \ud3ec\uc778\ud2b8\ub85c \uc774\ub3d9<\/li>\n<li>16:<br \/>\nduration: \uc2a4\ub0c5 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc9c0\uc18d \uc2dc\uac04. min\uacfc max\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc758 \ucd5c\uc18c \ubc0f \ucd5c\ub300 \uc9c0\uc18d \uc2dc\uac04\uc744 \ucd08 \ub2e8\uc704\ub85c \uc124\uc815. 0.1\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uc5b4, \uc2a4\ub0c5 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc9c0\uc18d \uc2dc\uac04\uc774 \ud56d\uc0c1 0.1\ucd08\ub85c \uc124\uc815\ud568<\/li>\n<li>17:<br \/>\ninvalidateOnRefresh: \uc774 \uc18d\uc131\uc740 ScrollTrigger\uac00 \ud654\uba74 \ud06c\uae30 \ubcc0\uacbd, \ub514\ubc14\uc774\uc2a4 \ud68c\uc804 \ub4f1\uc73c\ub85c \uc778\ud574 \ubdf0\ud3ec\ud2b8\uac00 \ub9ac\ud504\ub808\uc2dc\ub420 \ub54c \uc2a4\ub0c5 \ud3ec\uc778\ud2b8\ub97c \uc7ac\uacc4\uc0b0\ud560\uc9c0 \uc5ec\ubd80\ub97c \uacb0\uc815. true\ub85c \uc124\uc815 \uc2a4\ub0c5 \ud3ec\uc778\ud2b8\uac00 \uc790\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub418\uc5b4 \ud56d\uc0c1 \uc815\ud655\ud55c \uc704\uce58\uc5d0 \uc2a4\ub0c5\ub420 \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4<\/li>\n<\/ul>\n<\/blockquote>\n<h4>15.  \uac00\ub85c+\uc138\ub85c+\ud540+\uc560\ub2c8\uba54\uc774\uc158<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/course\/15.html\">\uc2e4\ud589\ud654\uba74<\/a> <\/p>\n<ol>\n<li>html<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;main&gt;\n\t&lt;div class=&quot;first&quot;&gt;\n\t\t&lt;h1&gt;Testing horizontal scrolling w\/ three sections&lt;\/h1&gt;\n\t\t&lt;h2&gt;First Container&lt;\/h2&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=&quot;horizontal&quot;&gt;\n\t\t&lt;div class=&quot;description section&quot;&gt;\n\t\t\t&lt;div&gt;\n\t\t\t\tSCROLL DOWN\n\t\t\t\t&lt;div class=&quot;scroll-down&quot;&gt;\n\t\t\t\t\t&lt;div class=&quot;arrow&quot;&gt;&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;section class=&quot;section&quot;&gt;\n\t\t\tONE\n\t\t\t&lt;div class=&quot;box-1 box&quot;&gt;box-1&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t\t&lt;section class=&quot;section&quot;&gt;\n\t\t\tTWO\n\t\t\t&lt;div class=&quot;box-2 box&quot;&gt;box-2&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t\t&lt;section class=&quot;section&quot;&gt;\n\t\t\tTHREE\n\t\t\t&lt;div class=&quot;box-3 box&quot;&gt;box-3&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=&quot;last&quot;&gt;Last Container&lt;\/div&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<ol start=\"2\">\n<li>css<\/li>\n<\/ol>\n<pre><code class=\"language-css\">html {\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\theight: 100%;\n\t-webkit-overflow-scrolling: touch;\n\toverflow-scrolling: touch;\n}\n.section {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-weight: 600;\n\tfont-size: 10vw;\n\ttext-align: center;\n\tcolor: rgb(66, 8, 8);\n\tposition: relative;\n\tbox-sizing: border-box;\n\tpadding: 10px;\n}\n.horizontal {\n\twidth: 400%;\n\theight: 100vh;\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n}\n.first {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100vh;\n\tbackground: yellow;\n}\n.last {\n\tdisplay: flex;\n\theight: 100vh;\n\tbackground: yellow;\n}\n.box {\n\tfont-size: 5vw;\n\n\ttext-align: center;\n\tline-height: 80px;\n\tbackground-color: white;\n\tborder-radius: 8px;\n\tcolor: #222;\n\tfont-weight: 700;\n\tmargin-left: -200px;\n\tmargin-top: -200px;\n\twill-change: transform;\n\tdisplay: flex;\n\tz-index: 2;\n}\n.box.active {\n\tbackground-color: orange;\n\tborder: 2px solid white;\n}\n<\/code><\/pre>\n<ol start=\"3\">\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let sections = gsap.utils.toArray(&#39;.section&#39;);\n\nlet scrollTween = gsap.to(sections, {\n\txPercent: -100 * (sections.length - 1),\n\tease: &#39;none&#39;,\n\tscrollTrigger: {\n\t\ttrigger: &#39;.horizontal&#39;,\n\t\tpin: true,\n\t\tscrub: 1,\n\t\tsnap: 1 \/ (sections.length - 1),\n\t\tend: () =&gt; &#39;+=&#39; + document.querySelector(&#39;.horizontal&#39;).offsetWidth,\n\t},\n});\ngsap.set(&#39;.box-1, .box-2 &#39;, { y: 100 });\ngsap.to(&#39;.box-1&#39;, {\n\ty: -130,\n\tduration: 2,\n\tease: &#39;elastic&#39;,\n\tscrollTrigger: {\n\t\ttrigger: &#39;.box-1&#39;,\n\t\tcontainerAnimation: scrollTween,\n\t\tstart: &#39;left center&#39;,\n\t\ttoggleActions: &#39;play none none reset&#39;,\n\t\tid: &#39;1&#39;,\n\t},\n});\ngsap.to(&#39;.box-2&#39;, {\n\ty: -120,\n\trotate: 750,\n\tbackgroundColor: &#39;#1e90ff&#39;,\n\tease: &#39;none&#39;,\n\tscrollTrigger: {\n\t\ttrigger: &#39;.box-2&#39;,\n\t\tcontainerAnimation: scrollTween,\n\t\tstart: &#39;center 80%&#39;,\n\t\tend: &#39;center 20%&#39;,\n\t\tscrub: true,\n\t\tid: &#39;2&#39;,\n\t},\n});\nScrollTrigger.create({\n\ttrigger: &#39;.box-3&#39;,\n\tcontainerAnimation: scrollTween,\n\ttoggleClass: &#39;active&#39;,\n\tstart: &#39;center 60%&#39;,\n\tid: &#39;3&#39;,\n\tmarkers:true,\n});\n<\/code><\/pre>\n<h4>16.  \ud3ec\ud2b8\ud3f4\ub9ac\uc624-1<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/deep\/gsap\/07-horizontal.html\">\uc2e4\ud589\ud654\uba74<\/a> <\/p>\n<ol>\n<li>\uad6c\uc870\uc791\uc131<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;div class=&quot;wrapper&quot;&gt;\n\t&lt;div class=&quot;factsContainer&quot;&gt;\n\t\t&lt;h2&gt;\uc548\ub155\ud558\uc138\uc694&lt;\/h2&gt;\n\t\t&lt;div class=&quot;factsContainer_sm&quot;&gt;\n\t\t\t&lt;div class=&quot;fact&quot;&gt;\n\t\t\t\t&lt;h3&gt;\uc2e0\uc785 \ud504\ub860\ud2b8\uc5d4\ub4dc \uae40\ub9dd\uace0\uc774\ub2e4:&lt;\/h3&gt;\n\t\t\t\t&lt;img src=&quot;https:\/\/source.unsplash.com\/random&quot; alt=&quot;&quot; \/&gt;\n\t\t\t\t&lt;h3&gt;\uc77c\uba38\ub9ac \uc88b\uc740 \uc2e0\uc785 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc785\ub2c8\ub2e4&lt;\/h3&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;fact&quot;&gt;\n\t\t\t\t&lt;h3&gt;\uc88b\uc544\ud558\ub294 \uc74c\uc2dd&lt;\/h3&gt;\n\t\t\t\t&lt;img src=&quot;https:\/\/source.unsplash.com\/random&quot; alt=&quot;&quot; \/&gt;\n\t\t\t\t&lt;h3&gt;\ub5a1\uc21c\uc774&lt;\/h3&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;fact&quot;&gt;\n\t\t\t\t&lt;h3&gt;\uc790\uc2e0\uc788\ub294 \uae30\uc220\uc2a4\ud0dd&lt;\/h3&gt;\n\t\t\t\t&lt;img src=&quot;https:\/\/source.unsplash.com\/random&quot; alt=&quot;&quot; \/&gt;\n\t\t\t\t&lt;h3&gt;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ud83e\udd19&lt;\/h3&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;fact&quot;&gt;\n\t\t\t\t&lt;h3&gt;\uc55e\uc73c\ub85c \uacf5\ubd80\ud558\ub824\uace0 \ud558\ub294 \uae30\uc220\uc2a4\ud0dd&lt;\/h3&gt;\n\t\t\t\t&lt;img src=&quot;https:\/\/source.unsplash.com\/random&quot; alt=&quot;&quot; \/&gt;\n\t\t\t\t&lt;h3&gt;\uc575\uade4\ub7ec, \ub178\ub4dcJS, \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8&lt;\/h3&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;fact&quot;&gt;\n\t\t\t\t&lt;h3&gt;\uc88b\uc544\ud558\ub294 \uac00\uc218&lt;\/h3&gt;\n\t\t\t\t&lt;img src=&quot;https:\/\/source.unsplash.com\/random&quot; alt=&quot;&quot; \/&gt;\n\t\t\t\t&lt;h3&gt;\ub274\uc9c4\uc2a4 \ubbfc\uc9c0&lt;\/h3&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=&quot;fact&quot;&gt;\n\t\t\t\t&lt;h3&gt;\uc88b\uc544\ud558\ub294 \uac83&lt;\/h3&gt;\n\t\t\t\t&lt;img src=&quot;https:\/\/source.unsplash.com\/random&quot; alt=&quot;&quot; \/&gt;\n\t\t\t\t&lt;h3&gt;\uac15\uc544\uc9c0&lt;\/h3&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=&quot;socialContainer&quot;&gt;\n\t\t&lt;h2&gt;\uc800\ub97c \uc548\ubf51\uc73c\uc2dc\uba74 \ub0b4\uc77c\ub3c4 \uc81c\uc0dd\uac01\uc774 \ub098\uc2e4\uaebc\uc5d0\uc694&lt;\/h2&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<ol start=\"2\">\n<li>css \uc791\uc131<\/li>\n<\/ol>\n<pre><code class=\"language-css\">* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.wrapper {\n\tbackground: #1d373f;\n\toverflow-x: hidden;\n}\n\n.factsContainer {\n\tmin-height: 100vh;\n\tpadding: 0em 2em;\n\ttext-align: center;\n\tline-height: 10vh;\n}\n\n.factsContainer h2 {\n\tfont-size: 1.8em;\n\ttransform: scale(0);\n\tpadding: 2em 0em;\n\tmargin-bottom: 15vh;\n\tcolor: #f0c368;\n}\n\n.factsContainer_sm,\n.factsContainer_sm1 {\n\tdisplay: flex;\n\twidth: 300vw;\n}\n\n.fact {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 40vh;\n\tflex: 1;\n\tjustify-content: space-between;\n\tpadding: 1em;\n\talign-items: center;\n\tcolor: #f0c368;\n}\n\n.fact img {\n\twidth: 25vw;\n\theight: 100vh;\n\tmargin: 1em;\n}\n\n.socialContainer {\n\twidth: 100vw;\n\theight: 100vh;\n\tcolor: white;\n\tfont-size: 5em;\n}\n<\/code><\/pre>\n<ol start=\"3\">\n<li>js<\/li>\n<\/ol>\n<pre><code class=\"language-js\">\/\/\uc560\ub2c8\uba54\uc774\uc158 \ud574\uc57c\ud560 \ub300\uc0c1\uc774 \ub9ce\uc73c\ubbc0\ub85c \uc804\uccb4 \ud0c0\uc784\ub77c\uc778\uc5d0 \ubd80\ubaa8\uc694\uc18c\ub97c \ucd94\uac00\ud55c\ub2e4\nlet scroll_tl = gsap.timeline({\n\tscrollTrigger: {\n\t\ttrigger: &#39;.factsContainer&#39;,\n\t\tmarkers: true,\n\t\tstart: &#39;top top&#39;, \/\/\uc2dc\uc791\uc810 \uc124\uc815 \uc717\ubc29\ud5a5\uae30\uc900 \ubdf0\ud3ec\ub4dc \uc911\uc559\uc5d0\uc11c \uc2dc\uc791\n\t\tend: &#39;+=300&#39;, \/\/300px \ub5a8\uc5b4\uc9c4\uac70\ub9ac\uc5d0\uc11c \ub05d\n\t\tscrub: true,\n\t},\n});\nlet facts = document.querySelectorAll(&#39;.fact&#39;);\nlet factW = document.querySelector(&#39;.factsContainer_sm&#39;).clientWidth;\nconsole.log(factW);\nscroll_tl.to(&#39;.factsContainer h2&#39;, {\n\tscale: 1.5,\n\tduration: 1,\n\tease: &#39;slow&#39;,\n});\nscroll_tl.to(facts, {\n\txPercent: -85 * (facts.length - 1), \/\/x\uc774\ub3d9\uac70\ub9ac\n\tscrollTrigger: {\n\t\ttrigger: &#39;.factsContainer_sm&#39;,\n\t\tstart: &#39;center center&#39;,\n\t\tpin: true,\n\t\tscrub: 1,\n\t\tsnap: 1 \/ (facts.length - 1),\n\t\t\/\/ base vertical scrolling on how wide the container is so it feels more natural.\n\t\t\/\/ end: () =&gt; `+=${smallFactsContainer.offsetWidth}`\n\t\tend: () =&gt; `+=${factW}`,\n\t},\n});\ngsap.config({ trialWarn: false });\n<\/code><\/pre>\n<p>:::comment_box<br \/>\n\ud83d\udce2 <strong>\ucf54\ub4dc\uc124\uba85<\/strong><\/p>\n<ul>\n<li>\n<p><strong>let scroll_tl<\/strong>=\uc560\ub2c8\uba54\uc774\uc158 \ud574\uc57c\ud560 \ub300\uc0c1\uc774 \ub9ce\uc73c\ubbc0\ub85c \uc804\uccb4 \ud0c0\uc784\ub77c\uc778\uc5d0 \ubd80\ubaa8\uc694\uc18c\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>start = \uc2a4\ud06c\ub864\uc758 \uc2dc\uc791\ubc29\ud5a5\uacfc \uc9c0\uc810 \uc124\uc815<\/strong><\/p>\n<\/li>\n<li>\n<p>end: \ub05d\uc810 \uc124\uc815<\/p>\n<\/li>\n<\/ul>\n<p>:::<\/p>\n<p>{\/* <a href=\"https:\/\/codepen.io\/GreenSock\/pen\/bGVjLwG\">https:\/\/codepen.io\/GreenSock\/pen\/bGVjLwG<\/a> *\/}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. gsap gsap\uacf5\uc2dd\uc0ac\uc774\ud2b8 gsap\ucf54\ub4dc\ud39c gsap\uce58\ud2b8\uc2dc\ud2b8 gsap\uc758 \ubaa8\ub4e0 \uae30\ub2a5\uc774 \uc788\ub294 cdn \ub9c1\ud06c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac \uae30\uc874 CSS\ub098 \uc21c\uc218 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\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,\u00a0HTML5\uc640\u00a0Flash\u00a0\ub450 \uac1c\uc758 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. GreenSock Engaging the Internet GASP\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \ud0c1\uc6d4\ud55c \ud37c\ud3ec\uba3c\uc2a4\ub85c \uc54c\ub824\uc838 \uc788\ub2e4. gsap.to() \uba54\uc18c\ub4dc\ub97c \uc774\uc6a9\ud574 &#8230; <a title=\"gsap\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=864\" aria-label=\"gsap\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\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-864","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\/864","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=864"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}