-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (114 loc) · 27.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Stagger Scroll Reveal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1 class="title">
GSAP Stagger Scroll Reveal
</h1>
<p class="text">
Have boxes stagger reveal on load and then continue to reveal as user scrolls
</p>
<div class="boxes">
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M9.37 17.51c-3.09.86 1.87 2.64 5.8 1a7.18 7.18 0 0 1-1.1-.54 11.59 11.59 0 0 1-4.16.18c-1.31-.15-.54-.64-.54-.64zm5.33-1.68a16.27 16.27 0 0 1-5.36.26c-1.31-.14-.45-.77-.45-.77-3.4 1.12 1.89 2.4 6.64 1a2.25 2.25 0 0 1-.83-.49zm1.82-9.73s-6.87 1.71-3.59 5.49a1.47 1.47 0 0 1-.25 2.12s2.46-1.27 1.33-2.86-1.86-2.22 2.51-4.75z"></path><path d="M18.13 19.14s.56.46-.63.82c-2.27.69-9.43.9-11.42 0-.72-.31.62-.74 1-.83a2.54 2.54 0 0 1 .69-.08c-.8-.56-5.15 1.1-2.21 1.58 8.05 1.37 14.64-.56 12.57-1.49zm-2.76-4.88a7 7 0 0 1 .92-.49s-1.51.27-3 .4a28.11 28.11 0 0 1-4.82.05C6.09 13.91 9.74 13 9.74 13a6.81 6.81 0 0 0-3.16.75c-2.06 1.03 5.09 1.48 8.79.51zm.91 2.44a.39.39 0 0 1-.08.09c5-1.32 3.18-4.65.78-3.81a.71.71 0 0 0-.33.25s.14-.05.43-.12c1.22-.25 2.92 1.63-.8 3.59zM12 13c-.74-1.67-3.26-3.14 0-5.71C16.09 4.08 14 2 14 2c.84 3.31-3 4.31-4.34 6.37-.93 1.41.47 2.92 2.34 4.63z"></path><path d="M16.41 21.32a29.75 29.75 0 0 1-9.14.14s.46.38 2.84.53c3.61.23 9.15-.12 9.29-1.83 0 0-.26.64-2.99 1.16z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M18.75 11.35a4.32 4.32 0 0 1-.79-.08 3.9 3.9 0 0 1-.73-.23l-.17-.04h-.12q-.15 0-.15.21v.33a.43.43 0 0 0 0 .19.5.5 0 0 0 .21.19 3 3 0 0 0 .76.26 4.38 4.38 0 0 0 1 .12 3 3 0 0 0 1-.14 1.94 1.94 0 0 0 .73-.37 1.81 1.81 0 0 0 .49-.58 1.79 1.79 0 0 0 .17-.78 1.54 1.54 0 0 0-.3-.93 2.15 2.15 0 0 0-1-.64l-.95-.3a2 2 0 0 1-.73-.36.65.65 0 0 1-.2-.47.66.66 0 0 1 .31-.6 1.82 1.82 0 0 1 .89-.18 2.89 2.89 0 0 1 1.27.26.79.79 0 0 0 .26.08c.1 0 .15-.08.15-.22v-.36a.38.38 0 0 0-.06-.22.56.56 0 0 0-.2-.16 1.55 1.55 0 0 0-.28-.12 3.44 3.44 0 0 0-.38-.11l-.44-.1A3.4 3.4 0 0 0 19 6a2.82 2.82 0 0 0-.83.11 2.19 2.19 0 0 0-.7.35A1.61 1.61 0 0 0 17 7a1.5 1.5 0 0 0-.18.74 1.6 1.6 0 0 0 .33 1 2.08 2.08 0 0 0 1.06.68l1 .3a1.58 1.58 0 0 1 .67.34.66.66 0 0 1 .18.47.72.72 0 0 1-.35.63 1.83 1.83 0 0 1-.96.19zM12.94 6.5a.48.48 0 0 0-.13-.26.37.37 0 0 0-.26-.07H12a.43.43 0 0 0-.26.07.42.42 0 0 0-.13.26l-1 4.4-1.14-4.4a.48.48 0 0 0-.14-.26s-.13-.07-.26-.07h-.65c-.11 0-.16.06-.16.17a1.22 1.22 0 0 0 .06.27l1.56 5.14A.61.61 0 0 0 10 12a.45.45 0 0 0 .26.06h.57a.49.49 0 0 0 .27-.06.57.57 0 0 0 .12-.27l1-4.28 1 4.29a.42.42 0 0 0 .12.26.4.4 0 0 0 .27.07h.57a.41.41 0 0 0 .25-.07.44.44 0 0 0 .14-.26l1.61-5.14a.73.73 0 0 0 0-.16.52.52 0 0 0 0-.11.15.15 0 0 0-.17-.17h-.62a.45.45 0 0 0-.26.07.68.68 0 0 0-.13.26L14 11zM5.77 8.63a5.92 5.92 0 0 0-.71-.05 2.42 2.42 0 0 0-1.63.52 1.72 1.72 0 0 0-.6 1.37 1.7 1.7 0 0 0 .49 1.28 1.82 1.82 0 0 0 1.33.48 2.48 2.48 0 0 0 2-.92 3.5 3.5 0 0 0 .2.39 2.34 2.34 0 0 0 .24.31.26.26 0 0 0 .37 0l.42-.28a.28.28 0 0 0 .13-.2.27.27 0 0 0 0-.16 3.63 3.63 0 0 1-.21-.47 2 2 0 0 1-.07-.6V8.19a2.2 2.2 0 0 0-.55-1.64A2.42 2.42 0 0 0 5.33 6a3.9 3.9 0 0 0-1 .13 3.9 3.9 0 0 0-.84.3.47.47 0 0 0-.18.14.37.37 0 0 0 0 .23v.33c0 .14 0 .2.14.2a.26.26 0 0 0 .11 0l.23-.08A4.32 4.32 0 0 1 4.42 7a3 3 0 0 1 .72-.09 1.5 1.5 0 0 1 1.08.31 1.46 1.46 0 0 1 .31 1.06v.49zm.78.9v.27a2.36 2.36 0 0 1-.07.58 1.06 1.06 0 0 1-.23.43 1.38 1.38 0 0 1-.63.42 2.12 2.12 0 0 1-.68.12.94.94 0 0 1-.7-.24.92.92 0 0 1-.24-.71.92.92 0 0 1 .33-.76 1.52 1.52 0 0 1 1-.27h.62a5.67 5.67 0 0 1 .6.16zM19.76 15a19.68 19.68 0 0 1-7.55 1.54 20 20 0 0 1-9.9-2.62c-.24-.15-.43.1-.22.29A14.68 14.68 0 0 0 12 18a14.4 14.4 0 0 0 8.1-2.47c.34-.31.03-.72-.34-.53z"></path><path d="M18.38 14.06c-.19.14-.16.33.05.3.71-.09 2.28-.27 2.56.09s-.31 1.83-.58 2.49c-.08.2.1.28.28.13a3.9 3.9 0 0 0 1.23-3.34 3.94 3.94 0 0 0-3.54.33z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.403 5.633A8.919 8.919 0 0 0 12.053 3c-4.948 0-8.976 4.027-8.978 8.977 0 1.582.413 3.126 1.198 4.488L3 21.116l4.759-1.249a8.981 8.981 0 0 0 4.29 1.093h.004c4.947 0 8.975-4.027 8.977-8.977a8.926 8.926 0 0 0-2.627-6.35m-6.35 13.812h-.003a7.446 7.446 0 0 1-3.798-1.041l-.272-.162-2.824.741.753-2.753-.177-.282a7.448 7.448 0 0 1-1.141-3.971c.002-4.114 3.349-7.461 7.465-7.461a7.413 7.413 0 0 1 5.275 2.188 7.42 7.42 0 0 1 2.183 5.279c-.002 4.114-3.349 7.462-7.461 7.462m4.093-5.589c-.225-.113-1.327-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.248-1.554s-.014-.346.099-.458c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a9.65 9.65 0 0 0-.429-.008.826.826 0 0 0-.599.28c-.206.225-.785.767-.785 1.871s.804 2.171.916 2.321c.112.15 1.582 2.415 3.832 3.387.536.231.954.369 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.327-.542 1.514-1.066.187-.524.187-.973.131-1.067-.056-.094-.207-.151-.43-.263"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M14.078 20.953c-2.692 0-4.699-1.385-4.699-4.7v-5.308H6.931V8.07c2.694-.699 3.821-3.017 3.95-5.023h2.796v4.558h3.263v3.34h-3.263v4.622c0 1.386.699 1.864 1.813 1.864h1.58v3.522h-2.992z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M21.062 10.414c-2.036 4.349-6.949 10.267-10.054 10.267-3.06 0-3.501-6.527-5.173-10.869-.823-2.138-1.354-1.646-2.896-.567L2 8.031c2.248-1.976 4.499-4.272 5.88-4.399 1.559-.148 2.517.916 2.873 3.193.475 2.994 1.137 7.641 2.291 7.641.9 0 3.117-3.686 3.232-5.004.203-1.93-1.421-1.989-2.828-1.387 2.228-7.295 11.494-5.95 7.614 2.339z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m11.953 8.819-.547 2.19c.619.154 2.529.784 2.838-.456.322-1.291-1.673-1.579-2.291-1.734zm-.822 3.296-.603 2.415c.743.185 3.037.921 3.376-.441.355-1.422-2.029-1.789-2.773-1.974z"></path><path d="M14.421 2.299C9.064.964 3.641 4.224 2.306 9.581.97 14.936 4.23 20.361 9.583 21.697c5.357 1.335 10.783-1.924 12.117-7.281 1.336-5.356-1.924-10.781-7.279-12.117zm1.991 8.275c-.145.974-.686 1.445-1.402 1.611.985.512 1.485 1.298 1.009 2.661-.592 1.691-1.998 1.834-3.87 1.48l-.454 1.82-1.096-.273.447-1.794a44.624 44.624 0 0 1-.875-.228l-.449 1.804-1.095-.275.454-1.823c-.257-.066-.517-.136-.782-.202L6.87 15l.546-1.256s.808.215.797.199c.311.077.448-.125.502-.261l.719-2.875.115.029a.864.864 0 0 0-.114-.037l.512-2.053c.013-.234-.066-.528-.511-.639.018-.011-.797-.198-.797-.198l.291-1.172 1.514.378-.001.005c.227.057.461.111.7.165l.449-1.802 1.097.273-.44 1.766c.294.067.591.135.879.207l.438-1.755 1.097.273-.449 1.802c1.384.479 2.396 1.195 2.198 2.525z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m11.953 8.819-.547 2.19c.619.154 2.529.784 2.838-.456.322-1.291-1.673-1.579-2.291-1.734zm-.822 3.296-.603 2.415c.743.185 3.037.921 3.376-.441.355-1.422-2.029-1.789-2.773-1.974z"></path><path d="M14.421 2.299C9.064.964 3.641 4.224 2.306 9.581.97 14.936 4.23 20.361 9.583 21.697c5.357 1.335 10.783-1.924 12.117-7.281 1.336-5.356-1.924-10.781-7.279-12.117zm1.991 8.275c-.145.974-.686 1.445-1.402 1.611.985.512 1.485 1.298 1.009 2.661-.592 1.691-1.998 1.834-3.87 1.48l-.454 1.82-1.096-.273.447-1.794a44.624 44.624 0 0 1-.875-.228l-.449 1.804-1.095-.275.454-1.823c-.257-.066-.517-.136-.782-.202L6.87 15l.546-1.256s.808.215.797.199c.311.077.448-.125.502-.261l.719-2.875.115.029a.864.864 0 0 0-.114-.037l.512-2.053c.013-.234-.066-.528-.511-.639.018-.011-.797-.198-.797-.198l.291-1.172 1.514.378-.001.005c.227.057.461.111.7.165l.449-1.802 1.097.273-.44 1.766c.294.067.591.135.879.207l.438-1.755 1.097.273-.449 1.802c1.384.479 2.396 1.195 2.198 2.525z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M18.344 8.71c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53c0-.706-.572-1.278-1.279-1.278zm-12.688 0c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53A1.277 1.277 0 0 0 5.656 8.71zm8.889-3.809.768-1.388a.343.343 0 0 0-.133-.47.344.344 0 0 0-.471.135l-.789 1.42c-.588-.235-1.236-.368-1.92-.368s-1.332.132-1.92.367l-.789-1.418a.344.344 0 0 0-.471-.135.345.345 0 0 0-.133.47l.768 1.388C8.072 5.69 7.148 7.099 7.148 8.71c0 .011 0 .021.002.034-.002.006-.002.013-.002.019v.001h9.703V8.71c.001-1.611-.923-3.019-2.306-3.809zM9.76 6.869a.346.346 0 1 1 .005-.693.346.346 0 0 1-.005.693zm4.48 0a.347.347 0 0 1 0-.692.346.346 0 0 1 0 .692zM7.148 16.12c0 .646.525 1.171 1.174 1.171h.586v2.401a1.279 1.279 0 0 0 2.558 0v-2.401h1.066v2.401c0 .707.572 1.278 1.277 1.278.709 0 1.281-.571 1.281-1.278v-2.401h.586c.648 0 1.174-.524 1.174-1.171V9.028H7.148v7.092z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m3 5.557 7.357-1.002.004 7.097-7.354.042L3 5.557zm7.354 6.913.006 7.103-7.354-1.011v-6.14l7.348.048zm.892-8.046L21.001 3v8.562l-9.755.077V4.424zm9.758 8.113-.003 8.523-9.755-1.378-.014-7.161 9.772.016z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m3 5.557 7.357-1.002.004 7.097-7.354.042L3 5.557zm7.354 6.913.006 7.103-7.354-1.011v-6.14l7.348.048zm.892-8.046L21.001 3v8.562l-9.755.077V4.424zm9.758 8.113-.003 8.523-9.755-1.378-.014-7.161 9.772.016z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M10.483 12.482h3.034L12 8.831z"></path><path d="M12 3.074 3.689 6.038l1.268 10.987 7.043 3.9 7.043-3.9 1.268-10.987L12 3.074zm5.187 13.621H15.25l-1.045-2.606h-4.41L8.75 16.695H6.813L12 5.047l5.187 11.648z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M12 2c5.522 0 10 4.478 10 10s-4.478 10-10 10S2 17.522 2 12 6.478 2 12 2zm-1.987 13.332c.146.537.13 1.039-.021 1.493l-.054.15a2.803 2.803 0 0 1-.527.821c-.582.633-1.394.872-1.742.671-.375-.219-.188-1.112.487-1.825.726-.765 1.766-1.258 1.766-1.258v-.002l.091-.05zm8.258-9.051c-.452-1.777-3.397-2.362-6.185-1.371-1.656.589-3.453 1.515-4.743 2.723-1.536 1.434-1.78 2.684-1.68 3.206.355 1.843 2.881 3.048 3.92 3.942v.005c-.307.149-2.548 1.274-3.072 2.438-.563 1.225.088 2.101.513 2.212 1.313.363 2.662-.3 3.388-1.374.699-1.051.638-2.4.337-3.063.413-.112.899-.162 1.524-.086 1.751.199 2.101 1.3 2.024 1.75-.074.449-.436.711-.561.786-.126.076-.163.101-.151.151.013.074.076.074.175.063.138-.025.914-.375.951-1.227.037-1.074-.988-2.273-2.813-2.25-.75.014-1.226.076-1.563.214a.295.295 0 0 0-.088-.088c-1.125-1.213-3.213-2.063-3.125-3.675.025-.588.237-2.137 4-4.012 3.088-1.538 5.551-1.112 5.977-.175.61 1.336-1.314 3.825-4.526 4.187-1.225.138-1.862-.337-2.026-.513-.174-.188-.198-.2-.261-.161-.101.05-.038.212 0 .313.1.249.487.688 1.163.912.587.188 2.024.299 3.75-.375 1.937-.749 3.449-2.838 3.012-4.588l.06.056z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M19.361 3.008H4.638c-.901 0-1.63.729-1.63 1.63v14.724c0 .9.729 1.631 1.63 1.631h14.724c.9 0 1.631-.73 1.631-1.631V4.638a1.63 1.63 0 0 0-1.632-1.63zM9.018 6.505c.597 0 1.098.472 1.098 1.078 0 .616-.501 1.08-1.098 1.08v.022c-.604 0-1.09-.486-1.09-1.088 0-.605.486-1.092 1.09-1.092zm7.354 10.352c-1.112 0-1.651-.662-1.651-1.566 0-.26.033-.533.114-.812l.528-1.906c.068-.208.086-.405.086-.581 0-.615-.375-.984-.971-.984-.761 0-1.26.543-1.52 1.598l-1.033 4.146h-1.811l.327-1.303c-.534.873-1.271 1.412-2.183 1.412-1.102 0-1.617-.632-1.617-1.584a4.02 4.02 0 0 1 .096-.811l.826-3.366H6.285l.388-1.43h3.075l-1.216 4.804c-.08.309-.11.559-.11.738 0 .307.148.396.385.452.146.03 1.295.011 1.918-1.376l.798-3.188h-1.294l.391-1.404h2.787l-.359 1.617c.484-.899 1.452-1.762 2.406-1.762 1.012 0 1.855.728 1.855 2.111 0 .4-.063.796-.18 1.18l-.52 1.858a2.286 2.286 0 0 0-.075.492c0 .326.136.484.368.484.238 0 .553-.181.899-1.172l.708.272c-.414 1.473-1.182 2.081-2.137 2.081z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M8.71 6.366C7.604 7.67 6.888 9.602 6.838 11.765v.471c.05 2.165.766 4.094 1.872 5.397 1.434 1.865 3.564 3.046 5.948 3.046a7.218 7.218 0 0 0 4.006-1.225 9.943 9.943 0 0 1-7.139 2.533A9.995 9.995 0 0 1 2 12C2 6.477 6.478 2 12 2h.038a9.971 9.971 0 0 1 6.627 2.545c-1.173-.773-2.543-1.225-4.009-1.225-2.382 0-4.514 1.184-5.95 3.046h.004zM22 12a9.971 9.971 0 0 1-3.335 7.455c-2.564 1.25-4.954.375-5.747-.172 2.52-.553 4.422-3.6 4.422-7.283 0-3.686-1.901-6.73-4.422-7.283.792-.545 3.183-1.42 5.747-.172A9.971 9.971 0 0 1 22 12z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m14.49 20.937 5.381-1.166S17.93 6.633 17.914 6.546c-.016-.086-.086-.144-.158-.144s-1.439-.101-1.439-.101-.949-.949-1.064-1.05c-.027-.029-.057-.043-.086-.058l-.677 15.744zm.446-15.772c-.016 0-.043.014-.057.014-.016 0-.217.059-.533.158-.318-.919-.879-1.768-1.871-1.768h-.086c-.289-.361-.633-.519-.936-.519-2.316 0-3.426 2.892-3.77 4.359-.892.275-1.538.476-1.613.505-.504.158-.517.172-.574.648-.057.344-1.367 10.489-1.367 10.489l10.117 1.899.69-15.785zm-2.635.704v.102c-.559.173-1.178.36-1.783.547.346-1.323.992-1.972 1.553-2.217.146.375.23.878.23 1.568zm-.92-2.2c.1 0 .201.028.303.102-.732.344-1.539 1.222-1.871 2.978a59.11 59.11 0 0 1-1.411.432c.389-1.339 1.325-3.512 2.979-3.512zm.402 7.812s-.604-.315-1.322-.315c-1.08 0-1.123.676-1.123.849 0 .921 2.418 1.28 2.418 3.453 0 1.712-1.08 2.806-2.547 2.806-1.756 0-2.648-1.094-2.648-1.094l.475-1.554s.922.792 1.697.792a.693.693 0 0 0 .721-.69c0-1.209-1.986-1.268-1.986-3.252 0-1.669 1.195-3.295 3.627-3.295.936 0 1.395.272 1.395.272l-.707 2.028zm.922-7.281c.518.06.85.648 1.064 1.311-.258.087-.547.173-.863.273v-.187c0-.561-.072-1.022-.201-1.397z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M16.279 11.506c.132-.016.257-.018.373 0 .066-.154.078-.419.019-.708-.09-.429-.211-.688-.461-.646-.251.04-.261.35-.17.779.05.24.14.446.239.575zm-2.149.339c.18.078.29.129.331.086.029-.028.021-.084-.022-.154a1.05 1.05 0 0 0-.464-.371 1.26 1.26 0 0 0-1.228.146c-.119.088-.232.209-.218.283.007.023.023.042.065.05.099.011.444-.164.843-.188.282-.02.513.068.693.148zm-.361.205c-.232.037-.361.113-.443.187-.071.062-.113.128-.113.177l.018.042.037.014c.053 0 .171-.046.171-.046.324-.115.539-.102.752-.078.117.014.172.02.198-.02.007-.012.018-.035-.007-.074-.056-.091-.291-.24-.613-.202zm1.784.756c.159.078.333.046.39-.069.059-.115-.024-.272-.183-.349-.158-.079-.333-.049-.39.066-.057.115.026.274.183.352zm1.018-.891c-.128-.002-.234.138-.238.316-.003.177.1.321.229.322.129.002.235-.139.238-.315s-.099-.32-.229-.323zm-8.644 3.183c-.032-.04-.085-.029-.136-.015-.036.007-.076.017-.119.016a.265.265 0 0 1-.221-.111c-.059-.09-.056-.225.01-.378l.03-.069c.104-.231.275-.619.082-.988a.88.88 0 0 0-.671-.488.861.861 0 0 0-.739.267c-.284.313-.327.741-.273.893.021.056.053.071.075.074.048.007.119-.029.164-.15l.014-.038c.02-.064.057-.184.118-.278a.518.518 0 0 1 .717-.15c.2.131.275.375.19.608-.044.121-.115.351-.1.54.032.383.27.537.48.556.206.007.35-.108.387-.193.021-.053.003-.084-.008-.096z"></path><path d="M19.821 14.397c-.009-.029-.061-.216-.13-.44l-.144-.384c.281-.423.286-.799.249-1.013a1.284 1.284 0 0 0-.372-.724c-.222-.232-.677-.472-1.315-.651l-.335-.093c-.002-.015-.018-.79-.031-1.123-.011-.24-.031-.616-.148-.986-.14-.502-.381-.938-.684-1.221.835-.864 1.355-1.817 1.354-2.634-.003-1.571-1.933-2.049-4.312-1.063l-.503.214c-.002-.002-.911-.894-.924-.905-2.714-2.366-11.192 7.06-8.48 9.349l.593.501a2.916 2.916 0 0 0-.166 1.345c.065.631.389 1.234.915 1.701.5.442 1.159.724 1.796.723 1.055 2.432 3.465 3.922 6.291 4.007 3.032.09 5.576-1.333 6.644-3.889.069-.179.365-.987.365-1.7-.001-.718-.406-1.015-.663-1.014zM7.416 16.309a1.38 1.38 0 0 1-.28.021c-.916-.026-1.905-.85-2.003-1.827-.109-1.08.443-1.912 1.421-2.108.116-.025.258-.038.41-.031.548.032 1.354.452 1.539 1.645.164 1.055-.096 2.132-1.087 2.3zm-1.021-4.562a2.325 2.325 0 0 0-1.473.94c-.197-.164-.562-.48-.626-.604-.524-.994.571-2.928 1.337-4.02 1.889-2.698 4.851-4.739 6.223-4.371.222.064.96.921.96.921s-1.37.759-2.642 1.819c-1.711 1.32-3.006 3.236-3.779 5.315zm9.611 4.158a.05.05 0 0 0 .03-.054.05.05 0 0 0-.056-.045s-1.434.212-2.789-.283c.147-.479.541-.308 1.134-.259a8.287 8.287 0 0 0 2.735-.296c.613-.177 1.419-.524 2.045-1.018.212.465.286.975.286.975s.163-.029.3.055c.13.08.224.245.16.671-.133.798-.471 1.445-1.042 2.041a4.259 4.259 0 0 1-1.249.934 5.337 5.337 0 0 1-.814.346c-2.149.701-4.349-.07-5.058-1.727a2.761 2.761 0 0 1-.142-.392c-.302-1.092-.046-2.4.755-3.226v-.001c.051-.052.102-.113.102-.191 0-.064-.042-.133-.077-.183-.28-.406-1.253-1.099-1.057-2.44.139-.964.982-1.642 1.768-1.602l.2.012c.34.02.637.063.917.076.47.019.891-.049 1.391-.465.169-.142.304-.263.532-.301.024-.006.084-.025.203-.021a.681.681 0 0 1 .343.109c.4.266.457.912.479 1.385.012.269.045.922.055 1.108.026.428.139.489.365.563.129.044.248.074.423.125.529.147.845.3 1.043.493a.637.637 0 0 1 .188.372c.065.457-.353 1.021-1.455 1.533-1.206.559-2.669.701-3.679.588l-.354-.04c-.81-.108-1.269.936-.784 1.651.313.461 1.164.761 2.017.761 1.953.002 3.455-.832 4.015-1.554l.044-.063c.026-.042.005-.063-.03-.041-.455.312-2.483 1.552-4.651 1.18 0 0-.264-.044-.504-.138-.19-.072-.591-.258-.639-.668 1.747.543 2.85.031 2.85.03zm-2.773-.327zM9.886 8.053c.672-.776 1.499-1.452 2.241-1.83.025-.014.052.015.038.038a2.125 2.125 0 0 0-.208.508c-.006.027.023.049.046.032.462-.314 1.264-.651 1.968-.693a.03.03 0 0 1 .021.055 1.66 1.66 0 0 0-.31.311c-.014.02-.001.049.024.049.494.003 1.191.175 1.644.43.03.018.008.077-.025.069-.688-.157-1.811-.277-2.979.008-1.044.254-1.84.646-2.419 1.069-.03.02-.065-.019-.041-.046z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M12 2C7.589 2 4 5.589 4 9.995 3.971 16.44 11.696 21.784 12 22c0 0 8.029-5.56 8-12 0-4.411-3.589-8-8-8zM9.799 14.987H8v-1.799l4.977-4.97 1.799 1.799-4.977 4.97zm5.824-5.817-1.799-1.799L15.196 6l1.799 1.799-1.372 1.371z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="m17.284 3.707 1.412-1.416 3.01 3-1.413 1.417zm-10.586 0-2.99 2.999L2.29 5.294l2.99-3zM12 4c-4.878 0-9 4.121-9 9s4.122 9 9 9c4.879 0 9-4.121 9-9s-4.121-9-9-9zm4 13H8.131l4-6H8V9h7.868l-1.035 1.554-.001.001L11.869 15H16v2z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M17 2h-4v4.059a8.946 8.946 0 0 1 4 1.459V2zm-6 0H7v5.518a8.946 8.946 0 0 1 4-1.459V2zm1 20a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm-1.225-8.519L12 11l1.225 2.481 2.738.397-1.981 1.932.468 2.727L12 17.25l-2.449 1.287.468-2.727-1.981-1.932 2.737-.397z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><circle cx="12" cy="10" r="3"></circle><path d="M18.125 2H5.875A1.877 1.877 0 0 0 4 3.875v12.25C4 17.159 4.841 18 5.875 18H11v2H7v2h10v-2h-4v-2h5.125A1.877 1.877 0 0 0 20 16.125V3.875A1.877 1.877 0 0 0 18.125 2zM12 15c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><circle cx="20.288" cy="8.344" r="1.707"></circle><path d="M18.581 11.513h3.413v3.656c0 .942-.765 1.706-1.707 1.706h-1.706v-5.362zM2.006 4.2v15.6l11.213 1.979V2.221L2.006 4.2zm8.288 5.411-1.95.049v5.752H6.881V9.757l-1.949.098V8.539l5.362-.292v1.364zm3.899.439v8.288h1.95c.808 0 1.463-.655 1.463-1.462V10.05h-3.413zm1.463-4.875c-.586 0-1.105.264-1.463.673v2.555c.357.409.877.673 1.463.673a1.95 1.95 0 0 0 0-3.901z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M7.533 12.249c-.011 1.985 1.445 3.168 3.768 2.63V9.618c-2.352-.716-3.758.733-3.768 2.631m3.839-10.238h3.199v15.143c-3.066.501-6.004.819-8.104-.355-2.705-1.513-2.923-6.319-.782-8.46 1.085-1.085 3.271-1.85 5.616-1.351V2.225c-.006-.101-.012-.202.071-.214m8.389 3.342h-3.199V2.011h3.199v3.342z"></path><path d="M19.761 7.044c-.003 2.356-.003 4.048-.003 6.911-.136 2.813-.104 5.052-1.135 6.398-.203.266-.634.652-.995.924-.303.228-.881.691-1.208.711-.331.021-1.18-.459-1.564-.64-.505-.237-.971-.553-1.493-.71 1.218-.754 2.372-1.32 2.844-2.844.41-1.326.355-3.247.355-5.119 0-1.849.009-3.998.009-5.63l3.19-.001z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M21.598 11.064a1.006 1.006 0 0 0-.854-.172A2.938 2.938 0 0 1 20 11c-1.654 0-3-1.346-3.003-2.938.005-.034.016-.134.017-.168a.998.998 0 0 0-1.254-1.006A3.002 3.002 0 0 1 15 7c-1.654 0-3-1.346-3-3 0-.217.031-.444.099-.716a1 1 0 0 0-1.067-1.236A9.956 9.956 0 0 0 2 12c0 5.514 4.486 10 10 10s10-4.486 10-10c0-.049-.003-.097-.007-.16a1.004 1.004 0 0 0-.395-.776zM8.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-2 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm2.5-6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zm3.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M5.239 15.063 7.21 2.381a.453.453 0 0 1 .847-.145l2.12 3.979-4.938 8.848zM19.24 18.14 17.363 6.469a.454.454 0 0 0-.766-.246L4.76 18.14l6.55 3.691c.411.23.912.23 1.323 0l6.607-3.691zM13.917 7.955 12.4 5.052a.452.452 0 0 0-.8 0L4.939 16.989l8.978-9.034z"></path></svg>
</div>
<div class="box">
<svg class="ico-color" xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 24 24"><path d="M20.205 16.392c-2.469 3.289-7.741 2.179-11.122 2.338 0 0-.599.034-1.201.133 0 0 .228-.097.519-.198 2.374-.821 3.496-.986 4.939-1.727 2.71-1.388 5.408-4.413 5.957-7.555-1.032 3.022-4.17 5.623-7.027 6.679-1.955.722-5.492 1.424-5.493 1.424a5.28 5.28 0 0 1-.143-.076c-2.405-1.17-2.475-6.38 1.894-8.059 1.916-.736 3.747-.332 5.818-.825 2.208-.525 4.766-2.18 5.805-4.344 1.165 3.458 2.565 8.866.054 12.21zm.042-13.28a9.212 9.212 0 0 1-1.065 1.89 9.982 9.982 0 0 0-7.167-3.031C6.492 1.971 2 6.463 2 11.985a9.983 9.983 0 0 0 3.205 7.334l.22.194a.856.856 0 1 1 .001.001l.149.132A9.96 9.96 0 0 0 12.015 22c5.278 0 9.613-4.108 9.984-9.292.274-2.539-.476-5.763-1.752-9.596"></path></svg>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="main.js"></script>
</body>
</html>