├── .gitignore
├── README.md
├── css
└── base.css
├── favicon.ico
├── img
├── 1.jpg
├── 10.jpg
├── 11.jpg
├── 12.jpg
├── 13.jpg
├── 14.jpg
├── 15.jpg
├── 16.jpg
├── 17.jpg
├── 18.jpg
├── 19.jpg
├── 2.jpg
├── 20.jpg
├── 21.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
├── 7.jpg
├── 8.jpg
├── 9.jpg
└── large
│ ├── 1.jpg
│ ├── 10.jpg
│ ├── 11.jpg
│ ├── 12.jpg
│ ├── 13.jpg
│ ├── 14.jpg
│ ├── 15.jpg
│ ├── 16.jpg
│ ├── 17.jpg
│ ├── 18.jpg
│ ├── 19.jpg
│ ├── 2.jpg
│ ├── 20.jpg
│ ├── 21.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── 6.jpg
│ ├── 7.jpg
│ ├── 8.jpg
│ └── 9.jpg
├── index.html
├── index2.html
├── index3.html
├── index4.html
└── js
├── anime.min.js
├── demo1.js
├── demo2.js
├── demo3.js
├── demo4.js
└── imagesloaded.pkgd.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Grid Reveal Effects with Anime.js
2 |
3 | Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
4 |
5 | 
6 |
7 | [Article on Codrops](https://tympanus.net/codrops/?p=38214)
8 |
9 | [Demo](http://tympanus.net/Development/GridRevealEffects/)
10 |
11 | ## Credits
12 |
13 | - [anime.js](http://animejs.com/) by Julian Garnier
14 | - [imagesLoaded](https://imagesloaded.desandro.com/) by Dave DeSandro
15 | - Images from [Unsplash.com](https://unsplash.com/)
16 |
17 |
18 | ## License
19 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
20 |
21 | ## Misc
22 |
23 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
24 |
25 |
26 | [© Codrops 2019](http://www.codrops.com)
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/css/base.css:
--------------------------------------------------------------------------------
1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
2 | *,
3 | *::after,
4 | *::before {
5 | box-sizing: border-box;
6 | }
7 |
8 | :root {
9 | font-size: 16px;
10 | }
11 |
12 | body {
13 | --color-text: #fff;
14 | --color-bg: #000;
15 | --color-link: #5a45a0;
16 | --color-link-hover: #fff;
17 | --color-bg-content: #5b6598;
18 | --color-title: #fff;
19 | color: var(--color-text);
20 | background-color: var(--color-bg);
21 | font-family: linotype-didot, Didot, "Didot LT STD", "Bodoni MT", "ltc-bodoni-175", "Hoefler Text", Garamond, "Times New Roman", serif;
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | .hidden {
27 | pointer-events: none;
28 | visibility: hidden;
29 | position: fixed;
30 | z-index: -1;
31 | }
32 |
33 | .cursor, .cursor__inner {
34 | z-index: 9999;
35 | pointer-events: none;
36 | position: absolute;
37 | top: 0;
38 | left: 0;
39 | mix-blend-mode: difference;
40 | }
41 |
42 | .cursor__inner--circle {
43 | width: 30px;
44 | height: 30px;
45 | border-radius: 50%;
46 | border: 3px solid #de448d;
47 | }
48 |
49 | .cursor__inner--cross {
50 | width: 30px;
51 | height: 30px;
52 | }
53 |
54 | .cursor__inner--cross::before,
55 | .cursor__inner--cross::after {
56 | position: absolute;
57 | top: 0;
58 | content: '';
59 | width: 2px;
60 | height: 100%;
61 | background: #A21020;
62 | left: calc(50% - 1px);
63 | transform: rotate(45deg);
64 | }
65 |
66 | .cursor__inner--cross::after {
67 | transform: rotate(-45deg);
68 | }
69 |
70 | .cursor__inner--text {
71 | white-space: nowrap;
72 | left: 30px;
73 | margin-top: 1px;
74 | color: #9A9A9A;
75 | }
76 |
77 | /* Page Loader */
78 | .js .loading::before {
79 | content: '';
80 | position: fixed;
81 | z-index: 100000;
82 | top: 0;
83 | left: 0;
84 | width: 100%;
85 | height: 100%;
86 | background: var(--color-bg);
87 | }
88 |
89 | .js .loading::after {
90 | content: '';
91 | position: fixed;
92 | z-index: 100000;
93 | top: 50%;
94 | left: 50%;
95 | width: 60px;
96 | height: 60px;
97 | margin: -30px 0 0 -30px;
98 | pointer-events: none;
99 | border-radius: 50%;
100 | opacity: 0.4;
101 | background: var(--color-link);
102 | animation: loaderAnim 0.7s linear infinite alternate forwards;
103 | }
104 |
105 | @keyframes loaderAnim {
106 | to {
107 | opacity: 1;
108 | transform: scale3d(0.5,0.5,1);
109 | }
110 | }
111 |
112 | a {
113 | text-decoration: none;
114 | color: var(--color-link);
115 | outline: none;
116 | }
117 |
118 | a:hover,
119 | a:focus {
120 | color: var(--color-link-hover);
121 | outline: none;
122 | }
123 |
124 | .frame {
125 | padding: 3rem 5vw;
126 | text-align: center;
127 | position: fixed;
128 | z-index: 1000;
129 | width: 100%;
130 | text-transform: lowercase;
131 | }
132 |
133 | .demo-4 .frame {
134 | mix-blend-mode: color-dodge;
135 | }
136 |
137 | .frame__title-wrap {
138 | text-transform: capitalize;
139 | }
140 |
141 | .frame__title {
142 | font-size: 1rem;
143 | margin: 0 0 1rem;
144 | }
145 |
146 | .frame__links {
147 | display: inline;
148 | }
149 |
150 | .frame__links a:not(:first-child)::before {
151 | content: '|';
152 | margin: 0 1rem 0 0;
153 | }
154 |
155 | .frame__nav a,
156 | .frame__links a:not(:last-child),
157 | .frame__demos span, .frame__demos a:not(:last-child) {
158 | margin-right: 1rem;
159 | }
160 |
161 | .frame__main {
162 | font-size: 1.5rem;
163 | margin: 0;
164 | }
165 |
166 | .frame__nav,
167 | .frame__main,
168 | .frame__version {
169 | display: none;
170 | }
171 |
172 | .frame__demos {
173 | margin: 1rem 0;
174 | }
175 |
176 | .frame__demo--current,
177 | .frame__demo--current:hover {
178 | color: var(--color-text);
179 | }
180 |
181 | .content {
182 | background-color: var(--color-bg-content);
183 | position: fixed;
184 | height: 100vh;
185 | width: 100%;
186 | display: flex;
187 | align-items: center;
188 | justify-content: center;
189 | background-position: 50% 30%;
190 | background-size: cover;
191 | background-blend-mode: soft-light;
192 | cursor: pointer;
193 | }
194 |
195 | .content__title {
196 | font-size: 10vw;
197 | will-change: transform;
198 | mix-blend-mode: overlay;
199 | text-align: center;
200 | color: var(--color-title);
201 | pointer-events: none;
202 | -webkit-touch-callout: none;
203 | -webkit-user-select: none;
204 | -moz-user-select: none;
205 | -ms-user-select: none;
206 | user-select: none;
207 | }
208 |
209 | .grid-wrap--hidden {
210 | pointer-events: none;
211 | }
212 |
213 | .grid {
214 | display: grid;
215 | width: 100%;
216 | height: 100vw;
217 | --cell-number: 12;
218 | --cell-size: 8.3333vw;
219 | grid-template-columns: repeat(auto-fill, var(--cell-size));
220 | will-change: transform;
221 | }
222 |
223 | @media screen and (orientation: portrait) {
224 | .grid {
225 | height: auto;
226 | --cell-number: 6;
227 | --cell-size: 16.6666vw;
228 | }
229 | }
230 |
231 | .grid__item {
232 | width: 100%;
233 | height: 100%;
234 | position: relative;
235 | cursor: pointer;
236 | overflow: hidden;
237 | height: var(--cell-size);
238 | outline: 1px solid rgba(0,0,0,0.87);
239 | }
240 |
241 | .grid__item-inner {
242 | width: 100%;
243 | height: 100%;
244 | position: relative;
245 | background-position: 50% 50%;
246 | background-size: cover;
247 | }
248 |
249 | .demo-3 .grid__item-inner {
250 | background-blend-mode: color-dodge;
251 | background-color: #332d4a;
252 | }
253 |
254 | .demo-1 .grid__item-inner {
255 | filter: grayscale(1);
256 | }
257 |
258 | .grid__item-inner::after {
259 | content: '';
260 | position: absolute;
261 | top: 0;
262 | left: 0;
263 | width: 100%;
264 | height: 100%;
265 | background: rgba(0,0,0,0.87);
266 | transition: background 0.1s ease;
267 | }
268 |
269 | .demo-4 .grid__item-inner::after {
270 | background: rgba(255,255,255,0);
271 | }
272 |
273 | .grid__item-inner:hover::after {
274 | background: rgba(0,0,0,0.77);
275 | }
276 |
277 | .demo-4 .grid__item-inner:hover::after {
278 | background: rgba(255,255,255,0.5);
279 | }
280 |
281 | @media screen and (min-width: 53em) {
282 | body {
283 | overflow: hidden;
284 | }
285 | .frame {
286 | position: fixed;
287 | text-align: left;
288 | z-index: 10000;
289 | top: 0;
290 | left: 0;
291 | display: grid;
292 | align-content: space-between;
293 | width: 100%;
294 | max-width: none;
295 | height: 100vh;
296 | padding: 2rem 2rem 2.5rem;
297 | pointer-events: none;
298 | grid-template-columns: 40% 30% 30%;
299 | grid-template-rows: auto auto auto;
300 | grid-template-areas: 'nav demos main'
301 | '... ... ...'
302 | 'title ... version';
303 | }
304 | .frame__title-wrap {
305 | grid-area: title;
306 | display: flex;
307 | grid-column: span 2;
308 | pointer-events: auto;
309 | }
310 | .frame__title {
311 | margin: 0 2rem 0 0;
312 | }
313 | .frame__main {
314 | display: block;
315 | justify-self: end;
316 | }
317 | .frame__main::before {
318 | content: '\2015';
319 | }
320 | .frame__nav {
321 | display: block;
322 | grid-area: nav;
323 | align-self: center;
324 | pointer-events: auto;
325 | }
326 | .frame__version {
327 | display: block;
328 | grid-area: version;
329 | justify-self: end;
330 | }
331 | .frame__demos {
332 | margin: 0;
333 | grid-area: demos;
334 | justify-self: start;
335 | align-self: center;
336 | pointer-events: auto;
337 | }
338 | .frame a {
339 | pointer-events: auto;
340 | }
341 | .grid-wrap {
342 | height: 100vh;
343 | overflow: hidden;
344 | }
345 | }
346 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/favicon.ico
--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/1.jpg
--------------------------------------------------------------------------------
/img/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/10.jpg
--------------------------------------------------------------------------------
/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/11.jpg
--------------------------------------------------------------------------------
/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/12.jpg
--------------------------------------------------------------------------------
/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/13.jpg
--------------------------------------------------------------------------------
/img/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/14.jpg
--------------------------------------------------------------------------------
/img/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/15.jpg
--------------------------------------------------------------------------------
/img/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/16.jpg
--------------------------------------------------------------------------------
/img/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/17.jpg
--------------------------------------------------------------------------------
/img/18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/18.jpg
--------------------------------------------------------------------------------
/img/19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/19.jpg
--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/2.jpg
--------------------------------------------------------------------------------
/img/20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/20.jpg
--------------------------------------------------------------------------------
/img/21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/21.jpg
--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/3.jpg
--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/4.jpg
--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/5.jpg
--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/6.jpg
--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/7.jpg
--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/8.jpg
--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/9.jpg
--------------------------------------------------------------------------------
/img/large/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/1.jpg
--------------------------------------------------------------------------------
/img/large/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/10.jpg
--------------------------------------------------------------------------------
/img/large/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/11.jpg
--------------------------------------------------------------------------------
/img/large/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/12.jpg
--------------------------------------------------------------------------------
/img/large/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/13.jpg
--------------------------------------------------------------------------------
/img/large/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/14.jpg
--------------------------------------------------------------------------------
/img/large/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/15.jpg
--------------------------------------------------------------------------------
/img/large/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/16.jpg
--------------------------------------------------------------------------------
/img/large/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/17.jpg
--------------------------------------------------------------------------------
/img/large/18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/18.jpg
--------------------------------------------------------------------------------
/img/large/19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/19.jpg
--------------------------------------------------------------------------------
/img/large/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/2.jpg
--------------------------------------------------------------------------------
/img/large/20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/20.jpg
--------------------------------------------------------------------------------
/img/large/21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/21.jpg
--------------------------------------------------------------------------------
/img/large/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/3.jpg
--------------------------------------------------------------------------------
/img/large/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/4.jpg
--------------------------------------------------------------------------------
/img/large/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/5.jpg
--------------------------------------------------------------------------------
/img/large/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/6.jpg
--------------------------------------------------------------------------------
/img/large/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/7.jpg
--------------------------------------------------------------------------------
/img/large/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/8.jpg
--------------------------------------------------------------------------------
/img/large/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridRevealEffects/b8a05526995dd7e4ab92edbb08c1244d7cc90057/img/large/9.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Grid Reveal Effects using anime.js | Demo 1 | Codrops
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 |
42 |
43 |
Grid Reveal Effects
44 |
49 |
50 |
55 |
Photostream
56 |
v2.0.1
57 |
58 |
Effects:
59 |
1
60 |
2
61 |
3
62 |
4
63 |
64 |
66 |
Yerevan
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 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
Grid Reveal Effects
44 |
49 |
50 |
55 |
Photostream
56 |
v2.0.1
57 |
58 |
Effects:
59 |
1
60 |
2
61 |
3
62 |
4
63 |
64 |
66 |
Yerevan
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 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
Grid Reveal Effects
44 |
49 |
50 |
55 |
Photostream
56 |
v2.0.1
57 |
58 |
Effects:
59 |
1
60 |
2
61 |
3
62 |
4
63 |
64 |
66 |
Yerevan
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 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
Grid Reveal Effects
44 |
49 |
50 |
55 |
Photostream
56 |
v2.0.1
57 |
58 |
Effects:
59 |
1
60 |
2
61 |
3
62 |
4
63 |
64 |
66 |
Yerevan
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 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |