728x90
SVG 애니메이션 만들기
1. SVG 제작
1.1. 직접 만들기 (Figma 에서 만드는 것을 추천)
1.2. SVG 자료 가져와서 커스터마이징 하기 https://storyset.com
Storyset | Customize, animate and download illustration for free
Choose your own style! Tell your story with the help of our 'friends' Editable color: choose the hue that best suits the needs of your project Customize! There are a lot of different backgrounds and layers to pick from Animated illustrations: bring your id
storyset.com
2. 애니메이션이 들어갈 요소 또는 묶음에 class 명명하기
3. gsap 라이브러리로 애니메이션 효과주기
Install & CDN
https://gsap.com/docs/v3/Installation/
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
Timeline
https://gsap.com/docs/v3/GSAP/Timeline
CSS
https://gsap.com/docs/v3/GSAP/CorePlugins/CSS
Installation | GSAP docs
GSAP is framework agnostic and can be used in React, Webflow, Wordpress, or any other JS/Web frameworks. The core GSAP file and all the plugins are just Javascript files.
gsap.com
Timeline | GSAP docs
A Timeline is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without Timelines, building complex sequences would be far more cumbersome beca
gsap.com
CSS | GSAP docs
GSAP can animate pretty much ANY CSS-related property of DOM elements. Commonly animated properties are transforms, opacity and colors. But GSAP can handle anything you throw at it. There is no official list as it would be far too long, but if in doubt - t
gsap.com
아래는 위 순서로 만든 svg 애니메이션 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:500px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<g id="freepik--Shadow--inject-5">
<ellipse id="freepik--path--inject-5" cx="250" cy="416.24" rx="193.89" ry="11.32" style="fill:#f5f5f5"></ellipse>
</g>
<g id="freepik--Filter--inject-5">
<path class="light" d="M96.3839 80.6307C94.0407 78.4662 92.2533 75.7691 91.1732 72.7676C90.093 69.7661 89.7518 66.5485 90.1784 63.3872C90.6003 60.1817 91.7931 57.1263 93.6546 54.4829C95.5162 51.8395 97.9909 49.6869 100.867 48.2096C103.743 46.7322 106.934 45.9743 110.167 46.0007C113.4 46.027 116.578 46.837 119.43 48.361C122.281 49.8851 124.72 52.0778 126.539 54.7512C128.357 57.4247 129.5 60.4991 129.869 63.7111C130.238 66.923 129.824 70.1767 128.66 73.1931C127.496 76.2096 125.619 78.8989 123.188 81.0306C121.622 82.3763 120.407 84.0819 119.646 86.0008H112.23V70.0393C113.525 69.5814 114.647 68.7346 115.442 67.6147C116.238 66.4947 116.668 65.1564 116.673 63.7827C116.673 63.1934 116.439 62.6283 116.023 62.2116C115.606 61.795 115.041 61.5609 114.452 61.5609C113.862 61.5609 113.297 61.795 112.881 62.2116C112.464 62.6283 112.23 63.1934 112.23 63.7827C112.23 64.372 111.996 64.9371 111.579 65.3538C111.162 65.7704 110.597 66.0045 110.008 66.0045C109.419 66.0045 108.854 65.7704 108.437 65.3538C108.02 64.9371 107.786 64.372 107.786 63.7827C107.786 63.1934 107.552 62.6283 107.135 62.2116C106.719 61.795 106.154 61.5609 105.564 61.5609C104.975 61.5609 104.41 61.795 103.993 62.2116C103.577 62.6283 103.343 63.1934 103.343 63.7827C103.348 65.1564 103.778 66.4947 104.574 67.6147C105.369 68.7346 106.491 69.5814 107.786 70.0393V86.0008H100.15C99.3005 83.9579 98.0152 82.1252 96.3839 80.6307ZM101.121 90.4444V91.1332C101.123 93.3068 101.988 95.3907 103.525 96.9277C105.062 98.4647 107.146 99.3293 109.319 99.3316H110.697C112.87 99.3293 114.954 98.4647 116.491 96.9277C118.028 95.3907 118.893 93.3068 118.895 91.1332V90.4444H101.121Z" fill="#4A89DC"/>
<path class="setting" d="M236 65C235.999 64.0804 235.916 63.1628 235.75 62.2583L240.822 59.3333L235.822 50.6667L230.748 53.5983C229.347 52.3999 227.738 51.4699 226 50.855V45H216V50.855C214.262 51.4699 212.652 52.3999 211.252 53.5983L206.178 50.6667L201.178 59.3333L206.25 62.2583C205.917 64.0709 205.917 65.9291 206.25 67.7417L201.178 70.6667L206.178 79.3333L211.252 76.4033C212.652 77.6012 214.262 78.5306 216 79.145V85H226V79.145C227.738 78.5301 229.347 77.6001 230.748 76.4017L235.822 79.3333L240.822 70.6667L235.75 67.7417C235.916 66.8372 235.999 65.9196 236 65ZM226 65C226 65.9889 225.707 66.9556 225.157 67.7779C224.608 68.6001 223.827 69.241 222.913 69.6194C222 69.9978 220.994 70.0969 220.024 69.9039C219.055 69.711 218.164 69.2348 217.464 68.5355C216.765 67.8363 216.289 66.9454 216.096 65.9755C215.903 65.0055 216.002 64.0002 216.38 63.0866C216.759 62.173 217.4 61.3921 218.222 60.8427C219.044 60.2932 220.011 60 221 60C222.326 60 223.598 60.5268 224.535 61.4645C225.473 62.4021 226 63.6739 226 65Z" fill="black"/>
<g class="man4">
<circle cx="238.06" cy="128.13" r="33.6" transform="translate(75.88 344.43) rotate(-81.43)" style="fill:#407BFF"></circle>
<path d="M264.2,137.4a27.73,27.73,0,0,1-52.27-18.55A27.73,27.73,0,0,1,264.2,137.4Z" style="fill:#fff"></path>
<path d="M256.62,148.73a27.73,27.73,0,0,1-46-16.31,43.9,43.9,0,0,1,46,16.31Z" style="fill:#407BFF;opacity:0.4"></path>
<path d="M252.88,123.32a12.35,12.35,0,1,1-7.51-15.78A12.34,12.34,0,0,1,252.88,123.32Z" style="fill:#407BFF;opacity:0.4"></path>
</g>
<g class="man2">
<circle cx="114.23" cy="135.51" r="28.35" transform="translate(-0.4 0.34) rotate(-0.17)" style="fill:#407BFF"></circle>
<circle cx="114.23" cy="135.51" r="28.35" transform="translate(-0.4 0.34) rotate(-0.17)" style="fill:#fafafa;opacity:0.6000000000000001"></circle>
<path d="M136.16,127.37a23.39,23.39,0,0,1-43.87,16.27,23.39,23.39,0,0,1,43.87-16.27Z" style="fill:#fff"></path>
<path d="M137.39,138.8a23.4,23.4,0,0,1-38.57,14.31,37.06,37.06,0,0,1,38.57-14.31Z" style="fill:#263238"></path>
<path d="M121.22,124.38a10.42,10.42,0,1,1-13.4-6.15A10.41,10.41,0,0,1,121.22,124.38Z" style="fill:#263238"></path>
</g>
<g class="man3">
<circle cx="167.25" cy="91.06" r="32.35" transform="translate(-15.4 144.93) rotate(-45)" style="fill:#263238"></circle>
<path d="M193.7,87.46a26.7,26.7,0,1,1-30-22.86A26.52,26.52,0,0,1,193.7,87.46Z" style="fill:#fff"></path>
<path d="M192.21,100.5a26.69,26.69,0,0,1-46.51,6.31,42.29,42.29,0,0,1,46.51-6.31Z" style="fill:#407BFF"></path>
<circle cx="166.02" cy="82" r="11.89" transform="translate(0.22 164.46) rotate(-52.73)" style="fill:#407BFF"></circle>
</g>
<g class="money money2">
<rect x="157.12" y="407.4" width="50.96" height="8.84" style="fill:#407BFF"></rect>
<rect x="159.64" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="165.12" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="170.61" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="176.1" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="181.58" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="187.07" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="192.55" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="198.04" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="203.53" y="407.4" width="2.04" height="8.84" style="opacity:0.2"></rect>
</g>
<g class="money money3">
<rect x="155.32" y="398.56" width="50.96" height="8.84" style="fill:#407BFF"></rect>
<rect x="157.84" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="163.32" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="168.81" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="174.3" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="179.78" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="185.27" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="190.76" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="196.24" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="201.73" y="398.56" width="2.04" height="8.84" style="opacity:0.2"></rect>
</g>
<g class="money money4">
<rect x="156.75" y="389.72" width="50.96" height="8.84" style="fill:#407BFF"></rect>
<rect x="159.27" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="164.76" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="170.24" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="175.73" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="181.22" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="186.7" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="192.19" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="197.67" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
<rect x="203.16" y="389.72" width="2.04" height="8.84" style="opacity:0.2"></rect>
</g>
<g class="money money1">
<circle cx="179.78" cy="359.85" r="25.69" transform="translate(-76.3 49.63) rotate(-12.99)" style="fill:#407BFF"></circle>
<path d="M198.08,371.29a21.57,21.57,0,1,1-6.86-29.73A21.58,21.58,0,0,1,198.08,371.29Z" style="opacity:0.2"></path>
<circle cx="180.14" cy="360.72" r="21.2" transform="translate(-76.49 49.73) rotate(-12.99)" style="fill:#407BFF"></circle>
<path d="M187.21,364.48l-3.18,5.1a1.64,1.64,0,0,1-1.1.75,1.72,1.72,0,0,1-1.33-.22l-4.48-2.8-2.24,3.59a1.74,1.74,0,0,1-2.39.55,1.72,1.72,0,0,1-.8-1.1,1.6,1.6,0,0,1,.21-1.31l2.26-3.63-4.44-2.78a1.69,1.69,0,0,1-.77-1.07,1.66,1.66,0,0,1,.22-1.32,1.65,1.65,0,0,1,1.08-.77,1.69,1.69,0,0,1,1.31.22l10.4,6.5,1.32-2.12-10.36-6.48a1.66,1.66,0,0,1-.78-1.07,1.64,1.64,0,0,1,.22-1.32l3.18-5.07a1.66,1.66,0,0,1,1.08-.78,1.73,1.73,0,0,1,1.31.22l4.41,2.76,2.24-3.59a1.74,1.74,0,0,1,2.45-.52,1.66,1.66,0,0,1,.75,1.07,1.63,1.63,0,0,1-.22,1.31l-2.24,3.59,4.51,2.83a1.72,1.72,0,0,1,.79,1.1,1.63,1.63,0,0,1-.2,1.31,1.67,1.67,0,0,1-1.11.78A1.7,1.7,0,0,1,188,360l-10.4-6.5-1.31,2.1,10.37,6.48a1.73,1.73,0,0,1,.78,1.1A1.61,1.61,0,0,1,187.21,364.48Z" style="fill:#fafafa"></path>
<path d="M193.4,338.07a25.71,25.71,0,0,0-39.19,19.26h51.14A25.64,25.64,0,0,0,193.4,338.07Z" style="opacity:0.4"></path>
</g>
<path d="M273.4,133.67H86.92a8.51,8.51,0,0,0-7,13.35l20.82,30.07a8.53,8.53,0,0,0,7,3.66H252.58a8.51,8.51,0,0,0,7-3.66L280.4,147A8.51,8.51,0,0,0,273.4,133.67Z" style="fill:#407BFF;opacity:0.2"></path>
<polygon points="274.45 170.62 85.88 170.62 147.2 302.72 213.12 302.72 274.45 170.62" style="fill:#407BFF"></polygon>
<rect x="109.22" y="221.69" width="1" height="14.83" transform="translate(-86.27 67.5) rotate(-24.9)" style="fill:#407BFF"></rect>
<rect x="115.65" y="239.5" width="1" height="6.94" transform="translate(-91.51 71.5) rotate(-24.9)" style="fill:#407BFF"></rect>
<polygon points="274.45 170.62 85.88 170.62 147.2 302.72 213.12 302.72 274.45 170.62" style="opacity:0.30000000000000004"></polygon>
<polygon points="140.92 170.62 105.24 170.62 159.28 302.72 170.82 302.72 140.92 170.62" style="opacity:0.2"></polygon><rect x="75.26" y="145.21" width="209.81" height="25.41" rx="4.77" style="fill:#407BFF"></rect>
<path d="M203.44,350.63H156.89a6.62,6.62,0,0,1-6.6-6.13l-3.09-41.78h65.92L210,344.5A6.61,6.61,0,0,1,203.44,350.63Z" style="fill:#407BFF"></path>
<path d="M203.44,350.63H156.89a6.62,6.62,0,0,1-6.6-6.13l-3.09-41.78h65.92L210,344.5A6.61,6.61,0,0,1,203.44,350.63Z" style="opacity:0.2"></path>
</g>
<g id="freepik--Character--inject-5">
<polygon points="330.96 407.88 322.77 407.88 322.23 388.92 330.42 388.92 330.96 407.88" style="fill:#ffb573"></polygon>
<polygon points="322.23 388.92 322.51 398.7 330.7 398.7 330.42 388.92 322.23 388.92" style="opacity:0.2"></polygon>
<polygon points="394.26 378.12 387.09 382.07 375.65 366.72 382.82 362.78 394.26 378.12" style="fill:#ffb573"></polygon>
<polygon points="382.83 362.78 375.65 366.73 381.55 374.63 388.73 370.69 382.83 362.78" style="opacity:0.2"></polygon>
<path d="M363.1,175.72c-7.32-5-10.63-10.15-11.27-16.36,1.23,6.58,5.16,11.8,13.94,16.21a.46.46,0,0,0,.23.06.5.5,0,0,0,.22-.95c-12.35-6.2-14.74-13.79-13.61-25.09.32-1.49.72-3,1.2-4.64,4-13.66-18.28-16.4-25.25-13.56-17.13,7-11.87,26.45-7,33.78s-11.42,12.25-2.32,33.22,39.37,20.45,48,9.55S375.36,184.17,363.1,175.72Z" style="fill:#263238"></path>
<path d="M318.4,184.17c-.1,1.37-.21,2.56-.38,3.81s-.35,2.46-.55,3.68c-.4,2.45-1,4.87-1.53,7.28a79.38,79.38,0,0,1-4.87,14.17l-.39.86c-.15.3-.21.48-.52,1.07a7.37,7.37,0,0,1-2.47,2.63,7.69,7.69,0,0,1-3.13,1.11,10.73,10.73,0,0,1-2.66,0,23.37,23.37,0,0,1-7.84-2.73,65,65,0,0,1-12.17-8.6l2.47-3.33c2,1.13,4.07,2.28,6.13,3.32a59.82,59.82,0,0,0,6.22,2.8,19.11,19.11,0,0,0,5.79,1.46c.78,0,1.25-.22,1.11-.22s-.11.07-.1,0l.51-1.35a92.87,92.87,0,0,0,3.85-13.08c.5-2.24.9-4.51,1.28-6.77s.68-4.6.9-6.71Z" style="fill:#ffb573"></path>
<path d="M312.71,174.16C309.33,175,307,188.9,307,188.9l9.3,6.32s8.92-14,6.32-17.71C319.89,173.64,317.63,172.9,312.71,174.16Z" style="fill:#407BFF"></path>
<path d="M312.71,174.16C309.33,175,307,188.9,307,188.9l9.3,6.32s8.92-14,6.32-17.71C319.89,173.64,317.63,172.9,312.71,174.16Z" style="opacity:0.2"></path>
<polygon points="313.01 177.26 310.42 191.25 315.64 194.8 313.01 177.26" style="opacity:0.2"></polygon>
<path d="M285.74,204.68l-5-7.84-2.82,7.83s3.47,4,6.78,3.17Z" style="fill:#ffb573"></path>
<polygon points="275.4 193.9 272.07 200.03 277.91 204.67 280.73 196.84 275.4 193.9" style="fill:#ffb573"></polygon>
<path d="M385.54,381.1l7.32-5.57a.64.64,0,0,1,.85.05l5.25,5.15a1.32,1.32,0,0,1-.16,1.95c-2.59,1.9-3.93,2.69-7.15,5.14-2,1.51-4.71,3.92-7.45,6s-4.93-.51-4-1.62c4.26-5,3.92-7.11,4.54-9.87A2.15,2.15,0,0,1,385.54,381.1Z" style="fill:#263238"></path>
<path d="M322.49,406.93h9.2a.65.65,0,0,1,.66.56l1,7.28a1.31,1.31,0,0,1-1.31,1.45c-3.21-.05-4.75-.24-8.8-.24-2.48,0-9.63.26-13.07.26s-3.62-3.4-2.19-3.71c6.42-1.38,10.94-3.28,13.11-5.1A2.17,2.17,0,0,1,322.49,406.93Z" style="fill:#263238"></path>
<path d="M312.71,174.16s-3.9,1.37,3.91,49.41h33.25c-.56-13.53-.57-21.88,5.89-49.65a97.21,97.21,0,0,0-14.12-1.86,105.44,105.44,0,0,0-15.09,0C320.06,172.65,312.71,174.16,312.71,174.16Z" style="fill:#407BFF"></path>
<path d="M312.71,174.16s-3.9,1.37,3.91,49.41h33.25c-.56-13.53-.57-21.88,5.89-49.65a97.21,97.21,0,0,0-14.12-1.86,105.44,105.44,0,0,0-15.09,0C320.06,172.65,312.71,174.16,312.71,174.16Z" style="opacity:0.2"></path>
<path d="M341.64,172.06a105.44,105.44,0,0,0-15.09,0c-1.82.16-3.7.4-5.46.65h0c-.78,2.92-.62,7,2.35,12.34l1.72,3.07,3.27-1.31c2.42-1,14.67-6.15,18.6-12.53l1-1.65C346.07,172.38,343.88,172.17,341.64,172.06Z" style="fill:#fff"></path>
<path d="M341.64,172.06h0c-3.39-3.24-2.44-12.15-1.49-17L330.88,163c.94,3.78,1.08,7.79-4.33,9.09h0l-1,.1c-1.21,2.28-1.51,5.8,1.38,11,0,0,13.24-5.34,16.69-10.92C343,172.14,342.31,172.09,341.64,172.06Z" style="fill:#ffb573"></path>
<path d="M336.37,158.29,330.88,163a14.92,14.92,0,0,1,.47,2.68c2.07-.3,4.91-2.57,5.13-4.74A7.17,7.17,0,0,0,336.37,158.29Z" style="opacity:0.2"></path>
<path d="M346.27,147.3c-2.43,7.76-3.29,11.09-8.26,14.15-7.48,4.61-16.48-.07-16.42-8.39.05-7.49,4-18.92,12.49-20.15A11.09,11.09,0,0,1,346.27,147.3Z" style="fill:#ffb573"></path>
<path d="M347.82,136a15.17,15.17,0,0,0-9.72-4,3.37,3.37,0,0,0-1.79-.82c-3.77-.77-8,.25-9.93,2.64-1.73,2.18,4.16,3.46,8.39,1.73.61,6.68,6.25,20.42,11.63,19.18C353.43,153.13,353.49,141.25,347.82,136Z" style="fill:#263238"></path>
<path d="M316.62,223.57s-6.46,63.07-5.92,88c.56,26,10.07,85.19,10.07,85.19h11.07s-1.75-57.71-.77-83.21c1.07-27.81,9.9-90,9.9-90Z" style="fill:#263238"></path>
<polygon points="332.8 397.2 319.81 397.2 318.86 393.06 333.41 392.55 332.8 397.2" style="fill:#407BFF"></polygon>
<path d="M331,239.26c-8.17,16.43-1.64,46.4,1.25,57.55,1.48-16.74,4-37.22,5.92-52.25C336.9,236.06,334.73,231.69,331,239.26Z" style="opacity:0.2"></path>
<path d="M325.4,223.57s7.53,65.57,13.22,86.62c6.75,25,40.29,63.74,40.29,63.74l9.78-5.38s-23.26-43.5-28.43-56.67c-11-28.1-1.58-70-10.39-88.31Z" style="fill:#263238"></path>
<polygon points="390.1 368.44 377.96 375.11 374.57 372.01 388.49 363.52 390.1 368.44" style="fill:#407BFF"></polygon>
<path d="M333.19,146.3c-.15.64-.62,1.07-1,1s-.63-.71-.47-1.35.62-1.08,1-1S333.35,145.65,333.19,146.3Z" style="fill:#263238"></path>
<path d="M326,144.51c-.16.64-.63,1.08-1.05,1s-.63-.7-.47-1.34.62-1.08,1-1S326.1,143.87,326,144.51Z" style="fill:#263238"></path>
<path d="M325.65,143.24l-1.43-.82S324.71,143.82,325.65,143.24Z" style="fill:#263238"></path>
<path d="M327.9,146.22a17.47,17.47,0,0,1-3.3,3.52,2.85,2.85,0,0,0,2.18,1Z" style="fill:#ed893e"></path>
<path d="M329.66,154.11a6.86,6.86,0,0,1-1-.16.19.19,0,0,1-.14-.24.19.19,0,0,1,.23-.14,5.23,5.23,0,0,0,4.63-1,.18.18,0,0,1,.27,0,.19.19,0,0,1,0,.27A5.44,5.44,0,0,1,329.66,154.11Z" style="fill:#263238"></path>
<path d="M346.62,155.05a5.94,5.94,0,0,1-3.8,2.48c-2.05.36-2.88-1.52-2.14-3.35.66-1.65,2.52-3.82,4.5-3.36A2.67,2.67,0,0,1,346.62,155.05Z" style="fill:#ffb573"></path>
<path d="M336.47,145.54a.39.39,0,0,1-.35-.3c-.4-1.75-2.53-2.64-2.55-2.65a.39.39,0,0,1-.22-.51.4.4,0,0,1,.51-.21c.1,0,2.53,1.06,3,3.19a.39.39,0,0,1-.29.47Z" style="fill:#263238"></path>
<path d="M324.59,140.63a.42.42,0,0,1-.31-.22.39.39,0,0,1,.18-.52,3.84,3.84,0,0,1,3.54,0,.39.39,0,0,1,.13.53.38.38,0,0,1-.53.13h0a3.08,3.08,0,0,0-2.8,0A.52.52,0,0,1,324.59,140.63Z" style="fill:#263238"></path>
<path d="M359.59,183.45c1,5,1.74,9.85,2.31,14.83.3,2.48.52,5,.69,7.5.09,1.25.14,2.52.19,3.79l.05,1.91v.77q0,.36,0,.72a5.27,5.27,0,0,1-1.38,3,5.67,5.67,0,0,1-2.12,1.39,7.27,7.27,0,0,1-1.62.43,12.47,12.47,0,0,1-2.52.12,30.33,30.33,0,0,1-4.16-.51,69.17,69.17,0,0,1-7.47-1.94c-2.4-.77-4.76-1.6-7.1-2.47s-4.63-1.84-6.92-2.9l1.39-3.9c2.34.57,4.72,1.17,7.09,1.7s4.73,1.09,7.08,1.54,4.7.87,7,1.1a22.24,22.24,0,0,0,3.18.15,5,5,0,0,0,1.15-.14c.14,0,.18-.07.15-.06a1.33,1.33,0,0,0-.58.39,2.42,2.42,0,0,0-.63,1.34.76.76,0,0,0,0,.26s0-.12,0-.17l0-.44-.16-1.77-.39-3.56c-.29-2.38-.62-4.77-1-7.16s-.74-4.78-1.14-7.17-.81-4.79-1.21-7.13Z" style="fill:#ffb573"></path>
<path d="M355.76,173.92c3.34,1,7.34,12.48,7.34,12.48l-12.93,9.24s-4.71-9.57-3.31-13.88C348.32,177.28,352,172.76,355.76,173.92Z" style="fill:#407BFF"></path>
<path d="M355.76,173.92c3.34,1,7.34,12.48,7.34,12.48l-12.93,9.24s-4.71-9.57-3.31-13.88C348.32,177.28,352,172.76,355.76,173.92Z" style="opacity:0.2"></path>
<path d="M382.78,384.55h-.1a1.12,1.12,0,0,1-.88-.63.7.7,0,0,1,0-.67c.5-.92,3.45-1.15,3.79-1.17a.17.17,0,0,1,.18.1.2.2,0,0,1,0,.22C385.05,383.21,383.8,384.55,382.78,384.55Zm2.33-2c-1.17.12-2.73.44-3,.93a.26.26,0,0,0,0,.29.71.71,0,0,0,.57.43C383.27,384.21,384.15,383.6,385.11,382.51Z" style="fill:#407BFF"></path>
<path d="M385.29,382.48c-1,0-2.88-.48-3.25-1.24a.68.68,0,0,1,.19-.83,1,1,0,0,1,.81-.29c1.19.09,2.62,2,2.68,2a.21.21,0,0,1,0,.2.19.19,0,0,1-.15.11A1.51,1.51,0,0,1,385.29,382.48Zm-2.34-2a.65.65,0,0,0-.45.19c-.18.17-.15.29-.11.38.25.51,1.79,1,2.79,1-.51-.6-1.46-1.54-2.17-1.59Z" style="fill:#407BFF"></path>
<path d="M319.42,408.36a3.05,3.05,0,0,1-2-.5,1.06,1.06,0,0,1-.35-.95.61.61,0,0,1,.32-.51c1-.55,4.27,1.11,4.64,1.31a.19.19,0,0,1,.1.2.19.19,0,0,1-.15.16A13.91,13.91,0,0,1,319.42,408.36ZM318,406.67a.74.74,0,0,0-.36.07.24.24,0,0,0-.13.21.72.72,0,0,0,.22.62c.5.45,1.85.52,3.66.22A10.43,10.43,0,0,0,318,406.67Z" style="fill:#407BFF"></path>
<path d="M322,408.07h-.08c-1-.45-2.91-2.21-2.75-3.14,0-.22.19-.49.72-.55a1.44,1.44,0,0,1,1.08.34c1,.86,1.22,3.06,1.22,3.15a.18.18,0,0,1-.08.18A.2.2,0,0,1,322,408.07ZM320,404.75h-.12c-.35,0-.37.18-.38.22-.09.56,1.22,1.95,2.21,2.55a4.47,4.47,0,0,0-1-2.52A1,1,0,0,0,320,404.75Z" style="fill:#407BFF"></path>
<path d="M332.9,145l-1.43-.82S332,145.6,332.9,145Z" style="fill:#263238"></path>
<path d="M350.37,221.62l.85,3c.11.24-.16.47-.54.47H316.45c-.3,0-.54-.15-.56-.33l-.3-3c0-.21.24-.38.56-.38h33.68A.61.61,0,0,1,350.37,221.62Z" style="fill:#407BFF"></path>
<path d="M345.85,225.38h.9c.18,0,.31-.09.3-.2l-.42-3.87c0-.11-.17-.21-.35-.21h-.9c-.18,0-.32.1-.31.21l.43,3.87C345.51,225.29,345.67,225.38,345.85,225.38Z" style="fill:#263238"></path>
<path d="M319,225.38h.9c.18,0,.32-.09.3-.2l-.42-3.87c0-.11-.17-.21-.35-.21h-.9c-.18,0-.32.1-.3.21l.42,3.87C318.65,225.29,318.81,225.38,319,225.38Z" style="fill:#263238"></path>
<path d="M332.42,225.38h.9c.18,0,.32-.09.3-.2l-.42-3.87c0-.11-.17-.21-.35-.21H332c-.18,0-.32.1-.3.21l.42,3.87C332.08,225.29,332.24,225.38,332.42,225.38Z" style="fill:#263238"></path>
<g class="man1">
<circle cx="300.86" cy="207.94" r="26.93" style="fill:#407BFF"></circle>
<circle cx="300.86" cy="207.94" r="26.93" style="opacity:0.4"></circle>
<path d="M278.84,205a21.94,21.94,0,0,0,1.24,10.85A22.22,22.22,0,1,0,278.84,205Z" style="fill:#407BFF"></path>
<path d="M280.08,215.8a22.22,22.22,0,0,0,38.72,5.26,35.18,35.18,0,0,0-38.72-5.26Z" style="fill:#fff"></path>
<circle cx="301.89" cy="200.4" r="9.9" transform="translate(12.55 418.54) rotate(-70.59)" style="fill:#fff"></circle>
</g>
<path d="M331.86,206.36l-6.19-6.31-.79,8.29s4.35,3,7.37,1.38Z" style="fill:#ffb573"></path>
<polygon points="318.84 199.15 318.56 206.13 324.88 208.34 325.67 200.05 318.84 199.15" style="fill:#ffb573"></polygon>
</g>
</svg>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
$(function(){
login_animation();
});
function login_animation(){
var tl = gsap.timeline({repeat:-1, repeatDelay:1, delay:1});
tl.fromTo(".man1", {autoAlpha:1,x:0,y:0}, {duration: 0.3, autoAlpha: 0,x:-20,y:-90, delay:0.5})
.fromTo(".man2", {autoAlpha:0,x:-40, y:-40}, {duration: 0.5, autoAlpha: 1,x:0,y:0, ease:"power3.out"})
.fromTo(".light", {autoAlpha:0,x:-40, y:-40}, {duration: 0.5, autoAlpha: 1,x:0,y:0, ease:"power3.out"},"-=0.3")
.fromTo(".man3", {autoAlpha:0,x:-20,y:-50}, {duration: 0.5, autoAlpha: 1,x:0,y:0, ease:"power3.out"},"-=0.3")
.fromTo(".setting", {autoAlpha:0,x:40,y:-40}, {duration: 0.5, autoAlpha: 1,x:0,y:0, ease:"power3.out"},"-=0.3")
.fromTo(".man4", {autoAlpha:0,x:40,y:-40}, {duration: 0.5, autoAlpha: 1,x:0,y:0, ease:"power3.out"},"-=0.3")
.to(".man2", {duration: 0.5, autoAlpha: 0,x:0,y:40, ease:"power3.out"})
.to(".light", {duration: 0.5, autoAlpha: 0,x:0,y:40, ease:"power3.out"},"-=0.3")
.to(".man3", {duration: 0.5, autoAlpha: 0,x:0,y:40, ease:"power3.out"},"-=0.3")
.to(".setting", {duration: 0.5, autoAlpha: 0,x:0,y:40, ease:"power3.out"},"-=0.3")
.to(".man4", {duration: 0.5, autoAlpha: 0,x:0,y:40, ease:"power3.out"},"-=0.3")
.fromTo(".money1", {autoAlpha:0,y:-40}, {duration: 0.5, autoAlpha: 1,y:0, ease:"power3.out"})
.to(".money1", {duration: 0.3, autoAlpha: 0,y:60, ease:"power3.out"})
.fromTo(".money2", {autoAlpha:0,y:-40}, {duration: 0.5, autoAlpha: 1,y:0, ease:"power3.out"},"-=0.2")
.fromTo(".money1", {autoAlpha:0,y:-40}, {duration: 0.5, autoAlpha: 1,y:0, ease:"power3.out"},"-=0.2")
.to(".money1", {duration: 0.3, autoAlpha: 0,y:50, ease:"power3.out"})
.fromTo(".money3", {autoAlpha:0,y:-40}, {duration: 0.5, autoAlpha: 1,y:0, ease:"power3.out"},"-=0.2")
.fromTo(".money1", {autoAlpha:0,y:-40}, {duration: 0.5, autoAlpha: 1,y:0, ease:"power3.out"},"-=0.2")
.to(".money1", {duration: 0.3, autoAlpha: 0,y:40, ease:"power3.out"})
.fromTo(".money4", {autoAlpha:0,y:-40}, {duration: 0.5, autoAlpha: 1,y:0, ease:"power3.out"},"-=0.2");
}
</script>
</body>
</html>728x90
'프론트엔드 > javascript' 카테고리의 다른 글
| 금액 입력 input 구현 (0) | 2023.12.29 |
|---|---|
| 엑셀 다운로드 (0) | 2023.10.27 |
| TOAST UI DateRangePicker 날짜 초기화 (0) | 2023.10.17 |
| SPA에서 History API 이해 (0) | 2023.10.16 |
| Web APIs - window size & browser coordinate & scroll (0) | 2022.04.06 |