├── .gitignore
├── LICENSE
├── README.md
├── css
└── base.css
├── favicon.ico
├── img
├── 1.jpg
├── 10.jpg
├── 11.jpg
├── 12.jpg
├── 13.jpg
├── 14.jpg
├── 15.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
├── 7.jpg
├── 8.jpg
└── 9.jpg
├── index.html
├── index1.html
├── index2.html
├── index3.html
├── index4.html
├── js
├── app.js
├── demo0.js
├── demo0
│ ├── fragment.glsl
│ └── vertex.glsl
├── demo1.js
├── demo1
│ ├── fragment.glsl
│ └── vertex.glsl
├── demo2.js
├── demo2
│ ├── fragment.glsl
│ └── vertex.glsl
├── demo3.js
├── demo3
│ ├── fragment.glsl
│ └── vertex.glsl
├── demo4.js
├── demo4
│ ├── fragment.glsl
│ └── vertex.glsl
├── lib
│ └── getGeometry.js
└── shader
│ ├── fragment.glsl
│ ├── vertex.glsl
│ ├── vertex1.glsl
│ └── vertexParticles.glsl
├── package-lock.json
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | .cache/
3 | node_modules/
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Experimental Polygon Transitions with WebGL
2 |
3 | Some experimental animations using triangles for image transitions with WebGL.
4 |
5 | 
6 |
7 | [Article on Codrops](https://tympanus.net/codrops/?p=50876)
8 |
9 | [Demo](https://github.com/akella/PolygonTransitions/archive/master.zip)
10 |
11 |
12 | ## Installation
13 |
14 | To run demo you will need [Parcel](https://parceljs.org/), either install it
15 | ```
16 | npm install -g parcel-bundler
17 | parcel index.html
18 | ```
19 | Or run without installation:
20 | ```
21 | npx parcel index.html
22 | ```
23 | After that demo should be available on http://localhost:1234.
24 |
25 | ## Misc
26 |
27 | Follow Yuriy: [Twitter](http://twitter.com/akella), [GitHub](https://github.com/akella)
28 |
29 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
30 |
31 | ## License
32 | [MIT](LICENSE)
33 |
34 | Made with :blue_heart: by [Codrops](http://www.codrops.com)
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/css/base.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | :root {
8 | font-size: 15px;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | --color-text: #202127;
14 | --color-bg: #e6e6e6;
15 | --color-link: #a06d2d;
16 | --color-link-hover: #ba7e31;
17 | color: var(--color-text);
18 | background-color: var(--color-bg);
19 | font-family: tenon, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
20 | font-weight: 300;
21 | }
22 |
23 | body #cdawrap {
24 | --cda-left: auto;
25 | --cda-right: 3rem;
26 | --cda-top: 6rem;
27 | --cda-bottom: auto;
28 | --cda-text-align: right;
29 | --footer-align: end;
30 | --cda-width: 255px;
31 | --cda-text-size: 12px;
32 | --cda-text-color: var(--color-text);
33 | --cda-footer-fontsize: 10px;
34 | --cda-footer-color: var(--color-text);
35 | }
36 |
37 | .demo-1 {
38 | --color-text: #fff;
39 | --color-bg: #000;
40 | --color-link: #edc4a4;
41 | --color-link-hover: #fff;
42 | }
43 |
44 | .demo-2 {
45 | --color-text: #fff;
46 | --color-bg: #000;
47 | --color-link: #b7491a;
48 | --color-link-hover: #fff;
49 | }
50 |
51 | .demo-3 {
52 | --color-text: #fff;
53 | --color-bg: #000;
54 | --color-link: #ebea9b;
55 | --color-link-hover: #fff;
56 | }
57 |
58 | .demo-4 {
59 | --color-text: #000;
60 | --color-bg: #fff;
61 | --color-link: #3f51b5;
62 | --color-link-hover: #000;
63 | }
64 |
65 | /* Page Loader */
66 | .js .loading::before,
67 | .js .loading::after {
68 | content: '';
69 | position: fixed;
70 | z-index: 1000;
71 | }
72 |
73 | .js .loading::before {
74 | top: 0;
75 | left: 0;
76 | width: 100%;
77 | height: 100%;
78 | background: var(--color-bg);
79 | }
80 |
81 | .js .loading::after {
82 | top: 50%;
83 | left: 50%;
84 | width: 60px;
85 | height: 60px;
86 | margin: -30px 0 0 -30px;
87 | border-radius: 50%;
88 | opacity: 0.4;
89 | background: var(--color-link);
90 | animation: loaderAnim 0.7s linear infinite alternate forwards;
91 | }
92 |
93 | @keyframes loaderAnim {
94 | to {
95 | opacity: 1;
96 | transform: scale3d(0.5,0.5,1);
97 | }
98 | }
99 |
100 | a {
101 | text-decoration: none;
102 | color: var(--color-link);
103 | outline: none;
104 | }
105 |
106 | a:hover,
107 | a:focus {
108 | color: var(--color-link-hover);
109 | outline: none;
110 | }
111 |
112 | main {
113 | height: 100vh;
114 | display: flex;
115 | flex-direction: column;
116 | justify-content: space-between;
117 | }
118 |
119 | .frame {
120 | padding: 3rem 5vw;
121 | text-align: center;
122 | position: relative;
123 | z-index: 1000;
124 | }
125 |
126 | .frame__title {
127 | font-size: 1rem;
128 | margin: 0 0 1rem;
129 | font-weight: 300;
130 | }
131 |
132 | .frame__links {
133 | display: inline;
134 | }
135 |
136 | .frame__links a {
137 | text-decoration: underline;
138 | }
139 |
140 | .frame__links a:hover,
141 | .frame__links a:focus {
142 | text-decoration: none;
143 | }
144 |
145 | .frame__demos {
146 | position: relative;
147 | margin: 1rem 0;
148 | }
149 |
150 | .frame__demos a,
151 | .frame__links a {
152 | margin: 0 1rem;
153 | }
154 |
155 | .frame__demos::before {
156 | content: 'More demos';
157 | text-align: center;
158 | margin: 0 0 1rem;
159 | display: block;
160 | }
161 |
162 | .frame__demos a {
163 | position: relative;
164 | }
165 |
166 | .frame__demo--current,
167 | .frame__demo--current:hover {
168 | color: var(--color-text);
169 | }
170 |
171 | .frame__demo--current::after {
172 | content: '';
173 | position: absolute;
174 | left: calc(50% - 1rem);
175 | width: 2rem;
176 | height: 1px;
177 | top: calc(0% + 0.5rem);
178 | background: currentColor;
179 | }
180 |
181 | #container{
182 | width: 100vw;
183 | height: 100vh;
184 | position: absolute;
185 | top: 0;
186 | left: 0;
187 | }
188 |
189 | .content {
190 | display: flex;
191 | flex-direction: column;
192 | width: 100vw;
193 | position: relative;
194 | align-items: flex-start;
195 | justify-content: flex-end;
196 | background-position: 50% 50%;
197 | background-size: cover;
198 | padding: 2rem 5vw;
199 | }
200 |
201 | .content__title {
202 | font-size: clamp(2rem,10vw,9rem);
203 | text-transform: uppercase;
204 | line-height: 0.7;
205 | font-family: degular, sans-serif;
206 | font-weight: 500;
207 | letter-spacing: clamp(-0.05rem,-0.12vw,-0.15rem);
208 | margin: 0 0 5rem 0;
209 | max-width: 60rem;
210 | }
211 |
212 | .content__title span {
213 | white-space: nowrap;
214 | }
215 |
216 | .content__title em {
217 | display: block;
218 | font-weight: 200;
219 | }
220 |
221 | .nav {
222 | position: relative;
223 | cursor: pointer;
224 | padding-left: 7rem;
225 | }
226 |
227 | .nav::before {
228 | content: '';
229 | height: 1px;
230 | width: 6rem;
231 | background: currentColor;
232 | position: absolute;
233 | left: 0;
234 | top: 50%;
235 | }
236 |
237 | @media screen and (min-width: 53em) {
238 | main {
239 | display: block;
240 | }
241 | .frame {
242 | position: fixed;
243 | text-align: left;
244 | z-index: 100;
245 | top: 0;
246 | left: 0;
247 | display: grid;
248 | align-content: space-between;
249 | width: 100%;
250 | max-width: none;
251 | height: 100vh;
252 | padding: 3rem;
253 | pointer-events: none;
254 | grid-template-columns: 50% 50%;
255 | grid-template-rows: auto auto auto;
256 | grid-template-areas: 'title links'
257 | '... ...'
258 | '... demos';
259 | }
260 | .frame__title-wrap {
261 | grid-area: title;
262 | display: flex;
263 | }
264 | .frame__title {
265 | margin: 0;
266 | }
267 | .frame__tagline {
268 | position: relative;
269 | margin: 0 0 0 1rem;
270 | padding: 0 0 0 1rem;
271 | opacity: 0.5;
272 | }
273 | .frame__demos {
274 | margin: 0;
275 | grid-area: demos;
276 | justify-self: end;
277 | }
278 | .frame__links a:last-child,
279 | .frame__demos a:last-child {
280 | margin-right: 0;
281 | }
282 | .frame__demos::before {
283 | text-align: right;
284 | }
285 | .frame__links {
286 | grid-area: links;
287 | padding: 0;
288 | justify-self: end;
289 | }
290 | .frame a {
291 | pointer-events: auto;
292 | }
293 | .content {
294 | padding: 3rem;
295 | height: 100vh;
296 | }
297 | }
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/favicon.ico
--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/1.jpg
--------------------------------------------------------------------------------
/img/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/10.jpg
--------------------------------------------------------------------------------
/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/11.jpg
--------------------------------------------------------------------------------
/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/12.jpg
--------------------------------------------------------------------------------
/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/13.jpg
--------------------------------------------------------------------------------
/img/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/14.jpg
--------------------------------------------------------------------------------
/img/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/15.jpg
--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/2.jpg
--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/3.jpg
--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/4.jpg
--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/5.jpg
--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/6.jpg
--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/7.jpg
--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/8.jpg
--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/e8ca20266d00be0eb085a98cd50bbe8e23220cd2/img/9.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Experimental Polygon Transitions with WebGL | Demo 1 | Codrops
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
Experimental Polygon Transitions with WebGL
19 |
24 |
25 |
1
26 |
2
27 |
3
28 |
4
29 |
5
30 |
31 |
34 |
South AlpineEngineeringSolutions
35 |
Next
36 |
18 |
Experimental Polygon Transitions with WebGL
19 |
24 |
25 |
1
26 |
2
27 |
3
28 |
4
29 |
5
30 |
31 |
34 |
Sati Zen 18 Mindfulness Sessions
35 |
Next
36 |
18 |
Experimental Polygon Transitions with WebGL
19 |
24 |
25 |
1
26 |
2
27 |
3
28 |
4
29 |
5
30 |
31 |
34 |
Desert Hill Experience Destinations
35 |
Next
36 |
18 |
Experimental Polygon Transitions with WebGL
19 |
24 |
25 |
1
26 |
2
27 |
3
28 |
4
29 |
5
30 |
31 |
34 |
Julian Brecht Fantomasia Installations
35 |
Next
36 |
18 |
Experimental Polygon Transitions with WebGL
19 |
24 |
25 |
1
26 |
2
27 |
3
28 |
4
29 |
5
30 |
31 |
34 |
Aurelie Libre Performance Academy
35 |
Next
36 |