├── .gitignore ├── README.md ├── css ├── demo.css └── normalize.css ├── favicon.ico ├── img ├── bg1.jpg ├── bg2.jpg ├── bg3.jpg ├── bg4.jpg ├── paint1.svg └── paint2.svg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── js ├── anime.min.js ├── charming.min.js ├── demo1.js ├── demo2.js ├── demo3.js ├── demo4.js └── imagesloaded.pkgd.min.js └── pater ├── PageCloud_logo.png ├── pater.css └── phone.png /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Morphing Page Transition 2 | 3 | A page transition where one SVG path is morphed into another. 4 | 5 | ![Morphing Page Transition](https://tympanus.net/codrops/wp-content/uploads/2017/08/MorphingPageTransition_Featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=31976) 8 | 9 | [Demo](https://tympanus.net/Development/MorphingPageTransition/) 10 | 11 | This demo is kindly sponsored by [PageCloud](https://goo.gl/rdSoMC), the website builder you'll love to use. 12 | 13 | ## Credits 14 | 15 | - [anime.js](http://anime-js.com/) by Julian Garnier 16 | - Images by [Unsplash.com](http://unsplash.com) 17 | - [Charming.js](https://github.com/yuanqing/charming) by Yuan Qing 18 | - [imagesLoaded](http://imagesloaded.desandro.com/) by Dave DeSandro 19 | - [Black Grunge set](http://www.freepik.com/free-vector/black-grunge-set_1165653.htm) by Freepik 20 | - [City Skylines](http://www.freepik.com/free-vector/city-skylines_787669.htm) by Freepik 21 | 22 | ## License 23 | 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. 24 | 25 | ## Misc 26 | 27 | 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/) 28 | 29 | [© Codrops 2017](http://www.codrops.com) 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Nunito', sans-serif; 9 | min-height: 100vh; 10 | color: #57585c; 11 | color: var(--color-text); 12 | background-color: #fff; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | /* Color schemes */ 18 | .demo-1 { 19 | --color-text: #fff; 20 | --color-link: #5f5f5f; 21 | --color-link-hover: #ff963b; 22 | --color-enter: #fff; 23 | --color-title: #fff; 24 | --color-subtitle: #5f5f5f; 25 | --color-menu-item: #000; 26 | --color-menu-item-hover: #ff963b; 27 | --color-menu-item-hover-alt: #8544da; 28 | --color-content: #222325; 29 | --color-content-fixed: #ddd; 30 | --font-alt: 200 6vw/1 'Spectral', serif; 31 | --color-next: #5f5f5f; 32 | --color-next-hover: #8544da; 33 | } 34 | 35 | .demo-2 { 36 | --color-text: #fff; 37 | --color-link: #002068; 38 | --color-link-hover: #d8d1d1; 39 | --color-enter: #ecec11; 40 | --color-title: #ffffff; 41 | --color-subtitle: #002068; 42 | --color-menu-item: #fff; 43 | --color-menu-item-hover: #000; 44 | --color-menu-item-hover-alt: #000; 45 | --color-content: #013bbb; 46 | --color-content-fixed: #ddd; 47 | --font-alt: 400 6vw/1 'Fugaz One', serif; 48 | --color-next: #fff; 49 | --color-next-hover: #000; 50 | } 51 | 52 | .demo-3 { 53 | --color-text: #fff; 54 | --color-link: #4c0a75; 55 | --color-link-hover: #f470d2; 56 | --color-enter: #f470d2; 57 | --color-title: #ffffff; 58 | --color-subtitle: #4c0a75; 59 | --color-menu-item: #000; 60 | --color-menu-item-hover: #4c0a75; 61 | --color-menu-item-hover-alt: #8544da; 62 | --color-content: #ffb4ec; 63 | --color-content-fixed: #ddd; 64 | --font-alt: 400 6vw/1 'Chewy', serif; 65 | --color-next: #fff; 66 | --color-next-hover: #000; 67 | } 68 | 69 | .demo-4 { 70 | --color-text: #4b2cf2; 71 | --color-link: #ec2525; 72 | --color-link-hover: #fff; 73 | --color-enter: #4b2cf2; 74 | --color-title: #ffffff; 75 | --color-subtitle: #ec2525; 76 | --color-content: #1c1b1b; 77 | --font-alt: 400 5vw/1 'Poppins', serif; 78 | } 79 | 80 | /* Page Loader */ 81 | .js .loading::before { 82 | content: ''; 83 | position: fixed; 84 | z-index: 10000; 85 | top: 0; 86 | left: 0; 87 | width: 100%; 88 | height: 100%; 89 | background: #ccd8e4; 90 | background: var(--color-content); 91 | } 92 | 93 | .js .loading::after { 94 | content: ''; 95 | position: fixed; 96 | z-index: 10000; 97 | top: 50%; 98 | left: 50%; 99 | width: 50px; 100 | height: 50px; 101 | margin: -25px 0 0 -25px; 102 | pointer-events: none; 103 | background: #333; 104 | background: var(--color-text); 105 | border-radius: 50%; 106 | animation: loaderAnim 0.5s ease infinite alternate forwards; 107 | } 108 | 109 | @keyframes loaderAnim { 110 | 0% { 111 | transform: scale3d(0.5,0.5,1); 112 | } 113 | 100% { 114 | transform: scale3d(1,1,1); 115 | } 116 | } 117 | 118 | a { 119 | text-decoration: none; 120 | color: #5d93d8; 121 | color: var(--color-link); 122 | outline: none; 123 | } 124 | 125 | a:hover, 126 | a:focus { 127 | color: #423c2b; 128 | color: var(--color-link-hover); 129 | outline: none; 130 | } 131 | 132 | .hidden { 133 | position: absolute; 134 | overflow: hidden; 135 | width: 0; 136 | height: 0; 137 | pointer-events: none; 138 | } 139 | 140 | /* Icons */ 141 | .icon { 142 | display: block; 143 | width: 1.5em; 144 | height: 1.5em; 145 | margin: 0 auto; 146 | fill: currentColor; 147 | } 148 | 149 | .icon--arrow-right { 150 | transform: scale3d(-1,-1, 1); 151 | display: inline-block; 152 | vertical-align: middle; 153 | margin-left: 0.5em; 154 | } 155 | 156 | .frame { 157 | position: absolute; 158 | z-index: 10000; 159 | top: 0; 160 | left: 0; 161 | display: grid; 162 | align-content: space-between; 163 | width: 100%; 164 | max-width: none; 165 | height: 100vh; 166 | padding: 1.5em; 167 | pointer-events: none; 168 | grid-template-columns: 50% 50%; 169 | grid-template-rows: auto auto 4em; 170 | grid-template-areas: 'header ...' 171 | '... ...' 172 | 'github demos'; 173 | } 174 | 175 | .frame a { 176 | pointer-events: auto; 177 | } 178 | 179 | /* Header */ 180 | .codrops-header { 181 | position: relative; 182 | z-index: 100; 183 | display: flex; 184 | flex-direction: row; 185 | align-items: flex-start; 186 | align-items: center; 187 | align-self: start; 188 | grid-area: header; 189 | justify-self: start; 190 | } 191 | 192 | .codrops-header__title { 193 | font-size: 1em; 194 | font-weight: normal; 195 | margin: 0; 196 | padding: 0.75em 0; 197 | } 198 | 199 | .info { 200 | margin: 0 0 0 1.25em; 201 | font-style: italic; 202 | color: var(--color-link); 203 | } 204 | 205 | .github { 206 | display: block; 207 | align-self: end; 208 | grid-area: github; 209 | justify-self: start; 210 | } 211 | 212 | .demos { 213 | position: relative; 214 | display: block; 215 | align-self: end; 216 | text-align: center; 217 | grid-area: demos; 218 | display: block; 219 | justify-self: end; 220 | } 221 | 222 | .demo { 223 | padding: 0 0.15em; 224 | } 225 | 226 | .demo:not(:last-child) { 227 | margin-right: 1em; 228 | } 229 | 230 | .demo span { 231 | white-space: nowrap; 232 | pointer-events: none; 233 | } 234 | 235 | a.demo--current { 236 | pointer-events: none; 237 | color: var(--color-text); 238 | } 239 | 240 | /* Top Navigation Style */ 241 | .codrops-links { 242 | position: relative; 243 | display: flex; 244 | justify-content: center; 245 | margin: 0 1em 0 0; 246 | text-align: center; 247 | white-space: nowrap; 248 | } 249 | 250 | .codrops-icon { 251 | display: inline-block; 252 | margin: 0.15em; 253 | padding: 0.25em; 254 | } 255 | 256 | /* Page transitions */ 257 | main { 258 | height: 100vh; 259 | width: 100%; 260 | overflow: hidden; 261 | position: relative; 262 | } 263 | 264 | .content { 265 | width: 100%; 266 | height: 100vh; 267 | position: relative; 268 | } 269 | 270 | .content--intro { 271 | z-index: 100; 272 | height: 200vh; 273 | } 274 | 275 | .content--fixed { 276 | position: fixed; 277 | top: 0; 278 | left: 0; 279 | background-color: var(--color-content-fixed); 280 | /* background-image: var(--bg-img); */ 281 | /* can't use this as relative path until it's fixed in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=618165 */ 282 | background-position: 50% 50%; 283 | background-size: cover; 284 | } 285 | 286 | .demo-1 .content--fixed { 287 | background-image: url(../img/bg1.jpg); 288 | } 289 | 290 | .demo-2 .content--fixed { 291 | background-image: url(../img/bg2.jpg); 292 | } 293 | 294 | .demo-3 .content--fixed { 295 | background-image: url(../img/bg3.jpg); 296 | } 297 | 298 | .demo-4 .content--fixed { 299 | background-image: url(../img/bg4.jpg); 300 | } 301 | 302 | .content__inner { 303 | width: 100%; 304 | height: 100vh; 305 | position: relative; 306 | text-align: center; 307 | display: flex; 308 | flex-wrap: wrap; 309 | flex-direction: column; 310 | align-items: center; 311 | justify-content: center; 312 | } 313 | 314 | .content--intro .content__inner { 315 | background: var(--color-content); 316 | } 317 | 318 | .content h2 { 319 | margin: 0; 320 | } 321 | 322 | .shape-wrap { 323 | position: relative; 324 | z-index: 10; 325 | margin: -5px 0 0 0; /* Hide the gap */ 326 | } 327 | 328 | .shape { 329 | height: 100vh; 330 | width: 100%; 331 | display: block; 332 | fill: var(--color-content); 333 | } 334 | 335 | .content__title { 336 | font: var(--font-alt); 337 | color: var(--color-title); 338 | margin: 0; 339 | line-height: 1; 340 | } 341 | 342 | .content__title--filled { 343 | background: var(--color-content); 344 | padding: 0.25em 0.5em; 345 | } 346 | 347 | .content__title span { 348 | display: inline-block; 349 | } 350 | 351 | .content__subtitle { 352 | font: var(--font-alt); 353 | font-size: 1.5em; 354 | color: var(--color-subtitle); 355 | padding: 0.5em 0 0 0; 356 | margin: 0; 357 | } 358 | 359 | .enter, .explore { 360 | margin: 6vh 0 0 0; 361 | font-size: 1em; 362 | letter-spacing: 3px; 363 | cursor: pointer; 364 | font-weight: bold; 365 | white-space: pre; 366 | color: var(--color-enter); 367 | pointer-events: auto; 368 | } 369 | 370 | .enter:hover, 371 | .enter:focus { 372 | color: var(--color-enter); 373 | } 374 | 375 | .enter span { 376 | display: inline-block; 377 | } 378 | 379 | .explore { 380 | background: var(--color-subtitle); 381 | color: var(--color-title); 382 | padding: 0.5em 1em; 383 | } 384 | 385 | .explore:hover, 386 | .explore:focus { 387 | background: var(--color-text); 388 | } 389 | 390 | .menu { 391 | display: flex; 392 | justify-content: center; 393 | flex-wrap: wrap; 394 | } 395 | 396 | .menu__item { 397 | font: var(--font-alt); 398 | font-size: 3vw; 399 | color: var(--color-menu-item); 400 | margin: 0 1em; 401 | position: relative; 402 | line-height: 1; 403 | } 404 | 405 | .menu__item:hover, 406 | .menu__item:focus { 407 | color: var(--color-menu-item-hover); 408 | } 409 | 410 | .menu__item:nth-child(2):hover { 411 | color: var(--color-menu-item-hover-alt); 412 | } 413 | 414 | .demo-2 .menu__item { 415 | pointer-events: none; 416 | padding: 3em; 417 | } 418 | 419 | .demo-2 .menu__item span { 420 | pointer-events: auto; 421 | } 422 | 423 | .content__text { 424 | font-size: 1.85em; 425 | max-width: 800px; 426 | text-align: left; 427 | } 428 | 429 | .content__text a { 430 | color: var(--color-menu-item); 431 | } 432 | 433 | .content__text a:hover, 434 | .content__text a:focus { 435 | color: var(--color-menu-item-hover); 436 | } 437 | 438 | .next-demo { 439 | position: absolute; 440 | bottom: 0; 441 | right: 0; 442 | margin: 1.5em 2em; 443 | font-weight: bold; 444 | color: var(--color-next); 445 | } 446 | 447 | .next-demo:hover, 448 | .next-demo:focus { 449 | color: var(--color-next-hover); 450 | } 451 | 452 | @media screen and (max-width: 50em) { 453 | .frame { 454 | z-index: 1000; 455 | display: block; 456 | padding: 0.85em 0; 457 | } 458 | .demos { 459 | font-size: 0.85em; 460 | padding: 0 0.25em; 461 | } 462 | .codrops-header { 463 | flex-direction: column; 464 | align-items: center; 465 | padding-top: 5em; 466 | } 467 | .codrops-header__title { 468 | font-weight: bold; 469 | padding-bottom: 0.25em; 470 | text-align: center; 471 | } 472 | .github { 473 | display: none; 474 | } 475 | .codrops-links { 476 | margin: 0; 477 | } 478 | .content--intro .content__inner, 479 | .demo-4 .content__inner { 480 | padding-top: 12em; 481 | } 482 | .content__title { 483 | font-size: 2em; 484 | } 485 | .demo { 486 | padding: 0; 487 | margin: 0; 488 | } 489 | .menu__item { 490 | margin: 0.5em 0; 491 | font-size: 1.5em; 492 | } 493 | .content__text { 494 | padding: 1em; 495 | font-size: 1em; 496 | } 497 | .next-demo { 498 | position: relative; 499 | } 500 | } 501 | -------------------------------------------------------------------------------- /css/normalize.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;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MorphingPageTransition/e7e6db54bc37de62c16fb387a429e726b82c5d1c/favicon.ico -------------------------------------------------------------------------------- /img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MorphingPageTransition/e7e6db54bc37de62c16fb387a429e726b82c5d1c/img/bg1.jpg -------------------------------------------------------------------------------- /img/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MorphingPageTransition/e7e6db54bc37de62c16fb387a429e726b82c5d1c/img/bg2.jpg -------------------------------------------------------------------------------- /img/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MorphingPageTransition/e7e6db54bc37de62c16fb387a429e726b82c5d1c/img/bg3.jpg -------------------------------------------------------------------------------- /img/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MorphingPageTransition/e7e6db54bc37de62c16fb387a429e726b82c5d1c/img/bg4.jpg -------------------------------------------------------------------------------- /img/paint1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/paint2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Morphing Page Transition | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 |
40 |

Morphing Page Transition

41 |
42 | 43 | 49 |
50 |
51 |

Edgar Jacquet

52 |

Fashion Designer

53 | enter 54 | 55 |
Sponsored by
56 | Phone with theme 57 |

Build a website. Create it. Change it.

58 |

The website creator you'll love to use.

59 | 60 |
61 |
62 | 63 | 64 | 65 |
66 |
67 |
68 |
69 | 73 | Next demo 74 |
75 |
76 | 77 | 78 | 79 | 80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Morphing Page Transition | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 |
40 |

Morphing Page Transition

41 |
42 | 43 | 49 |
50 |
51 |

Aaron Silverman

52 |

Spraypaint & Airbrush Artist

53 | enter 54 | 55 |
Sponsored by
56 | Phone with theme 57 |

Build a website. Create it. Change it.

58 |

The website creator you'll love to use.

59 | 60 |
61 |
62 | 63 | 64 | 65 |
66 |
67 |
68 |
69 | 73 | Next demo 74 |
75 |
76 | 77 | 78 | 79 | 80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Morphing Page Transition | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 |
40 |

Morphing Page Transition

41 |
42 | 43 | 49 |
50 |
51 |

The Pink Balloon

52 |

Candy Artisans

53 | enter 54 | 55 |
Sponsored by
56 | Phone with theme 57 |

Build a website. Create it. Change it.

58 |

The website creator you'll love to use.

59 | 60 |
61 |
62 | 63 | 64 | 65 |
66 |
67 |
68 |
69 |

Since 1968 The Pink Balloon manufactures artisan candy in a traditional way with only natural, locally sourced ingredients. Visit the candy shop →

70 | Next demo 71 |
72 |
73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Morphing Page Transition | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 |
33 |
34 |
35 |
36 | 37 | 38 |
39 |

Morphing Page Transition

40 |
41 | 42 | 48 |
49 |
50 |
51 |

Southeast Asia

52 |

History, Culture & Destinations

53 | Start your journey 54 | 55 |
Sponsored by
56 | Phone with theme 57 |

Build a website. Create it. Change it.

58 |

The website creator you'll love to use.

59 | 60 |
61 |
62 | 63 | 64 | 65 |
66 |
67 |
68 |
69 |

Bangkok

70 | Explore 71 |
72 |
73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp$this=this; 6 | (function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(g.arr(c)?r(c):c)},[])}function v(a){if(g.arr(a))return a;g.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})} 7 | function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=g.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,h){return b+b+c+c+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}function S(a){function b(a,b,c){0> 8 | c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1k&&q=m&&(f.began=!0,e("begin")),e("run")):(q<=k&&0!==O&&(d(0),p&&g()),q>=h&&O!==h&&(d(h),p||g()));a>=h&&(f.remaining?(t=n,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,h=0;h=b&& 22 | 0<=d&&1>=d){var g=new Float32Array(11);if(b!==c||d!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,d);return function(h){if(b===c&&d===e)return h;if(0===h)return 0;if(1===h)return 1;for(var k=0,l=1;10!==l&&g[l]<=h;++l)k+=.1;--l;var l=k+(h-g[l])/(g[l+1]-g[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(k=0;4>k;++k){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-h,l=l-m/n}h=l}else if(0===n)h=l;else{var l=k,k=k+.1,f=0;do m=l+(k-l)/2,n=a(m,b,d)-h,0++f);h=m}return a(h,c,e)}}}}(),M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1], 24 | [.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=g.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]= 25 | c},attribute:function(a,b,c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;ed&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m}); -------------------------------------------------------------------------------- /js/charming.min.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"==typeof module?this.charming=e:module.exports=e}(function(e,n){"use strict";n=n||{};var t=n.tagName||"span",o=null!=n.classPrefix?n.classPrefix:"char",r=1,a=function(e){for(var n=e.parentNode,a=e.nodeValue,c=a.length,l=-1;++l { 23 | imagesLoaded(document.body, {background: true} , () => document.body.classList.remove('loading')); 24 | DOM.enter.addEventListener('click', navigate); 25 | DOM.enter.addEventListener('touchenter', navigate); 26 | DOM.enter.addEventListener('mouseenter', enterHoverInFn); 27 | DOM.enter.addEventListener('mouseleave', enterHoverOutFn); 28 | }; 29 | 30 | let loaded; 31 | const navigate = () => { 32 | if ( loaded ) return; 33 | loaded = true; 34 | 35 | anime({ 36 | targets: DOM.intro, 37 | duration: 1100, 38 | easing: 'easeInOutSine', 39 | translateY: '-200vh' 40 | }); 41 | 42 | anime({ 43 | targets: DOM.shape, 44 | scaleY: [ 45 | {value:[0.8,1.8],duration: 550,easing: 'easeInQuad'}, 46 | {value:1,duration: 550,easing: 'easeOutQuad'} 47 | ] 48 | }); 49 | 50 | anime({ 51 | targets: DOM.path, 52 | duration: 1100, 53 | easing: 'easeOutQuad', 54 | d: DOM.path.getAttribute('pathdata:id') 55 | }); 56 | }; 57 | 58 | let isActive; 59 | let enterTimeout; 60 | 61 | const enterHoverInFn = () => enterTimeout = setTimeout(() => { 62 | isActive = true; 63 | anime.remove(DOM.enterLetters); 64 | anime({ 65 | targets: DOM.enterLetters, 66 | delay: (t,i) => i*15, 67 | translateY: [ 68 | {value: 10, duration: 150, easing: 'easeInQuad'}, 69 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 70 | ], 71 | opacity: [ 72 | {value: 0, duration: 150, easing: 'linear'}, 73 | {value: 1, duration: 150, easing: 'linear'} 74 | ], 75 | color: { 76 | value: '#ff963b', 77 | duration: 1, 78 | delay: (t,i,l) => i*15+150 79 | } 80 | }); 81 | }, 50); 82 | 83 | const enterHoverOutFn = () => { 84 | clearTimeout(enterTimeout); 85 | if( !isActive ) return; 86 | isActive = false; 87 | 88 | anime.remove(DOM.enterLetters); 89 | anime({ 90 | targets: DOM.enterLetters, 91 | delay: (t,i,l) => (l-i-1)*15, 92 | translateY: [ 93 | {value: 10, duration: 150, easing: 'easeInQuad'}, 94 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 95 | ], 96 | opacity: [ 97 | {value: 0, duration: 150, easing: 'linear'}, 98 | {value: 1, duration: 150, easing: 'linear'} 99 | ], 100 | color: { 101 | value: '#ffffff', 102 | duration: 1, 103 | delay: (t,i,l) => (l-i-1)*15+150 104 | } 105 | }); 106 | }; 107 | 108 | init(); 109 | }; -------------------------------------------------------------------------------- /js/demo2.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo2.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | const DOM = {}; 13 | DOM.intro = document.querySelector('.content--intro'); 14 | DOM.shape = DOM.intro.querySelector('svg.shape'); 15 | DOM.path = DOM.shape.querySelector('path'); 16 | DOM.enter = document.querySelector('.enter'); 17 | charming(DOM.enter); 18 | DOM.enterLetters = Array.from(DOM.enter.querySelectorAll('span')); 19 | 20 | const init = () => { 21 | imagesLoaded(document.body, {background: true} , () => document.body.classList.remove('loading')); 22 | DOM.enter.addEventListener('click', navigate); 23 | DOM.enter.addEventListener('touchenter', navigate); 24 | DOM.enter.addEventListener('mouseenter', enterHoverInFn); 25 | DOM.enter.addEventListener('mouseleave', enterHoverOutFn); 26 | }; 27 | 28 | let loaded; 29 | const navigate = () => { 30 | if ( loaded ) return; 31 | loaded = true; 32 | 33 | anime({ 34 | targets: DOM.intro, 35 | duration: 1500, 36 | easing: 'easeInOutSine', 37 | translateY: '-200vh' 38 | }); 39 | 40 | anime({ 41 | targets: DOM.path, 42 | duration: 1500, 43 | easing: 'easeInOutSine', 44 | d: DOM.path.getAttribute('pathdata:id') 45 | }); 46 | }; 47 | 48 | let isActive; 49 | let enterTimeout; 50 | 51 | const enterHoverInFn = () => enterTimeout = setTimeout(() => { 52 | isActive = true; 53 | anime.remove(DOM.enterLetters); 54 | anime({ 55 | targets: DOM.enterLetters, 56 | delay: (t,i) => i*15, 57 | translateY: [ 58 | {value: 10, duration: 150, easing: 'easeInQuad'}, 59 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 60 | ], 61 | opacity: [ 62 | {value: 0, duration: 150, easing: 'linear'}, 63 | {value: 1, duration: 150, easing: 'linear'} 64 | ], 65 | color: { 66 | value: '#002068', 67 | duration: 1, 68 | delay: (t,i,l) => i*15+150 69 | } 70 | }); 71 | }, 50); 72 | 73 | const enterHoverOutFn = () => { 74 | clearTimeout(enterTimeout); 75 | if( !isActive ) return; 76 | isActive = false; 77 | 78 | anime.remove(DOM.enterLetters); 79 | anime({ 80 | targets: DOM.enterLetters, 81 | delay: (t,i,l) => (l-i-1)*15, 82 | translateY: [ 83 | {value: 10, duration: 150, easing: 'easeInQuad'}, 84 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 85 | ], 86 | opacity: [ 87 | {value: 0, duration: 150, easing: 'linear'}, 88 | {value: 1, duration: 150, easing: 'linear'} 89 | ], 90 | color: { 91 | value: '#ecec11', 92 | duration: 1, 93 | delay: (t,i,l) => (l-i-1)*15+150 94 | } 95 | }); 96 | }; 97 | 98 | init(); 99 | }; -------------------------------------------------------------------------------- /js/demo3.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo3.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | const DOM = {}; 13 | DOM.intro = document.querySelector('.content--intro'); 14 | DOM.shape = DOM.intro.querySelector('svg.shape'); 15 | DOM.path = DOM.shape.querySelector('path'); 16 | DOM.enter = document.querySelector('.enter'); 17 | charming(DOM.enter); 18 | DOM.enterLetters = Array.from(DOM.enter.querySelectorAll('span')); 19 | // Set the SVG transform origin. 20 | DOM.shape.style.transformOrigin = '50% 0%'; 21 | 22 | const init = () => { 23 | imagesLoaded(document.body, {background: true} , () => document.body.classList.remove('loading')); 24 | DOM.enter.addEventListener('click', navigate); 25 | DOM.enter.addEventListener('touchenter', navigate); 26 | DOM.enter.addEventListener('mouseenter', enterHoverInFn); 27 | DOM.enter.addEventListener('mouseleave', enterHoverOutFn); 28 | }; 29 | 30 | let loaded; 31 | const navigate = () => { 32 | if ( loaded ) return; 33 | loaded = true; 34 | 35 | anime({ 36 | targets: DOM.intro, 37 | duration: 1600, 38 | easing: 'easeInOutCubic', 39 | translateY: '-200vh' 40 | }); 41 | 42 | anime({ 43 | targets: DOM.shape, 44 | easing: 'easeInOutCubic', 45 | scaleY: [ 46 | {value: [0,1], duration: 800}, 47 | {value: 0, duration: 1200, easing: 'easeOutElastic', elasticity: 700} 48 | ] 49 | }); 50 | 51 | anime({ 52 | targets: DOM.path, 53 | duration: 800, 54 | easing: 'easeInOutQuad', 55 | d: DOM.path.getAttribute('pathdata:id') 56 | }); 57 | 58 | anime({ 59 | targets: [DOM.intro.querySelector('.content__inner'), DOM.shape], 60 | duration: 1300, 61 | easing: 'linear', 62 | backgroundColor: (t,i) => { 63 | console.log('here') 64 | if ( i === 0 ) return '#fff1fb'; 65 | }, 66 | fill: (t,i) => { 67 | if ( i === 1 ) return '#fff1fb'; 68 | } 69 | }); 70 | }; 71 | 72 | let isActive; 73 | let enterTimeout; 74 | 75 | const enterHoverInFn = () => enterTimeout = setTimeout(() => { 76 | isActive = true; 77 | anime.remove(DOM.enterLetters); 78 | anime({ 79 | targets: DOM.enterLetters, 80 | delay: (t,i) => i*15, 81 | translateY: [ 82 | {value: 10, duration: 150, easing: 'easeInQuad'}, 83 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 84 | ], 85 | opacity: [ 86 | {value: 0, duration: 150, easing: 'linear'}, 87 | {value: 1, duration: 150, easing: 'linear'} 88 | ], 89 | color: { 90 | value: '#ffffff', 91 | duration: 1, 92 | delay: (t,i,l) => i*15+150 93 | } 94 | }); 95 | }, 50); 96 | 97 | const enterHoverOutFn = () => { 98 | clearTimeout(enterTimeout); 99 | if( !isActive ) return; 100 | isActive = false; 101 | 102 | anime.remove(DOM.enterLetters); 103 | anime({ 104 | targets: DOM.enterLetters, 105 | delay: (t,i,l) => (l-i-1)*15, 106 | translateY: [ 107 | {value: 10, duration: 150, easing: 'easeInQuad'}, 108 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 109 | ], 110 | opacity: [ 111 | {value: 0, duration: 150, easing: 'linear'}, 112 | {value: 1, duration: 150, easing: 'linear'} 113 | ], 114 | color: { 115 | value: '#f470d2', 116 | duration: 1, 117 | delay: (t,i,l) => (l-i-1)*15+150 118 | } 119 | }); 120 | }; 121 | 122 | init(); 123 | }; -------------------------------------------------------------------------------- /js/demo4.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo4.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | const DOM = {}; 13 | DOM.intro = document.querySelector('.content--intro'); 14 | DOM.shape = DOM.intro.querySelector('svg.shape'); 15 | DOM.path = DOM.shape.querySelector('path'); 16 | DOM.enter = document.querySelector('.enter'); 17 | charming(DOM.enter); 18 | DOM.enterLetters = Array.from(DOM.enter.querySelectorAll('span')); 19 | 20 | const init = () => { 21 | imagesLoaded(document.body, {background: true} , () => document.body.classList.remove('loading')); 22 | DOM.enter.addEventListener('click', navigate); 23 | DOM.enter.addEventListener('touchenter', navigate); 24 | DOM.enter.addEventListener('mouseenter', enterHoverInFn); 25 | DOM.enter.addEventListener('mouseleave', enterHoverOutFn); 26 | }; 27 | 28 | let loaded; 29 | const navigate = () => { 30 | if ( loaded ) return; 31 | loaded = true; 32 | 33 | anime({ 34 | targets: DOM.intro, 35 | translateY: { 36 | value: '-200vh', 37 | delay: 100, 38 | duration: 2000, 39 | easing: 'easeInOutQuad' 40 | } 41 | }); 42 | 43 | anime({ 44 | targets: DOM.path, 45 | duration: 1200, 46 | easing: 'linear', 47 | d: DOM.path.getAttribute('pathdata:id') 48 | }); 49 | }; 50 | 51 | let isActive; 52 | let enterTimeout; 53 | 54 | const enterHoverInFn = () => enterTimeout = setTimeout(() => { 55 | isActive = true; 56 | anime.remove(DOM.enterLetters); 57 | anime({ 58 | targets: DOM.enterLetters, 59 | delay: (t,i) => i*7, 60 | translateY: [ 61 | {value: 10, duration: 150, easing: 'easeInQuad'}, 62 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 63 | ], 64 | opacity: [ 65 | {value: 0, duration: 150, easing: 'linear'}, 66 | {value: 1, duration: 150, easing: 'linear'} 67 | ], 68 | color: { 69 | value: '#ffffff', 70 | duration: 1, 71 | delay: (t,i,l) => i*7+150 72 | } 73 | }); 74 | }, 50); 75 | 76 | const enterHoverOutFn = () => { 77 | clearTimeout(enterTimeout); 78 | if( !isActive ) return; 79 | isActive = false; 80 | 81 | anime.remove(DOM.enterLetters); 82 | anime({ 83 | targets: DOM.enterLetters, 84 | delay: (t,i,l) => (l-i-1)*7, 85 | translateY: [ 86 | {value: 10, duration: 150, easing: 'easeInQuad'}, 87 | {value: [-10,0], duration: 150, easing: 'easeOutQuad'} 88 | ], 89 | opacity: [ 90 | {value: 0, duration: 150, easing: 'linear'}, 91 | {value: 1, duration: 150, easing: 'linear'} 92 | ], 93 | color: { 94 | value: '#4b2cf2', 95 | duration: 1, 96 | delay: (t,i,l) => (l-i-1)*7+150 97 | } 98 | }); 99 | }; 100 | 101 | init(); 102 | }; -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v4.1.3 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | !function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return-1==n.indexOf(t)&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return-1!=n&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=0,o=i[n];t=t||[];for(var r=this._onceEvents&&this._onceEvents[e];o;){var s=r&&r[o];s&&(this.off(e,o),delete r[o]),o.apply(this,t),n+=s?0:1,o=i[n]}return this}},t.allOff=t.removeAllListeners=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){var t=[];if(Array.isArray(e))t=e;else if("number"==typeof e.length)for(var i=0;i