├── .gitignore ├── README.md ├── css ├── demo.css └── normalize.css ├── favicon.ico ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt ├── knarfart │ ├── knarfart-webfont.eot │ ├── knarfart-webfont.svg │ ├── knarfart-webfont.ttf │ ├── knarfart-webfont.woff │ └── knarfart-webfont.woff2 └── morse │ ├── m0rse-webfont.eot │ ├── m0rse-webfont.svg │ ├── m0rse-webfont.ttf │ ├── m0rse-webfont.woff │ └── m0rse-webfont.woff2 ├── img ├── mouse.svg └── related │ ├── InlineLinkStyles.png │ └── LinkStylesHoverEffects.jpg ├── index.html ├── index2.html └── js ├── d3-ease.v0.6.js ├── demo-1.js ├── demo-2.js ├── letters.js ├── mo.min.js └── segment.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animated Letters 2 | 3 | A plugin that animates an artistic font using Segment, the SVG strokes animation library. By Luis Manuel. 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=26057) 6 | 7 | [Demo](http://tympanus.net/Development/AnimatedLetters/) 8 | 9 | ## License 10 | 11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 12 | 13 | Read more here: [License](http://tympanus.net/codrops/licensing/) 14 | 15 | ## Credits 16 | 17 | - [segment](https://github.com/lmgonzalves/segment) 18 | - [d3-ease](https://github.com/d3/d3-ease) 19 | - Font design by [FRANK V.D HAK - KNARF ART](https://www.behance.net/knarfart) 20 | - [mo.js](http://mojs.io/) by [Oleg Solomka](https://twitter.com/legomushroom) 21 | 22 | ## Misc 23 | 24 | Follow lmgonzalves: [Twitter](https://twitter.com/lmgonzalves), [GitHub](https://github.com/lmgonzalves) 25 | 26 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 27 | 28 | [© Codrops 2016](http://www.codrops.com) 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'codropsicons'; 3 | font-weight: normal; 4 | font-style: normal; 5 | src: url('../fonts/codropsicons/codropsicons.eot'); 6 | src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 7 | } 8 | 9 | @font-face { 10 | font-family: 'knarfart'; 11 | font-weight: normal; 12 | font-style: normal; 13 | src: url('../fonts/knarfart/knarfart-webfont.eot'); 14 | src: url('../fonts/knarfart/knarfart-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/knarfart/knarfart-webfont.woff2') format('woff2'), url('../fonts/knarfart/knarfart-webfont.woff') format('woff'), url('../fonts/knarfart/knarfart-webfont.ttf') format('truetype'), url('../fonts/knarfart/knarfart-webfont.svg#knarfart') format('svg'); 15 | } 16 | 17 | @font-face { 18 | font-family: 'morse_coderegular'; 19 | font-weight: normal; 20 | font-style: normal; 21 | src: url('../fonts/morse/m0rse-webfont.eot'); 22 | src: url('../fonts/morse/m0rse-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/morse/m0rse-webfont.woff2') format('woff2'), url('../fonts/morse/m0rse-webfont.woff') format('woff'), url('../fonts/morse/m0rse-webfont.ttf') format('truetype'), url('../fonts/morse/m0rse-webfont.svg#morse_coderegular') format('svg'); 23 | } 24 | 25 | *, 26 | *::after, 27 | *::before { 28 | -webkit-box-sizing: border-box; 29 | box-sizing: border-box; 30 | } 31 | 32 | body { 33 | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; 34 | counter-reset: gridcounter; 35 | color: #3e3d47; 36 | background: #1e1d23; 37 | -webkit-font-smoothing: antialiased; 38 | -moz-osx-font-smoothing: grayscale; 39 | } 40 | 41 | a { 42 | text-decoration: none; 43 | color: #aaa; 44 | outline: none; 45 | } 46 | 47 | a:hover, 48 | a:focus { 49 | color: #fff; 50 | outline: none; 51 | } 52 | 53 | .hidden { 54 | position: absolute; 55 | left: -100vw; 56 | width: 0; 57 | height: 0; 58 | } 59 | 60 | .container { 61 | position: relative; 62 | overflow: hidden; 63 | } 64 | 65 | .codrops-header { 66 | position: relative; 67 | display: -webkit-flex; 68 | display: -ms-flexbox; 69 | display: flex; 70 | -webkit-flex-direction: column; 71 | -ms-flex-direction: column; 72 | flex-direction: column; 73 | -webkit-justify-content: center; 74 | -ms-flex-pack: center; 75 | justify-content: center; 76 | -webkit-align-items: center; 77 | -ms-flex-align: center; 78 | align-items: center; 79 | overflow: hidden; 80 | padding: 3.5em 1em 1em; 81 | text-align: center; 82 | text-align: center; 83 | } 84 | 85 | .demo-1 .codrops-header { 86 | height: calc(100vh - 40px); 87 | margin: 20px 20px 20px; 88 | padding: 2em 1em 4em; 89 | background: url(../img/mouse.svg) no-repeat left 50% bottom 40px; 90 | } 91 | 92 | .deco { 93 | font-family: 'knarfart', cursive; 94 | font-size: 90vw; 95 | line-height: 110vh; 96 | position: absolute; 97 | z-index: -1; 98 | top: 0; 99 | left: 0; 100 | display: -webkit-flex; 101 | display: -ms-flexbox; 102 | display: flex; 103 | -webkit-justify-content: center; 104 | -ms-flex-pack: center; 105 | justify-content: center; 106 | -webkit-align-items: center; 107 | -ms-flex-align: center; 108 | align-items: center; 109 | overflow: hidden; 110 | width: 100%; 111 | height: 100%; 112 | pointer-events: none; 113 | color: rgba(0, 0, 0, 0.06); 114 | background: #23222a; 115 | } 116 | 117 | .codrops-header h1 { 118 | font-size: 2.35em; 119 | font-weight: 400; 120 | line-height: 1; 121 | margin: 0; 122 | padding: 0.85em 0 0; 123 | letter-spacing: 0.5em; 124 | word-spacing: -0.3em; 125 | text-transform: uppercase; 126 | color: #e65454; 127 | } 128 | 129 | .demo-1 .codrops-header h1 { 130 | font-size: 3.35em; 131 | } 132 | 133 | .codrops-header p { 134 | font-weight: 500; 135 | margin: 2em 0 0; 136 | } 137 | 138 | .info { 139 | color: #e65454; 140 | } 141 | 142 | 143 | /* Top Navigation Style */ 144 | 145 | .codrops-links { 146 | line-height: 1; 147 | position: relative; 148 | display: inline-block; 149 | text-align: center; 150 | white-space: nowrap; 151 | } 152 | 153 | .codrops-links::after, 154 | .codrops-demos a:not(:last-child)::after { 155 | content: ''; 156 | position: absolute; 157 | top: 0; 158 | left: 50%; 159 | width: 1px; 160 | height: 100%; 161 | background: rgba(255, 255, 255, 0.1); 162 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg); 163 | transform: rotate3d(0, 0, 1, 22.5deg); 164 | } 165 | 166 | .codrops-icon { 167 | display: inline-block; 168 | width: 1.5em; 169 | margin: 0.15em 0.5em; 170 | text-decoration: none; 171 | } 172 | 173 | .codrops-icon span { 174 | display: none; 175 | } 176 | 177 | .codrops-icon::before { 178 | font-family: 'codropsicons'; 179 | font-weight: normal; 180 | font-style: normal; 181 | font-variant: normal; 182 | line-height: 1; 183 | margin: 0 5px; 184 | text-transform: none; 185 | speak: none; 186 | -webkit-font-smoothing: antialiased; 187 | } 188 | 189 | .codrops-icon--drop::before { 190 | content: '\e001'; 191 | color: #1b5baf; 192 | } 193 | 194 | .codrops-icon--prev::before { 195 | content: '\e004'; 196 | } 197 | 198 | 199 | /* Demo links */ 200 | 201 | .codrops-demos { 202 | font-size: 0.95em; 203 | font-weight: bold; 204 | line-height: 1; 205 | margin: 2em 0 0 0; 206 | } 207 | 208 | .codrops-demos a { 209 | position: relative; 210 | display: inline-block; 211 | padding: 0 0.5em; 212 | pointer-events: auto; 213 | } 214 | 215 | .codrops-demos a:not(:last-child)::after { 216 | left: calc(100% + 0.5em); 217 | } 218 | 219 | .codrops-demos a:not(:last-child) { 220 | margin: 0 1em 0.1em 0; 221 | } 222 | 223 | .codrops-demos a.current-demo { 224 | color: #504f55; 225 | } 226 | 227 | 228 | /* List */ 229 | 230 | .list { 231 | margin: 0; 232 | padding: 0; 233 | list-style: none; 234 | } 235 | 236 | .list__item { 237 | position: relative; 238 | z-index: 1; 239 | overflow: hidden; 240 | display: -webkit-flex; 241 | display: -ms-flexbox; 242 | display: flex; 243 | -webkit-flex-direction: column; 244 | -ms-flex-direction: column; 245 | flex-direction: column; 246 | -webkit-justify-content: center; 247 | -ms-flex-pack: center; 248 | justify-content: center; 249 | -webkit-align-items: center; 250 | -ms-flex-align: center; 251 | align-items: center; 252 | max-width: calc(100vw - 40px); 253 | height: calc(100vh - 40px); 254 | min-height: 460px; 255 | margin: 20px; 256 | padding: 100px 0; 257 | text-align: center; 258 | } 259 | 260 | .list__gap { 261 | min-height: 0; 262 | height: auto; 263 | text-align: center; 264 | font-weight: bold; 265 | padding: 1em 0; 266 | } 267 | 268 | .list__item--burst .list__text div svg { 269 | /* fox for mo.js */ 270 | left: 0; 271 | } 272 | 273 | .list__text { 274 | position: relative; 275 | display: -webkit-flex; 276 | display: -ms-flexbox; 277 | display: flex; 278 | -webkit-justify-content: center; 279 | -ms-flex-pack: center; 280 | justify-content: center; 281 | -webkit-align-items: center; 282 | -ms-flex-align: center; 283 | align-items: center; 284 | max-width: 90%; 285 | pointer-events: none; 286 | } 287 | 288 | .list__item p { 289 | font-size: 1.5em; 290 | font-weight: bold; 291 | color: #777; 292 | } 293 | 294 | .control__button { 295 | -webkit-flex: none; 296 | -ms-flex: none; 297 | flex: none; 298 | width: 2em; 299 | height: 2em; 300 | margin: 3em 0 0; 301 | z-index: 100; 302 | padding: 0; 303 | border: 0; 304 | background: none; 305 | -webkit-transition: opacity 0.3s; 306 | transition: opacity 0.3s; 307 | -webkit-tap-highlight-color: rgba(0,0,0,0); 308 | } 309 | 310 | .control__button--active { 311 | pointer-events: none; 312 | opacity: 0; 313 | } 314 | 315 | .js .control__button:focus, 316 | .js .control__button:active { 317 | outline: none; 318 | } 319 | 320 | .control__vector { 321 | width: 100%; 322 | height: 100%; 323 | fill: rgba(0, 0, 0, 0.12); 324 | } 325 | 326 | 327 | /* Background colors */ 328 | 329 | .color-1 { 330 | background: #91a7d0; 331 | } 332 | 333 | .color-2 { 334 | background: #f6cac9; 335 | } 336 | 337 | .color-3 { 338 | background: #3d3d40; 339 | } 340 | 341 | .color-4 { 342 | background: #615e5f; 343 | } 344 | 345 | .color-5 { 346 | background: #3f51b5; 347 | } 348 | 349 | .color-6 { 350 | background: #403f6f; 351 | } 352 | 353 | .color-7 { 354 | background: #bec6d5; 355 | } 356 | 357 | .color-8 { 358 | background: #ffef67; 359 | } 360 | 361 | .color-9 { 362 | background: #f0eee9; 363 | } 364 | 365 | .color-10 { 366 | background: #e890bb; 367 | } 368 | 369 | .color-11 { 370 | background: #23222a; 371 | } 372 | 373 | .color-12 { 374 | background: #8788c5; 375 | } 376 | 377 | 378 | /* Grid */ 379 | 380 | .grid { 381 | display: -webkit-flex; 382 | display: -ms-flexbox; 383 | display: flex; 384 | -webkit-flex-wrap: wrap; 385 | -ms-flex-wrap: wrap; 386 | flex-wrap: wrap; 387 | -webkit-justify-content: center; 388 | -ms-flex-pack: center; 389 | justify-content: center; 390 | -webkit-align-items: center; 391 | -ms-flex-align: center; 392 | align-items: center; 393 | max-width: 1300px; 394 | margin: 3em auto 0; 395 | padding: 1em; 396 | list-style: none; 397 | } 398 | 399 | .grid__item { 400 | position: relative; 401 | -webkit-flex: 1 1 280px; 402 | -ms-flex: 1 1 280px; 403 | flex: 1 1 280px; 404 | width: 25%; 405 | padding: 1.25em; 406 | -webkit-tap-highlight-color: rgba(0,0,0,0); 407 | } 408 | 409 | .grid__item::before { 410 | content: ''; 411 | position: absolute; 412 | top: 0%; 413 | left: 50%; 414 | width: 10px; 415 | height: 100%; 416 | background: #1e1d23; 417 | -webkit-transform: rotate3d(0, 0, 1, 40deg); 418 | transform: rotate3d(0, 0, 1, 40deg); 419 | } 420 | 421 | .grid__inner { 422 | position: relative; 423 | padding: 1em; 424 | cursor: pointer; 425 | background: #23222a; 426 | } 427 | 428 | .grid__inner::before { 429 | content: attr(data-morse); 430 | font-family: 'morse_coderegular', sans-serif; 431 | font-size: 13em; 432 | font-weight: normal; 433 | line-height: 0.7; 434 | position: absolute; 435 | top: 0; 436 | left: 60px; 437 | padding: 0 0.15em 0 0; 438 | color: #1e1d23; 439 | } 440 | 441 | .grid__inner::after { 442 | content: attr(data-phonetic); 443 | font-family: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace; 444 | font-size: 1.15em; 445 | font-weight: normal; 446 | position: absolute; 447 | right: 1em; 448 | bottom: 0; 449 | color: #1e1d23; 450 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 451 | transform: rotate3d(0, 0, 1, 90deg); 452 | -webkit-transform-origin: 100% 50%; 453 | transform-origin: 100% 50%; 454 | } 455 | 456 | .grid__text { 457 | font-weight: bold; 458 | line-height: 40px; 459 | position: relative; 460 | display: block; 461 | width: 40px; 462 | height: 40px; 463 | text-align: center; 464 | vertical-align: middle; 465 | color: #e65454; 466 | border-radius: 50%; 467 | background: #1e1d23; 468 | } 469 | 470 | .grid__heading { 471 | font-family: 'knarfart', sans-serif; 472 | font-size: 8em; 473 | line-height: 200px; 474 | position: relative; 475 | z-index: 10; 476 | display: -webkit-flex; 477 | display: -ms-flexbox; 478 | display: flex; 479 | -webkit-justify-content: center; 480 | -ms-flex-pack: center; 481 | justify-content: center; 482 | -webkit-align-items: center; 483 | -ms-flex-align: center; 484 | align-items: center; 485 | width: 100%; 486 | margin: 0.5em 0; 487 | letter-spacing: -0.15em; 488 | } 489 | 490 | .grid__heading .letter { 491 | margin: 0 0.05em; 492 | } 493 | 494 | 495 | /* Related demos */ 496 | 497 | .content--related { 498 | display: -webkit-flex; 499 | display: -ms-flexbox; 500 | display: flex; 501 | -webkit-flex-wrap: wrap; 502 | -ms-flex-wrap: wrap; 503 | flex-wrap: wrap; 504 | -webkit-justify-content: center; 505 | -ms-flex-pack: center; 506 | justify-content: center; 507 | -webkit-align-content: center; 508 | -ms-flex-line-pack: center; 509 | align-content: center; 510 | -webkit-align-items: center; 511 | -ms-flex-align: center; 512 | align-items: center; 513 | padding: 10em 1em 6em; 514 | text-align: center; 515 | } 516 | 517 | .demo-1 .content--related { 518 | max-width: calc(100vw - 40px); 519 | height: calc(100vh - 40px); 520 | min-height: 460px; 521 | margin: 20px; 522 | padding: 3em 1em; 523 | background: #23222a; 524 | } 525 | 526 | .content--related p { 527 | width: 100%; 528 | } 529 | 530 | .media-item { 531 | display: inline-block; 532 | padding: 1em; 533 | vertical-align: top; 534 | -webkit-transition: color 0.3s; 535 | transition: color 0.3s; 536 | } 537 | 538 | .media-item__img { 539 | max-width: 100%; 540 | opacity: 0.3; 541 | -webkit-transition: opacity 0.3s; 542 | transition: opacity 0.3s; 543 | } 544 | 545 | .media-item:hover .media-item__img, 546 | .media-item:focus .media-item__img { 547 | opacity: 1; 548 | } 549 | 550 | .media-item__title { 551 | font-size: 1em; 552 | margin: 0; 553 | padding: 0.5em; 554 | } 555 | 556 | @media screen and (max-width: 50em) { 557 | .demo-1 .codrops-header { 558 | background: none; 559 | } 560 | .demo-1 .codrops-header h1 { 561 | font-size: 8vw; 562 | } 563 | .grid__item { 564 | width: 100%; 565 | } 566 | } 567 | 568 | @media screen and (max-width: 40em) { 569 | .codrops-header h1 { 570 | font-size: 1.85em; 571 | } 572 | } 573 | -------------------------------------------------------------------------------- /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/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/favicon.ico -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/knarfart/knarfart-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/knarfart/knarfart-webfont.eot -------------------------------------------------------------------------------- /fonts/knarfart/knarfart-webfont.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /fonts/knarfart/knarfart-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/knarfart/knarfart-webfont.ttf -------------------------------------------------------------------------------- /fonts/knarfart/knarfart-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/knarfart/knarfart-webfont.woff -------------------------------------------------------------------------------- /fonts/knarfart/knarfart-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/knarfart/knarfart-webfont.woff2 -------------------------------------------------------------------------------- /fonts/morse/m0rse-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/morse/m0rse-webfont.eot -------------------------------------------------------------------------------- /fonts/morse/m0rse-webfont.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /fonts/morse/m0rse-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/morse/m0rse-webfont.ttf -------------------------------------------------------------------------------- /fonts/morse/m0rse-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/morse/m0rse-webfont.woff -------------------------------------------------------------------------------- /fonts/morse/m0rse-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/fonts/morse/m0rse-webfont.woff2 -------------------------------------------------------------------------------- /img/mouse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /img/related/InlineLinkStyles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/img/related/InlineLinkStyles.png -------------------------------------------------------------------------------- /img/related/LinkStylesHoverEffects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedLetters/631b92ab350f6da1619aabf57c23edf03a686658/img/related/LinkStylesHoverEffects.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Letters | Demo 1 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 31 | 32 |
33 |
34 | 35 |
36 | Previous Demo 37 | Back to the Codrops article 38 |
39 |

Animated Letters

40 |

An artistically animated SVG font using the Segment library.

41 | 45 |
46 |
47 | 148 |
149 | 150 |
151 |

If you enjoyed this demo you might also like:

152 | 153 | 154 |

Text Styles & Hover Effects

155 | 156 | 157 | 158 |

Inline Anchor Styles

159 | 160 |
161 |
162 | 163 | 180 | 181 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Letters | Alphabet | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | Previous Demo 30 | Back to the Codrops article 31 |
32 |

Animated Letters

33 | 37 |

Click the boxes to see the effect.

38 |
39 |
40 | 198 |
199 | 200 |
201 |

If you enjoyed this demo you might also like:

202 | 203 | 204 |

Text Styles & Hover Effects

205 | 206 | 207 | 208 |

Inline Anchor Styles

209 | 210 |
211 |
212 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /js/d3-ease.v0.6.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : 3 | typeof define === 'function' && define.amd ? define(['exports'], factory) : 4 | (factory((global.d3_ease = {}))); 5 | }(this, function (exports) { 'use strict'; 6 | 7 | var linearIn = { 8 | ease: function(t) { 9 | return +t; 10 | } 11 | }; 12 | 13 | var quadIn = { 14 | ease: function(t) { 15 | return t * t; 16 | } 17 | }; 18 | 19 | var quadOut = { 20 | ease: function(t) { 21 | return t * (2 - t); 22 | } 23 | }; 24 | 25 | var quadInOut = { 26 | ease: function(t) { 27 | return ((t *= 2) <= 1 ? t * t : --t * (2 - t) + 1) / 2; 28 | } 29 | }; 30 | 31 | var cubicIn = { 32 | ease: function(t) { 33 | return t * t * t; 34 | } 35 | }; 36 | 37 | var cubicOut = { 38 | ease: function(t) { 39 | return --t * t * t + 1; 40 | } 41 | }; 42 | 43 | var cubicInOut = { 44 | ease: function(t) { 45 | return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2; 46 | } 47 | }; 48 | 49 | var exponent = 3; 50 | 51 | var polyIn = (function polyIn(e) { 52 | return e = +e, { 53 | exponent: polyIn, 54 | ease: function(t) { 55 | return Math.pow(t, e); 56 | } 57 | }; 58 | })(exponent); 59 | 60 | var polyOut = (function polyOut(e) { 61 | return e = +e, { 62 | exponent: polyOut, 63 | ease: function(t) { 64 | return 1 - Math.pow(1 - t, e); 65 | } 66 | }; 67 | })(exponent); 68 | 69 | var polyInOut = (function polyInOut(e) { 70 | return e = +e, { 71 | exponent: polyInOut, 72 | ease: function(t) { 73 | return ((t *= 2) <= 1 ? Math.pow(t, e) : 2 - Math.pow(2 - t, e)) / 2; 74 | } 75 | }; 76 | })(exponent); 77 | 78 | var pi = Math.PI; 79 | var halfPi = pi / 2; 80 | var sinIn = { 81 | ease: function(t) { 82 | return 1 - Math.cos(t * halfPi); 83 | } 84 | }; 85 | 86 | var sinOut = { 87 | ease: function(t) { 88 | return Math.sin(t * halfPi); 89 | } 90 | }; 91 | 92 | var sinInOut = { 93 | ease: function(t) { 94 | return (1 - Math.cos(pi * t)) / 2; 95 | } 96 | }; 97 | 98 | var expIn = { 99 | ease: function(t) { 100 | return Math.pow(2, 10 * t - 10); 101 | } 102 | }; 103 | 104 | var expOut = { 105 | ease: function(t) { 106 | return 1 - Math.pow(2, -10 * t); 107 | } 108 | }; 109 | 110 | var expInOut = { 111 | ease: function(t) { 112 | return ((t *= 2) <= 1 ? Math.pow(2, 10 * t - 10) : 2 - Math.pow(2, 10 - 10 * t)) / 2; 113 | } 114 | }; 115 | 116 | var circleIn = { 117 | ease: function(t) { 118 | return 1 - Math.sqrt(1 - t * t); 119 | } 120 | }; 121 | 122 | var circleOut = { 123 | ease: function(t) { 124 | return Math.sqrt(1 - --t * t); 125 | } 126 | }; 127 | 128 | var circleInOut = { 129 | ease: function(t) { 130 | return ((t *= 2) <= 1 ? 1 - Math.sqrt(1 - t * t) : Math.sqrt(1 - (t -= 2) * t) + 1) / 2; 131 | } 132 | }; 133 | 134 | var b1 = 4 / 11; 135 | var b2 = 6 / 11; 136 | var b3 = 8 / 11; 137 | var b4 = 3 / 4; 138 | var b5 = 9 / 11; 139 | var b6 = 10 / 11; 140 | var b7 = 15 / 16; 141 | var b8 = 21 / 22; 142 | var b9 = 63 / 64; 143 | var b0 = 1 / b1 / b1; 144 | function bounce(t) { 145 | return (t = +t) < b1 ? b0 * t * t : t < b3 ? b0 * (t -= b2) * t + b4 : t < b6 ? b0 * (t -= b5) * t + b7 : b0 * (t -= b8) * t + b9; 146 | } 147 | 148 | var bounceIn = { 149 | ease: function(t) { 150 | return 1 - bounce(1 - t); 151 | } 152 | }; 153 | 154 | var bounceOut = { 155 | ease: bounce 156 | }; 157 | 158 | var bounceInOut = { 159 | ease: function(t) { 160 | return ((t *= 2) <= 1 ? 1 - bounce(1 - t) : bounce(t - 1) + 1) / 2; 161 | } 162 | }; 163 | 164 | var overshoot = 1.70158; 165 | 166 | var backIn = (function backIn(s) { 167 | return s = +s, { 168 | overshoot: backIn, 169 | ease: function(t) { 170 | return t * t * ((s + 1) * t - s); 171 | } 172 | }; 173 | })(overshoot); 174 | 175 | var backOut = (function backOut(s) { 176 | return s = +s, { 177 | overshoot: backOut, 178 | ease: function(t) { 179 | return --t * t * ((s + 1) * t + s) + 1; 180 | } 181 | }; 182 | })(overshoot); 183 | 184 | var backInOut = (function backInOut(s) { 185 | return s = +s, { 186 | overshoot: backInOut, 187 | ease: function(t) { 188 | return ((t *= 2) < 1 ? t * t * ((s + 1) * t - s) : (t -= 2) * t * ((s + 1) * t + s) + 2) / 2; 189 | } 190 | }; 191 | })(overshoot); 192 | 193 | var tau = 2 * Math.PI; 194 | var amplitude = 1; 195 | var period = 0.3; 196 | var elasticIn = (function elasticIn(a, p) { 197 | var s = Math.asin(1 / (a = Math.max(1, a))) * (p /= tau); 198 | return { 199 | amplitude: function(a) { return elasticIn(a, p * tau); }, 200 | period: function(p) { return elasticIn(a, p); }, 201 | ease: function(t) { 202 | return a * Math.pow(2, 10 * --t) * Math.sin((s - t) / p); 203 | } 204 | }; 205 | })(amplitude, period); 206 | 207 | var elasticOut = (function elasticOut(a, p) { 208 | var s = Math.asin(1 / (a = Math.max(1, a))) * (p /= tau); 209 | return { 210 | amplitude: function(a) { return elasticOut(a, p * tau); }, 211 | period: function(p) { return elasticOut(a, p); }, 212 | ease: function(t) { 213 | return 1 - a * Math.pow(2, -10 * (t = +t)) * Math.sin((t + s) / p); 214 | } 215 | }; 216 | })(amplitude, period); 217 | 218 | var elasticInOut = (function elasticInOut(a, p) { 219 | var s = Math.asin(1 / (a = Math.max(1, a))) * (p /= tau); 220 | return { 221 | amplitude: function(a) { return elasticInOut(a, p * tau); }, 222 | period: function(p) { return elasticInOut(a, p); }, 223 | ease: function(t) { 224 | return ((t = t * 2 - 1) < 0 225 | ? a * Math.pow(2, 10 * t) * Math.sin((s - t) / p) 226 | : 2 - a * Math.pow(2, -10 * t) * Math.sin((s + t) / p)) / 2; 227 | } 228 | }; 229 | })(amplitude, period); 230 | 231 | var version = "0.6.0"; 232 | 233 | exports.version = version; 234 | exports.easeLinearIn = linearIn; 235 | exports.easeLinearOut = linearIn; 236 | exports.easeLinearInOut = linearIn; 237 | exports.easeQuadIn = quadIn; 238 | exports.easeQuadOut = quadOut; 239 | exports.easeQuadInOut = quadInOut; 240 | exports.easeCubicIn = cubicIn; 241 | exports.easeCubicOut = cubicOut; 242 | exports.easeCubicInOut = cubicInOut; 243 | exports.easePolyIn = polyIn; 244 | exports.easePolyOut = polyOut; 245 | exports.easePolyInOut = polyInOut; 246 | exports.easeSinIn = sinIn; 247 | exports.easeSinOut = sinOut; 248 | exports.easeSinInOut = sinInOut; 249 | exports.easeExpIn = expIn; 250 | exports.easeExpOut = expOut; 251 | exports.easeExpInOut = expInOut; 252 | exports.easeCircleIn = circleIn; 253 | exports.easeCircleOut = circleOut; 254 | exports.easeCircleInOut = circleInOut; 255 | exports.easeBounceIn = bounceIn; 256 | exports.easeBounceOut = bounceOut; 257 | exports.easeBounceInOut = bounceInOut; 258 | exports.easeBackIn = backIn; 259 | exports.easeBackOut = backOut; 260 | exports.easeBackInOut = backInOut; 261 | exports.easeElasticIn = elasticIn; 262 | exports.easeElasticOut = elasticOut; 263 | exports.easeElasticInOut = elasticInOut; 264 | 265 | })); -------------------------------------------------------------------------------- /js/demo-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | /** 4 | * checks if a number is Odd 5 | */ 6 | function isOdd(n) { 7 | return Math.abs(n % 2) == 1; 8 | } 9 | 10 | /** 11 | * returns a random number between min and max 12 | */ 13 | function randomIntFromInterval(min,max) { 14 | return Math.floor(Math.random()*(max-min+1)+min); 15 | } 16 | 17 | // plugin options for each word 18 | var options = [ 19 | { // word 1 20 | size : 190, 21 | weight : 1, 22 | color: '#f8f8f8', 23 | duration: 0.5, 24 | fade: 0, 25 | delay: 0, 26 | easing: d3_ease.easeSinInOut.ease 27 | }, 28 | { // word 2 29 | size : 210, 30 | weight : 8, 31 | color: '#f5f5f5', 32 | duration: 0.7, 33 | fade: 0.7, 34 | delay: 0.05, 35 | easing: d3_ease.easeSinInOut.ease 36 | }, 37 | { // word 3 38 | size : 330, 39 | weight : 12, 40 | color: '#151517', 41 | duration: 0.4, 42 | fade: 0, 43 | delay: 0.2, 44 | easing: d3_ease.easePolyOut.ease 45 | }, 46 | { // word 4 47 | size : 300, 48 | weight : 35, 49 | color: ['#3B3E3B','#DC6A28','#8BC34A','#4585B7','#E24444'], 50 | duration: 1, 51 | fade: 1, 52 | delay: [0.4,0.3,0.2,0.1,0], 53 | individualDelays: true, 54 | easing: d3_ease.easeCubicOut.ease 55 | }, 56 | { // word 5 57 | size : 200, 58 | weight : 24, 59 | color: '#1E1D23', 60 | duration: 1, 61 | delay: [0.1,0.4,0.2,0.45,0.15,0.35,0.1,0.2], 62 | fade: 0, 63 | individualDelays: true, 64 | easing: d3_ease.easeBounceOut.ease 65 | }, 66 | { // word 6 67 | size : [300,180], 68 | weight : [18,8], 69 | color: ['#2F3DAB','#f1f1f1'], 70 | duration: [1.3,0.6,0.5,0.8,0.6,0.9], 71 | delay: 0.15, 72 | fade: 0, 73 | easing: [d3_ease.easeExpOut.ease,d3_ease.easePolyOut.ease] 74 | }, 75 | { // word 7 76 | size : 300, 77 | weight : [28,2], 78 | color: '#2C2B50', 79 | duration: 0.35, 80 | delay: [0,0.1,0.2,0.3,0.4,0.5], 81 | fade: 0.35, 82 | individualDelays: true, 83 | easing: d3_ease.easePolyOut.ease 84 | }, 85 | { // word 8 86 | size : 300, 87 | weight : 20, 88 | rounded: true, 89 | color: '#f0f0f0', 90 | duration: 1, 91 | delay: 0, 92 | easing: d3_ease.easePolyOut.ease 93 | }, 94 | { // word 9 95 | size : [400,300,200,100], 96 | weight : [28,23,18,13], 97 | color: '#41424C', 98 | duration: [1.1,1.2,1.3,1.4], 99 | delay: 0.05, 100 | fade: 1.5, 101 | easing: d3_ease.easeExpInOut.ease 102 | }, 103 | { // word 10 104 | size : 400, 105 | weight : 25, 106 | color: '#f0f0f0', 107 | duration: 1.5, 108 | delay: 0.1, 109 | easing: d3_ease.easeBounceOut.ease 110 | }, 111 | { // word 11 112 | size : 390, 113 | weight : 10, 114 | color: '#E65454', 115 | duration: 0.8, 116 | fade: 2, 117 | delay: 0.1, 118 | easing: d3_ease.easeExpInOut.ease 119 | }, 120 | { // word 12 121 | size : 500, 122 | weight : 25, 123 | color: '#3F51B5', 124 | duration: 1, 125 | fade: 1.5, 126 | delay: 0.2, 127 | easing: d3_ease.easeExpInOut.ease 128 | } 129 | ], 130 | // items (li) 131 | items = [].slice.call(document.querySelectorAll('ul.list > li.list__item')); 132 | 133 | function init() { 134 | 135 | items.forEach(function(item, pos) { 136 | var word = item.querySelector('.list__text'), 137 | playCtrl = item.querySelector('.control__button--play'), 138 | // initialize the plugin 139 | instance = new Letters(word, options[pos]), 140 | endPlayCallback = function() { 141 | playCtrl.className = 'control__button control__button--play'; 142 | word.setAttribute('data-state', 'stop'); 143 | }; 144 | 145 | // show word 146 | instance.showInstantly(); 147 | 148 | // moo.js configurations for some of the buttons 149 | var timelines = {}; 150 | 151 | if ( pos === 7 ) { 152 | var letters = [].slice.call(word.querySelectorAll('svg')), 153 | lettersTotal = letters.length, 154 | distanceFactor = 80, 155 | halfLen = lettersTotal/2; 156 | 157 | timelines[pos+1] = new mojs.Timeline(); 158 | 159 | letters.forEach(function(letter, i) { 160 | var tx = isOdd(lettersTotal) ? -1 * (Math.floor(halfLen) - i) * distanceFactor : -1 * (halfLen - i) * distanceFactor + distanceFactor/2, 161 | tween = new mojs.Tween({ 162 | duration : 2000, 163 | easing: mojs.easing.bezier(0.1, 1, 0.3, 1), 164 | onUpdate: function(progress) { 165 | letter.style.WebkitTransform = letter.style.transform = 'translate3d(' + tx * (1-progress) + '%,0,0) scale3d(' + progress + ',' + progress + ',1)'; 166 | } 167 | }); 168 | 169 | timelines[pos+1].add(tween); 170 | }); 171 | } 172 | else if ( pos === 8 ) { 173 | var letters = [].slice.call(word.querySelectorAll('svg')), 174 | lettersTotal = letters.length, 175 | distanceFactor = 40; 176 | 177 | timelines[pos+1] = new mojs.Timeline(); 178 | 179 | letters.forEach(function(letter, i) { 180 | var ty = -1 * distanceFactor * (lettersTotal - i) 181 | tween = new mojs.Tween({ 182 | duration : 2000, 183 | delay: 50 + 50*i, 184 | easing: mojs.easing.elastic.out, 185 | onUpdate: function(progress) { 186 | letter.style.WebkitTransform = letter.style.transform = 'translate3d(0,' + ty * (1-progress) + '%,0)'; 187 | } 188 | }); 189 | 190 | timelines[pos+1].add(tween); 191 | }); 192 | } 193 | else if ( pos === 9 ) { 194 | var letters = [].slice.call(word.querySelectorAll('svg')), 195 | distanceFactor = 60; 196 | 197 | timelines[pos+1] = new mojs.Timeline(); 198 | 199 | letters.forEach(function(letter, i) { 200 | var tween = new mojs.Tween({ 201 | duration : 1500, 202 | delay: 100 + 100*i, 203 | easing: mojs.easing.bounce.out, 204 | onUpdate: function(progress) { 205 | letter.style.WebkitTransform = letter.style.transform = 'translate3d(0,' + distanceFactor * (1-progress) + '%,0)'; 206 | } 207 | }); 208 | 209 | timelines[pos+1].add(tween); 210 | }); 211 | } 212 | else if( pos === 10 ) { 213 | var letters = [].slice.call(word.querySelectorAll('svg')), 214 | wordRect = word.getBoundingClientRect(), 215 | wordWidth = wordRect.width, 216 | wordHeight = wordRect.height, 217 | letterOffsetPosition = 0; 218 | 219 | timelines[pos+1] = new mojs.Timeline(); 220 | 221 | letters.forEach(function(letter, i) { 222 | var letterRect = letter.getBoundingClientRect(), 223 | letterWidth = letterRect.width, 224 | letterHeight = letterRect.height, 225 | letterWidthPercentage = letterWidth*100/wordWidth; 226 | 227 | letterOffsetPosition += letterWidthPercentage; 228 | 229 | var burst = new mojs.Burst({ 230 | parent: word, 231 | duration: 1000, 232 | delay: 600 + 115*i, 233 | shape : 'circle', 234 | fill : '#E65454', 235 | x: letterOffsetPosition + '%', 236 | y: randomIntFromInterval(20, 80) + '%', 237 | childOptions: { 238 | radius: {'rand(90,20)':0} 239 | }, 240 | radius: {50:160}, 241 | opacity: 0.3, 242 | count: randomIntFromInterval(5,20), 243 | isSwirl: true, 244 | isRunLess: true, 245 | easing: mojs.easing.bezier(0.1, 1, 0.3, 1) 246 | }); 247 | 248 | timelines[pos+1].add(burst); 249 | }); 250 | } 251 | else if( pos === 11 ) { 252 | var letters = [].slice.call(word.querySelectorAll('svg')), 253 | wordRect = word.getBoundingClientRect(), 254 | wordWidth = wordRect.width, 255 | letterOffsetPosition = 0; 256 | 257 | timelines[pos+1] = new mojs.Timeline(); 258 | 259 | letters.forEach(function(letter, i) { 260 | var letterRect = letter.getBoundingClientRect(), 261 | letterWidth = letterRect.width, 262 | letterHeight = letterRect.height, 263 | letterWidthPercentage = letterWidth*100/wordWidth; 264 | 265 | letterOffsetPosition += letterWidthPercentage; 266 | 267 | var ring = new mojs.Transit({ 268 | parent: word, 269 | duration: 1000, 270 | delay: 750 + 200*i, 271 | type: 'circle', 272 | radius: {0: letterHeight/2}, 273 | fill: 'transparent', 274 | stroke: '#9091CE', 275 | strokeWidth: {40:0}, 276 | opacity: 1, 277 | x: letterOffsetPosition - letterWidthPercentage/2 + '%', 278 | y: '50%', 279 | isRunLess: true, 280 | easing: mojs.easing.bezier(0.2, 1, 0.3, 1) 281 | }) 282 | 283 | timelines[pos+1].add(ring); 284 | }); 285 | } 286 | 287 | playCtrl.addEventListener('click', function() { 288 | if( word.getAttribute('data-state') === 'play' ) { 289 | return false; 290 | } 291 | word.setAttribute('data-state', 'play'); 292 | playCtrl.className = 'control__button control__button--play control__button--active'; 293 | 294 | if( pos === 6 ) { // showcase how to undraw with an animation 295 | instance.hide({ 296 | callback: function() { 297 | setTimeout(function() { 298 | instance.show({ 299 | duration : 0.35, 300 | delay : [0,0.1,0.2,0.3,0.4,0.5], 301 | fade : .35, 302 | individualDelays : true, 303 | easing : d3_ease.easePolyOut.ease, 304 | callback : endPlayCallback 305 | }); 306 | }, 300); 307 | } 308 | }); 309 | } 310 | // showcase with animations using mo.js lib: 311 | else if( pos === 7 || pos === 8 || pos === 10 ) { 312 | instance.hideInstantly(); 313 | timelines[pos+1].start(); 314 | instance.show({callback : endPlayCallback}); 315 | } 316 | else if( pos === 9 ) { 317 | instance.hide({ 318 | duration: 0.6, delay: 0.1, easing: d3_ease.easeExpOut.ease, 319 | callback: function() { 320 | timelines[pos+1].start(); 321 | instance.show({callback : endPlayCallback}); 322 | } 323 | }); 324 | } 325 | else if( pos === 11 ) { 326 | instance.hide({ 327 | duration: 0.6, delay: 0, fade: 0.6, 328 | easing: d3_ease.easeExpOut.ease, 329 | callback: function() { 330 | timelines[pos+1].start(); 331 | instance.show({callback : endPlayCallback}); 332 | } 333 | }); 334 | } 335 | // default behaviour 336 | else { 337 | instance.hideInstantly(); 338 | instance.show({callback: endPlayCallback}); 339 | } 340 | }); 341 | }); 342 | } 343 | 344 | init(); 345 | 346 | })(); 347 | -------------------------------------------------------------------------------- /js/demo-2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var items = [].slice.call(document.querySelectorAll('ul.grid > li.grid__item')); 4 | 5 | function init() { 6 | items.forEach(function(item) { 7 | var word = item.querySelector('.grid__heading'), 8 | // initialize the plugin 9 | instance = new Letters(word, { 10 | size : 200, 11 | weight : 10, 12 | color: '#E65454', 13 | duration: 0.8, 14 | delay: 0.1, 15 | fade: 0, 16 | easing: d3_ease.easeExpOut.ease 17 | }); 18 | 19 | // show word 20 | instance.showInstantly(); 21 | 22 | item.addEventListener('click', function() { 23 | instance.hide({ 24 | duration: 1, 25 | delay: 0, 26 | fade: 1, 27 | easing: d3_ease.easeExpOut.ease, 28 | callback: function() { 29 | instance.show(); 30 | } 31 | }); 32 | }); 33 | }); 34 | } 35 | 36 | init(); 37 | })(); 38 | -------------------------------------------------------------------------------- /js/letters.js: -------------------------------------------------------------------------------- 1 | function Letters(el, options){ 2 | this.el = el; 3 | this.text = el.innerHTML.toLowerCase(); 4 | el.innerHTML = ''+ this.text +''; 5 | this.init(options); 6 | } 7 | 8 | Letters.prototype = { 9 | init: function(options){ 10 | this.size = options && options.hasOwnProperty('size') ? options.size : 100; 11 | this.weight = options && options.hasOwnProperty('weight') ? options.weight : 1; 12 | this.rounded = options && options.hasOwnProperty('rounded') ? options.rounded : false; 13 | this.color = options && options.hasOwnProperty('color') ? options.color : '#5F6062'; 14 | this.duration = options && options.hasOwnProperty('duration') ? options.duration : 1; 15 | this.delay = options && options.hasOwnProperty('delay') ? options.delay : [0, 0.05]; 16 | this.fade = options && options.hasOwnProperty('fade') ? options.fade : 0.5; 17 | this.easing = options && options.hasOwnProperty('easing') ? options.easing : d3_ease.easeCubicInOut.ease; 18 | this.individualDelays = options && options.hasOwnProperty('individualDelays') ? options.individualDelays : false; 19 | this.visible = false; 20 | this._svgNS = 'http://www.w3.org/2000/svg'; 21 | this.svgs = []; 22 | this.timer = []; 23 | this.segments = []; 24 | this.drawText(); 25 | }, 26 | 27 | drawText: function(){ 28 | this.letters = this.text.replace(/[^a-z ]/g, '').split(''); 29 | var self = this; 30 | var size = typeof self.size === 'number' ? self.size : self.size[0]; 31 | var weight = typeof self.weight === 'number' ? self.weight : self.weight[0]; 32 | var rounded = typeof self.rounded === 'boolean' ? self.rounded : self.rounded[0]; 33 | var color = typeof self.color === 'string' ? self.color : self.color[0]; 34 | var fade = typeof self.fade === 'number' ? self.fade : self.fade[0]; 35 | self.renderAlphabet = typeof self.weight === 'number' && typeof self.rounded === 'boolean' ? self.initAlphabet(weight, rounded) && false : true; 36 | var spaces = 0; 37 | this.letters.forEach(function(element, index){ 38 | size = typeof self.size[index] === 'number' ? self.size[index] : size; 39 | weight = typeof self.weight[index] === 'number' ? self.weight[index] : weight; 40 | rounded = typeof self.rounded[index] === 'boolean' ? self.rounded[index] : rounded; 41 | color = typeof self.color !== 'string' && typeof self.color[index] === 'string' ? self.color[index] : color; 42 | fade = typeof self.fade[index] === 'number' ? self.fade[index] : fade; 43 | if(self.renderAlphabet){ 44 | self.initAlphabet(weight, rounded); 45 | } 46 | if(element === ' '){ 47 | self.drawLetter(element, index, size); 48 | spaces++; 49 | }else{ 50 | self.segments[index - spaces] = self.drawLetter(element, index - spaces, size, weight, rounded, color, fade); 51 | } 52 | }); 53 | this.letters = this.text.replace(/[^a-z]/g, '').split(''); 54 | }, 55 | 56 | drawLetter: function(letter, index, size, weight, rounded, color, fade){ 57 | if(letter === ' '){ 58 | this.createSVG(this.alphabet[letter].svg, 'space', index, size); 59 | }else{ 60 | var svg = this.createSVG(this.alphabet[letter].svg, letter, index, size, fade); 61 | var segments = []; 62 | var pathsD = this.alphabet[letter].paths; 63 | var initial = this.alphabet[letter].initial; 64 | var path; 65 | var segment; 66 | var self = this; 67 | pathsD.forEach(function(element, index){ 68 | path = document.createElementNS(self._svgNS, "path"); 69 | path.setAttribute('d', element); 70 | path.setAttribute('stroke-width', weight); 71 | path.setAttribute('stroke-linecap', rounded ? 'round' : 'butt'); 72 | path.setAttribute('stroke', color); 73 | path.setAttribute('fill', 'none'); 74 | segment = new Segment(path, initial[index].begin, initial[index].end, true); 75 | segments.push(segment); 76 | svg.appendChild(path); 77 | }); 78 | return segments; 79 | } 80 | }, 81 | 82 | createSVG: function(svgSize, letter, index, size, fade){ 83 | var svg = document.createElementNS(this._svgNS, "svg"); 84 | svg.setAttribute('aria-hidden', 'true'); 85 | svg.setAttribute('role', 'img'); 86 | svg.setAttribute('viewBox', '0 0 '+ svgSize.width +' '+ svgSize.height); 87 | svg.setAttribute('height', size + 'px'); 88 | var width = size * (svgSize.width / svgSize.height); 89 | svg.setAttribute('width', Math.ceil(width) + 'px'); 90 | svg.setAttribute('class', 'letter letter-' + letter + (letter !== 'space' ? ' letter-' + (index + 1) : '')); 91 | this.el.appendChild(svg); 92 | if(letter !== 'space'){ 93 | this.svgs[index] = svg; 94 | if(fade){ 95 | svg.style.opacity = 0; 96 | this.setupFade(fade, index); 97 | } 98 | return svg; 99 | } 100 | }, 101 | 102 | setupFade: function(fade, index){ 103 | var svg = this.svgs[index]; 104 | if(fade){ 105 | svg.style.transition = fade + 's opacity'; 106 | svg.style.webkitTransition = fade + 's opacity'; 107 | }else{ 108 | svg.style.transition = null; 109 | } 110 | }, 111 | 112 | show: function(options){ 113 | this.visible = true; 114 | this.clear(); 115 | var _duration = options && options.hasOwnProperty('duration') ? options.duration : this.duration; 116 | var _delay = options && options.hasOwnProperty('delay') ? options.delay : this.delay; 117 | var _fade = options && options.hasOwnProperty('fade') ? options.fade : this.fade; 118 | var _easing = options && options.hasOwnProperty('easing') ? options.easing : this.easing; 119 | var _individualDelays = options && options.hasOwnProperty('individualDelays') ? options.individualDelays : this.individualDelays; 120 | var tempDelay = 0; 121 | var lastDelay = 0; 122 | var lastDuration = typeof _duration === 'number' ? _duration : _duration[0]; 123 | var lastFade = typeof _fade === 'number' ? _fade : _fade[0]; 124 | var lastEasing = typeof _easing === 'function' ? _easing : _easing[0]; 125 | var self = this; 126 | var weight, rounded; 127 | if(self.renderAlphabet){ 128 | weight = typeof self.weight === 'number' ? self.weight : self.weight[0]; 129 | rounded = typeof self.rounded === 'boolean' ? self.rounded : self.rounded[0]; 130 | } 131 | var length = this.letters.length; 132 | this.letters.forEach(function(element, index){ 133 | lastDuration = typeof _duration[index] === 'number' ? _duration[index] : lastDuration; 134 | lastFade = typeof _fade[index] === 'number' ? _fade[index] : lastFade; 135 | lastEasing = typeof _easing[index] === 'function' ? _easing[index] : lastEasing; 136 | if(typeof _delay === 'number'){ 137 | tempDelay = _individualDelays ? _delay : tempDelay + _delay; 138 | }else{ 139 | lastDelay = typeof _delay[index] === 'number' ? _delay[index] : lastDelay; 140 | tempDelay = _individualDelays ? lastDelay : tempDelay + lastDelay; 141 | } 142 | if(tempDelay){ 143 | self.timer[index] = setTimeout(function(){ 144 | self.setupFade(lastFade, index); 145 | self.svgs[index].style.opacity = 1; 146 | self.el.offsetHeight; 147 | }, 1000 * tempDelay); 148 | }else{ 149 | self.setupFade(lastFade, index); 150 | self.svgs[index].style.opacity = 1; 151 | self.el.offsetHeight; 152 | } 153 | if(self.renderAlphabet){ 154 | weight = typeof self.weight[index] === 'number' ? self.weight[index] : weight; 155 | rounded = typeof self.rounded[index] === 'boolean' ? self.rounded[index] : rounded; 156 | self.initAlphabet(weight, rounded); 157 | } 158 | var _callback = index === length - 1 && options && options.hasOwnProperty('callback') ? options.callback : null; 159 | var finals = self.alphabet[element].final; 160 | var segments = self.segments[index]; 161 | segments.forEach(function(element, index){ 162 | element.draw(finals[index].begin, finals[index].end, lastDuration, {delay: tempDelay, circular: true, easing: lastEasing, callback: _callback}); 163 | _callback = null; 164 | }); 165 | }); 166 | }, 167 | 168 | hide: function(options){ 169 | this.visible = false; 170 | this.clear(); 171 | var _duration = options && options.hasOwnProperty('duration') ? options.duration : this.duration; 172 | var _delay = options && options.hasOwnProperty('delay') ? options.delay : this.delay; 173 | var _fade = options && options.hasOwnProperty('fade') ? options.fade : this.fade; 174 | var _easing = options && options.hasOwnProperty('easing') ? options.easing : this.easing; 175 | var _individualDelays = options && options.hasOwnProperty('individualDelays') ? options.individualDelays : this.individualDelays; 176 | var tempDelay = 0; 177 | var lastDelay = 0; 178 | var lastDuration = typeof _duration === 'number' ? _duration : _duration[0]; 179 | var lastFade = typeof _fade === 'number' ? _fade : _fade[0]; 180 | var lastEasing = typeof _easing === 'function' ? _easing : _easing[0]; 181 | var self = this; 182 | var length = this.letters.length; 183 | this.letters.forEach(function(element, index){ 184 | lastDuration = typeof _duration[index] === 'number' ? _duration[index] : lastDuration; 185 | lastFade = typeof _fade[index] === 'number' ? _fade[index] : lastFade; 186 | lastEasing = typeof _easing[index] === 'function' ? _easing[index] : lastEasing; 187 | if(typeof _delay === 'number'){ 188 | tempDelay = _individualDelays ? _delay : tempDelay + _delay; 189 | }else{ 190 | lastDelay = typeof _delay[index] === 'number' ? _delay[index] : lastDelay; 191 | tempDelay = _individualDelays ? lastDelay : tempDelay + lastDelay; 192 | } 193 | self.setupFade(lastFade, index); 194 | var time = 1000 * (lastDuration - lastFade + tempDelay); 195 | if(time){ 196 | self.timer[index] = setTimeout(function(){ 197 | self.svgs[index].style.opacity = 0; 198 | self.el.offsetHeight; 199 | }, time); 200 | }else{ 201 | self.svgs[index].style.opacity = 0; 202 | self.el.offsetHeight; 203 | } 204 | var _callback = index === length - 1 && options && options.hasOwnProperty('callback') ? options.callback : null; 205 | var initial = self.alphabet[element].initial; 206 | var segments = self.segments[index]; 207 | segments.forEach(function(element, index){ 208 | element.draw(initial[index].begin, initial[index].end, lastDuration, {delay: tempDelay, circular: true, easing: lastEasing, callback: _callback}); 209 | _callback = null; 210 | }); 211 | }); 212 | }, 213 | 214 | toggle: function(options){ 215 | if(this.visible){ 216 | this.hide(options); 217 | }else{ 218 | this.show(options); 219 | } 220 | }, 221 | 222 | showInstantly: function(){ 223 | this.show({duration: 0, delay: 0, fade: 0}); 224 | }, 225 | 226 | hideInstantly: function(){ 227 | this.hide({duration: 0, delay: 0, fade: 0}); 228 | }, 229 | 230 | toggleInstantly: function(){ 231 | this.toggle({duration: 0, delay: 0, fade: 0}); 232 | }, 233 | 234 | clear: function(){ 235 | var self = this; 236 | this.letters.forEach(function(element, index){ 237 | clearTimeout(self.timer[index]); 238 | }); 239 | }, 240 | 241 | initAlphabet: function(weight, rounded){ 242 | var width = 44 + weight; 243 | var height = 94 + (2 * weight); 244 | var radius = 20; 245 | var _weight = rounded ? 0 : weight / 2; 246 | var circle = 'm 0 -'+ radius +' a '+ radius +' '+ radius +' 0 1 1 0 '+ (2 * radius) +' a '+ radius +' '+ radius +' 0 1 1 0 -'+ (2 * radius); 247 | var circleCenter = 'm '+ (width / 2) +' '+ (height / 2) +' ' + circle; 248 | var circleLeft = 'm '+ (width / 2) +' '+ (height / 2) +' ' + circle; 249 | var circleRight = 'm '+ ((width / 2) + (2 * radius)) +' '+ (height / 2) +' ' + circle; 250 | var circleF = 'm '+ (width / 2) +' '+ ((height / 2) - 12) +' ' + circle; 251 | var circleF2 = 'm '+ (width / 2) +' '+ ((height / 2) + (weight / 2)) +' ' + circle; 252 | var circleGY = 'm '+ (width / 2) +' '+ ((height / 2) + radius + _weight) +' ' + circle; 253 | var circleJ = 'm '+ ((width / 2) - radius - _weight) +' '+ ((height / 2) + radius + _weight) +' ' + circle; 254 | var circleSXZ = 'm '+ ((width / 2) - radius - _weight) +' '+ (height / 2) +' ' + circle; 255 | var circleSXZ2 = 'm '+ ((width / 2) + radius - _weight) +' '+ (height / 2) +' ' + circle; 256 | var lineLeft = 'm '+ ((width / 2) - radius) +' 0 l 0 '+ height; 257 | var lineLeftLarge = 'm '+ ((width / 2) - radius) +' 0 l 0 '+ height; 258 | var lineRight = 'm '+ ((width / 2) + radius) +' 0 l 0 '+ height; 259 | var lineRightLarge = 'm '+ ((width / 2) + (3 * radius)) +' 0 l 0 '+ height; 260 | var lineCenter = 'm '+ ((width / 2) - radius) +' 0 l 0 '+ height; 261 | var lineE = 'm 0 '+ ((height / 2) + _weight + (_weight ? 0 : 1)) +' l '+ width +' 0'; 262 | var lineJ = 'm '+ ((width / 2) - _weight) +' 0 l 0 '+ height; 263 | var lineT = 'm 0 '+ ((height / 2) - radius) +' l '+ width +' 0'; 264 | var svgSmall = {width: width, height: height}; 265 | var svgLarge = {width: (width + (2 * radius)), height: height}; 266 | var svgFJRT = {width: (width - radius - _weight), height: height}; 267 | var svgSXZ = {width: (width - (2 * _weight)), height: height}; 268 | var p50plus23 = '50% + ' + (radius + _weight); 269 | var p50minus23 = '50% - ' + (radius + _weight); 270 | var p50minus20 = '50% - ' + radius; 271 | var p50minus35 = '50% - ' + (radius + _weight + 12); 272 | this.alphabet = { 273 | 'a': { 274 | svg: svgSmall, 275 | paths: [circleCenter, lineRight], 276 | initial: [{begin: '5%', end: '5%'}, {begin: '90%', end: '90%'}], 277 | final: [{begin: '50%', end: '125% + 1'}, {begin: '50%', end: p50plus23}] 278 | }, 279 | 'b': { 280 | svg: svgSmall, 281 | paths: [circleCenter, lineLeft], 282 | initial: [{begin: '-125%', end: '-125%'}, {begin: '5%', end: '5%'}], 283 | final: [{begin: '-125%', end: '-50%'}, {begin: p50minus35, end: p50plus23}] 284 | }, 285 | 'c': { 286 | svg: svgSmall, 287 | paths: [circleCenter], 288 | initial: [{begin: '105%', end: '105%'}], 289 | final: [{begin: '-50%', end: '25%'}] 290 | }, 291 | 'd': { 292 | svg: svgSmall, 293 | paths: [circleCenter, lineRight], 294 | initial: [{begin: '125%', end: '125%'}, {begin: '5%', end: '5%'}], 295 | final: [{begin: '50%', end: '125%'}, {begin: p50minus35, end: p50plus23}] 296 | }, 297 | 'e': { 298 | svg: svgSmall, 299 | paths: [circleCenter, lineE], 300 | initial: [{begin: '-105%', end: '-105%'}, {begin: '5%', end: '5%'}], 301 | final: [{begin: '50%', end: '125% + 1'}, {begin: '50%', end: p50plus23}] 302 | }, 303 | 'f': { 304 | svg: svgFJRT, 305 | paths: [circleF, circleF2, lineLeft], 306 | initial: [{begin: '-25%', end: '-25%'}, {begin: '1', end: '1'}, {begin: '50% - 13', end: '50% - 13'}], 307 | final: [{begin: '-25%', end: '1'}, {begin: '-25%', end: '1'}, {begin: '50% - 13', end: p50plus23}] 308 | }, 309 | 'g': { 310 | svg: svgSmall, 311 | paths: [circleCenter, circleGY, lineRight], 312 | initial: [{begin: '25%', end: '25%'}, {begin: '-10%', end: '-10%'}, {begin: '50%', end: '50%'}], 313 | final: [{begin: '-50%', end: '25% + 1'}, {begin: '-75% - 1', end: '-50%'}, {begin: '50%', end: p50plus23}] 314 | }, 315 | 'h': { 316 | svg: svgSmall, 317 | paths: [circleCenter, lineLeft, lineRight], 318 | initial: [{begin: '-25%', end: '-25%'}, {begin: '10%', end: '10%'}, {begin: '90%', end: '90%'}], 319 | final: [{begin: '-150%', end: '-75% + 1'}, {begin: p50minus35, end: '50%'}, {begin: '50%', end: p50plus23}] 320 | }, 321 | 'i': { 322 | svg: {width: (width - (2 * radius)), height: height}, 323 | paths: [lineCenter], 324 | initial: [{begin: '50%', end: '50%'}], 325 | final: [{begin: p50minus23, end: p50plus23}] 326 | }, 327 | 'j': { 328 | svg: svgFJRT, 329 | paths: [circleJ, lineJ], 330 | initial: [{begin: '5%', end: '5%'}, {begin: p50minus23, end: p50minus23}], 331 | final: [{begin: '25% - 1', end: '50%'}, {begin: p50minus23, end: p50plus23}] 332 | }, 333 | 'k': { 334 | svg: svgSmall, 335 | paths: [circleCenter, lineLeft], 336 | initial: [{begin: '50%', end: '50%'}, {begin: '80%', end: '80%'}], 337 | final: [{begin: '25%', end: '100%'}, {begin: p50minus35, end: p50plus23}] 338 | }, 339 | 'l': { 340 | svg: {width: (width - (2 * radius)), height: height}, 341 | paths: [lineCenter], 342 | initial: [{begin: '50%', end: '50%'}], 343 | final: [{begin: p50minus35, end: p50plus23}] 344 | }, 345 | 'm': { 346 | svg: svgLarge, 347 | paths: [circleLeft, circleRight, lineLeftLarge], 348 | initial: [{begin: '90%', end: '90%'}, {begin: '90%', end: '90%'}, {begin: '90%', end: '90%'}], 349 | final: [{begin: '-25%', end: '50%'}, {begin: '-25%', end: '50%'}, {begin: p50minus23, end: p50plus23}] 350 | }, 351 | 'n': { 352 | svg: svgSmall, 353 | paths: [circleCenter, lineLeft], 354 | initial: [{begin: '-60%', end: '-60%'}, {begin: '90%', end: '90%'}], 355 | final: [{begin: '-25%', end: '50%'}, {begin: p50minus23, end: p50plus23}] 356 | }, 357 | 'o': { 358 | svg: svgSmall, 359 | paths: [circleCenter], 360 | initial: [{begin: '-150%', end: '-150%'}], 361 | final: [{begin: '2%', end: '98%'}] 362 | }, 363 | 'p': { 364 | svg: svgSmall, 365 | paths: [circleCenter, lineLeft], 366 | initial: [{begin: '25%', end: '25%'}, {begin: p50plus23, end: p50plus23}], 367 | final: [{begin: '-25% - 1', end: '50%'}, {begin: '50%', end: '50% + 46'}] 368 | }, 369 | 'q': { 370 | svg: svgSmall, 371 | paths: [circleCenter, lineRight], 372 | initial: [{begin: '-25%', end: '-25%'}, {begin: p50plus23, end: p50plus23}], 373 | final: [{begin: '-50%', end: '25% + 1'}, {begin: '50%', end: '50% + 46'}] 374 | }, 375 | 'r': { 376 | svg: svgFJRT, 377 | paths: [circleCenter, lineLeft], 378 | initial: [{begin: '-25% - 1', end: '-25% - 1'}, {begin: '50%', end: '50%'}], 379 | final: [{begin: '-25% - 1', end: '1'}, {begin: '50%', end: p50plus23}] 380 | }, 381 | 's': { 382 | svg: svgSXZ, 383 | paths: [circleSXZ, circleSXZ2], 384 | initial: [{begin: '50%', end: '50%'}, {begin: '1', end: '1'}], 385 | final: [{begin: '25%', end: '50%'}, {begin: '-25% - 1', end: '1'}] 386 | }, 387 | 't': { 388 | svg: svgFJRT, 389 | paths: [circleCenter, lineLeft, lineT], 390 | initial: [{begin: '50%', end: '50%'}, {begin: '5%', end: '5%'}, {begin: '50%', end: '50%'}], 391 | final: [{begin: '50%', end: '75% + 1'}, {begin: p50minus35, end: '50%'}, {begin: p50minus20, end: '50%'}] 392 | }, 393 | 'u': { 394 | svg: svgSmall, 395 | paths: [circleCenter, lineRight], 396 | initial: [{begin: '50%', end: '50%'}, {begin: '80%', end: '80%'}], 397 | final: [{begin: '25%', end: '100%'}, {begin: p50minus23, end: p50plus23}] 398 | }, 399 | 'v': { 400 | svg: svgSmall, 401 | paths: [circleCenter, lineRight], 402 | initial: [{begin: '10%', end: '10%'}, {begin: '20%', end: '20%'}], 403 | final: [{begin: '25% - 1', end: '100%'}, {begin: p50minus23, end: '50%'}] 404 | }, 405 | 'w': { 406 | svg: svgLarge, 407 | paths: [circleLeft, circleRight, lineRightLarge], 408 | initial: [{begin: '10%', end: '10%'}, {begin: '10%', end: '10%'}, {begin: '20%', end: '20%'}], 409 | final: [{begin: '25%', end: '100%'}, {begin: '25% - 1', end: '100%'}, {begin: p50minus23, end: '50%'}] 410 | }, 411 | 'x': { 412 | svg: svgSXZ, 413 | paths: [circleSXZ, circleSXZ2], 414 | initial: [{begin: '50%', end: '50%'}, {begin: '1', end: '1'}], 415 | final: [{begin: '0', end: '50%'}, {begin: '-50%', end: '1'}] 416 | }, 417 | 'y': { 418 | svg: svgSmall, 419 | paths: [circleCenter, circleGY, lineRight], 420 | initial: [{begin: '1', end: '1'}, {begin: '1', end: '1'}, {begin: p50minus23, end: p50minus23}], 421 | final: [{begin: '-75%', end: '1'}, {begin: '25% - 1', end: '50%'}, {begin: p50minus23, end: p50plus23}] 422 | }, 423 | 'z': { 424 | svg: svgSXZ, 425 | paths: [circleSXZ, circleSXZ2], 426 | initial: [{begin: '25%', end: '25%'}, {begin: '75%', end: '75%'}], 427 | final: [{begin: '0', end: '25% + 1'}, {begin: '50%', end: '75%'}] 428 | }, 429 | ' ': { 430 | svg: svgSmall 431 | } 432 | }; 433 | } 434 | }; -------------------------------------------------------------------------------- /js/mo.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | :: mo · js :: motion graphics toolbelt for the web 3 | Oleg Solomka @LegoMushroom 2015 MIT 4 | 0.147.4 5 | */ 6 | 7 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.yes=t()}}(function(){var t;return function e(t,r,i){function s(o,p){if(!r[o]){if(!t[o]){var a="function"==typeof require&&require;if(!p&&a)return a(o,!0);if(n)return n(o,!0);var h=new Error("Cannot find module '"+o+"'");throw h.code="MODULE_NOT_FOUND",h}var u=r[o]={exports:{}};t[o][0].call(u.exports,function(e){var r=t[o][1][e];return s(r?r:e)},u,u.exports,e,t,r,i)}return r[o].exports}for(var n="function"==typeof require&&require,o=0;oi;r=++i)s=n[r],this.o.childOptions[s]=t.childOptions[s];for(o=this.transits.length;o--;)a=this.getOption(o),null==(null!=(u=t.childOptions)?u.angle:void 0)&&null==t.angleShift?a.angle=this.transits[o].o.angle:t.isResetAngles||(a.angle=this.getBitAngle(a.angle,o)),this.transits[o].tuneNewOption(a,!0);this.timeline.recalcDuration()}if(this.props.randomAngle||this.props.randomRadius)for(o=this.transits.length;o--;)l=this.transits[o],this.props.randomAngle&&l.setProp({angleShift:this.generateRandomAngle()}),this.props.randomRadius&&l.setProp({radiusScale:this.generateRandomRadius()});return this.startTween()},e.prototype.createBit=function(){var t,e,r,i,n;for(this.transits=[],n=[],t=e=0,i=this.props.count;i>=0?i>e:e>i;t=i>=0?++e:--e)r=this.getOption(t),r.ctx=this.ctx,r.index=t,r.isDrawLess=r.isRunLess=r.isTweenLess=!0,this.props.randomAngle&&(r.angleShift=this.generateRandomAngle()),this.props.randomRadius&&(r.radiusScale=this.generateRandomRadius()),n.push(this.transits.push(new s(r)));return n},e.prototype.addBitOptions=function(){var t,e,r,i,s,n,o,p,a,h,u;for(o=this.props.count,this.degreeCnt=this.props.degree%360===0?o:o-1||1,h=this.props.degree/this.degreeCnt,p=this.transits,a=[],e=r=0,i=p.length;i>r;e=++r)u=p[e],t=u.props.angleShift||0,n=this.getSidePoint("start",e*h+t),s=this.getSidePoint("end",e*h+t),u.o.x=this.getDeltaFromPoints("x",n,s),u.o.y=this.getDeltaFromPoints("y",n,s),this.props.isResetAngles||(u.o.angle=this.getBitAngle(u.o.angle,e)),a.push(u.extendDefaults());return a},e.prototype.getBitAngle=function(t,e){var r,i,s,n,o,p,a,h,u,l,c,d;return l=this.props.count,n=this.props.degree%360===0?l:l-1||1,d=this.props.degree/n,r=e*d+90,i=this.transits[e].props.angleShift||0,t="object"!=typeof t?t+r+i:(a=Object.keys(t),c=a[0],p=t[c],s=r+i,u=parseFloat(c)+s,h=parseFloat(p)+s,o={},o[u]=h,o)},e.prototype.getSidePoint=function(t,e){var r,i;return i=this.getSideRadius(t),r=this.h.getRadialPoint({radius:i.radius,radiusX:i.radiusX,radiusY:i.radiusY,angle:e,center:{x:this.props.center,y:this.props.center}})},e.prototype.getSideRadius=function(t){return{radius:this.getRadiusByKey("radius",t),radiusX:this.getRadiusByKey("radiusX",t),radiusY:this.getRadiusByKey("radiusY",t)}},e.prototype.getRadiusByKey=function(t,e){return null!=this.deltas[t]?this.deltas[t][e]:null!=this.props[t]?this.props[t]:void 0},e.prototype.getDeltaFromPoints=function(t,e,r){var i;return i={},e[t]===r[t]?i=e[t]:(i[e[t]]=r[t],i)},e.prototype.draw=function(t){return this.drawEl()},e.prototype.isNeedsTransform=function(){return this.isPropChanged("shiftX")||this.isPropChanged("shiftY")||this.isPropChanged("angle")},e.prototype.fillTransform=function(){return"rotate("+this.props.angle+"deg) translate("+this.props.shiftX+", "+this.props.shiftY+")"},e.prototype.createTween=function(){var t,r;for(e.__super__.createTween.apply(this,arguments),t=this.transits.length,r=[];t--;)r.push(this.timeline.add(this.transits[t].tween));return r},e.prototype.calcSize=function(){var t,e,r,i,s,n,o;for(r=-1,n=this.transits,t=e=0,i=n.length;i>e;t=++e)o=n[t],o.calcSize(),r1?1:0>r?0:void 0,this.h.rand(0,r?360*r:180)},e.prototype.generateRandomRadius=function(t){var e,r,i;return r=parseFloat(this.props.randomRadius),e=r>1?1:0>r?0:void 0,i=r?100*(1-r):50,this.h.rand(i,100)/100},e.prototype.then=function(t){return this.h.error('Burst\'s "then" method is under consideration, you can vote for it in github repo issues'),this},e}(n),e.exports=i},{"./h":6,"./shapes/bitsMap":12,"./swirl":22,"./transit":23}],2:[function(t,e,r){(function(r){var i,s,n,o=[].indexOf||function(t){for(var e=0,r=this.length;r>e;e++)if(e in this&&this[e]===t)return e;return-1};n=t("../h"),i=function(){function t(t){return this.vars(),this.generate}return t.prototype.vars=function(){return this.generate=n.bind(this.generate,this)},t.prototype.generate=function(t,e,i,s){var n,p,a,h,u,l,c,d,f,y,g,m,v,w,b,x,_,T,S,M,P,C,E,k;if(arguments.length<4)return this.error("Bezier function expects 4 arguments");for(_=T=0;4>T;_=++T)if(f=arguments[_],"number"!=typeof f||isNaN(f)||!isFinite(f))return this.error("Bezier function expects 4 arguments");return 0>t||t>1||0>i||i>1?this.error("Bezier x values should be > 0 and < 1"):(h=4,u=.001,c=1e-7,l=10,M=11,S=1/(M-1),w=o.call(r,"Float32Array")>=0,n=function(t,e){return 1-3*e+3*t},p=function(t,e){return 3*e-6*t},a=function(t){return 3*t},g=function(t,e,r){return((n(e,r)*t+p(e,r))*t+a(e))*t},b=function(t,e,r){return 3*n(e,r)*t*t+2*p(e,r)*t+a(e)},C=function(e,r){var s,n;for(_=0;h>_;){if(s=b(r,t,i),0===s)return r;n=g(r,t,i)-e,r-=n/s,++_}return r},m=function(){for(_=0;M>_;)P[_]=g(_*S,t,i),++_},y=function(e,r,s){var n,o,p;for(o=void 0,n=void 0,_=0;;)if(n=r+(s-r)/2,o=g(n,t,i)-e,o>0?s=n:r=n,p=Math.abs(o)>c,!(p&&++_=u?C(e,o):0===p?o:y(e,a,a+S)},E=function(){var r;return r=!0,t!==e||i!==s?m():void 0},P=w?new Float32Array(M):new Array(M),d=!1,v=function(r){return d||E(),t===e&&i===s?r:0===r?0:1===r?1:g(x(r),e,s)},k="bezier("+[t,e,i,s]+")",v.toStr=function(){return k},v)},t.prototype.error=function(t){return n.error(t)},t}(),s=new i,e.exports=s}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../h":6}],3:[function(t,e,r){var i,s,n,o,p,a;n=t("./bezier-easing"),s=t("./path-easing"),a=t("./mix"),p=t("../h"),i=function(){function t(){}return t.prototype.bezier=n,t.prototype.PathEasing=s,t.prototype.path=new s("creator").create,t.prototype.inverse=function(t){return 1-t},t.prototype.linear={none:function(t){return t}},t.prototype.ease={"in":n.apply(t,[.42,0,1,1]),out:n.apply(t,[0,0,.58,1]),inout:n.apply(t,[.42,0,.58,1])},t.prototype.quad={"in":function(t){return t*t},out:function(t){return t*(2-t)},inout:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},t.prototype.cubic={"in":function(t){return t*t*t},out:function(t){return--t*t*t+1},inout:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},t.prototype.quart={"in":function(t){return t*t*t*t},out:function(t){return 1- --t*t*t*t},inout:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},t.prototype.quint={"in":function(t){return t*t*t*t*t},out:function(t){return--t*t*t*t*t+1},inout:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},t.prototype.sin={"in":function(t){return 1-Math.cos(t*Math.PI/2)},out:function(t){return Math.sin(t*Math.PI/2)},inout:function(t){return.5*(1-Math.cos(Math.PI*t))}},t.prototype.expo={"in":function(t){return 0===t?0:Math.pow(1024,t-1)},out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},inout:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(-Math.pow(2,-10*(t-1))+2)}},t.prototype.circ={"in":function(t){return 1-Math.sqrt(1-t*t)},out:function(t){return Math.sqrt(1- --t*t)},inout:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},t.prototype.back={"in":function(t){var e;return e=1.70158,t*t*((e+1)*t-e)},out:function(t){var e;return e=1.70158,--t*t*((e+1)*t+e)+1},inout:function(t){var e;return e=2.5949095,(t*=2)<1?.5*t*t*((e+1)*t-e):.5*((t-=2)*t*((e+1)*t+e)+2)}},t.prototype.elastic={"in":function(t){var e,r,i;return i=void 0,r=.4,0===t?0:1===t?1:(e=1,i=r/4,-(e*Math.pow(2,10*(t-=1))*Math.sin(2*(t-i)*Math.PI/r)))},out:function(t){var e,r,i;return i=void 0,r=.4,0===t?0:1===t?1:(e=1,i=r/4,e*Math.pow(2,-10*t)*Math.sin(2*(t-i)*Math.PI/r)+1)},inout:function(t){var e,r,i;return i=void 0,r=.4,0===t?0:1===t?1:(e=1,i=r/4,(t*=2)<1?-.5*e*Math.pow(2,10*(t-=1))*Math.sin(2*(t-i)*Math.PI/r):e*Math.pow(2,-10*(t-=1))*Math.sin(2*(t-i)*Math.PI/r)*.5+1)}},t.prototype.bounce={"in":function(t){return 1-o.bounce.out(1-t)},out:function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},inout:function(t){return.5>t?.5*o.bounce["in"](2*t):.5*o.bounce.out(2*t-1)+.5}},t.prototype.parseEasing=function(t){var e,r;return r=typeof t,"string"===r?"m"===t.charAt(0).toLowerCase()?this.path(t):(t=this._splitEasing(t),e=this[t[0]],e?e[t[1]]:(p.error('Easing with name "'+t[0]+'" was not found, fallback to "linear.none" instead'),this.linear.none)):p.isArray(t)?this.bezier.apply(this,t):t},t.prototype._splitEasing=function(t){var e,r,i;return"function"==typeof t?t:"string"==typeof t&&t.length?(i=t.split("."),e=i[0].toLowerCase()||"linear",r=i[1].toLowerCase()||"none",[e,r]):["linear","none"]},t}(),o=new i,o.mix=a(o),e.exports=o},{"../h":6,"./bezier-easing":2,"./mix":4,"./path-easing":5}],4:[function(t,e,r){var i,s,n,o,p,a,h=[].slice;s=null,p=function(t){return"number"==typeof t.value?t.value:s.parseEasing(t.value)},a=function(t,e){var r;return t.value=p(t),e.value=p(e),r=0,t.toe.to&&(r=1),r},n=function(t,e){var r,i,s,n,o;for(i=0,r=s=0,n=t.length;n>s&&(o=t[r],i=r,!(o.to>e));r=++s);return i},o=function(){var t;return t=1<=arguments.length?h.call(arguments,0):[],t.length>1?t=t.sort(a):t[0].value=p(t[0]),function(e){var r,i;return r=n(t,e),-1!==r?(i=t[r].value,r===t.length-1&&e>t[r].to?1:"function"==typeof i?i(e):i):void 0}},i=function(t){return s=t,o},e.exports=i},{}],5:[function(t,e,r){var i,s;s=t("../h"),i=function(){function t(t,e){if(this.o=null!=e?e:{},"creator"!==t){if(this.path=s.parsePath(t),null==this.path)return s.error("Error while parsing the path");this._vars(),this.path.setAttribute("d",this._normalizePath(this.path.getAttribute("d"))),this.pathLength=this.path.getTotalLength(),this.sample=s.bind(this.sample,this),this._hardSample=s.bind(this._hardSample,this),this._preSample()}}return t.prototype._vars=function(){return this._precompute=s.clamp(this.o.precompute||1450,100,1e4),this._step=1/this._precompute,this._rect=this.o.rect||100,this._approximateMax=this.o.approximateMax||5,this._eps=this.o.eps||.001,this._boundsPrevProgress=-1},t.prototype._preSample=function(){var t,e,r,i,s,n,o;for(this._samples=[],o=[],t=e=0,n=this._precompute;n>=0?n>=e:e>=n;t=n>=0?++e:--e)s=t*this._step,r=this.pathLength*s,i=this.path.getPointAtLength(r),o.push(this._samples[t]={point:i,length:r,progress:s});return o},t.prototype._findBounds=function(t,e){var r,i,s,n,o,p,a,h,u,l,c,d,f;if(e===this._boundsPrevProgress)return this._prevBounds;for(null==this._boundsStartIndex&&(this._boundsStartIndex=0),p=t.length,this._boundsPrevProgress>e?(a=0,i="reverse"):(a=p,i="forward"),"forward"===i?(d=t[0],s=t[t.length-1]):(d=t[t.length-1],s=t[0]),n=o=l=this._boundsStartIndex,c=a;c>=l?c>o:o>c;n=c>=l?++o:--o){if(f=t[n],u=f.point.x/this._rect,h=e,"reverse"===i&&(r=u,u=h,h=r),!(h>u)){s=f;break}d=f,this._boundsStartIndex=n}return this._boundsPrevProgress=e,this._prevBounds={start:d,end:s}},t.prototype.sample=function(t){var e,r;return t=s.clamp(t,0,1),e=this._findBounds(this._samples,t),r=this._checkIfBoundsCloseEnough(t,e),null!=r?r:this._findApproximate(t,e.start,e.end)},t.prototype._checkIfBoundsCloseEnough=function(t,e){var r,i;return r=void 0,i=this._checkIfPointCloseEnough(t,e.start.point),null!=i?i:this._checkIfPointCloseEnough(t,e.end.point)},t.prototype._checkIfPointCloseEnough=function(t,e){return s.closeEnough(t,e.x/this._rect,this._eps)?this._resolveY(e):void 0},t.prototype._approximate=function(t,e,r){var i,s;return i=e.point.x-t.point.x,s=(r-t.point.x/this._rect)/(i/this._rect),t.length+s*(e.length-t.length)},t.prototype._findApproximate=function(t,e,r,i){var n,o,p,a,h;return null==i&&(i=this._approximateMax),n=this._approximate(e,r,t),a=this.path.getPointAtLength(n),h=a.x/this._rect,s.closeEnough(t,h,this._eps)?this._resolveY(a):--i<1?this._resolveY(a):(p={point:a,length:n},o=h>t?[t,e,p,i]:[t,p,r,i],this._findApproximate.apply(this,o))},t.prototype._resolveY=function(t){return 1-t.y/this._rect},t.prototype._normalizePath=function(t){var e,r,i,s,n,o;return o=/[M|L|H|V|C|S|Q|T|A]/gim,s=t.split(o),s.shift(),e=t.match(o),n=0,s[n]=this._normalizeSegment(s[n]),r=s.length-1,s[r]=this._normalizeSegment(s[r],this._rect||100),i=this._joinNormalizedPath(e,s)},t.prototype._joinNormalizedPath=function(t,e){var r,i,s,n,o,p;for(o="",i=s=0,n=t.length;n>s;i=++s)r=t[i],p=0===i?"":" ",o+=""+p+r+e[i].trim();return o},t.prototype._normalizeSegment=function(t,e){var r,i,s,n,o,p,a,h,u,l;if(null==e&&(e=0),t=t.trim(),o=/(-|\+)?((\d+(\.(\d|\e(-|\+)?)+)?)|(\.?(\d|\e|(\-|\+))+))/gim,p=this._getSegmentPairs(t.match(o)),s=p[p.length-1],l=s[0],a=Number(l),a!==e)for(t="",s[0]=e,r=i=0,n=p.length;n>i;r=++i)h=p[r],u=0===r?"":" ",t+=""+u+h[0]+","+h[1];return t},t.prototype._getSegmentPairs=function(t){var e,r,i,n,o,p;for(t.length%2!==0&&s.error("Failed to parse the path - segment pairs are not even.",t),n=[],e=r=0,i=t.length;i>r;e=r+=2)p=t[e],o=[t[e],t[e+1]],n.push(o);return n},t.prototype.create=function(e,r){var i;return i=new t(e,r),i.sample.path=i.path,i.sample},t}(),e.exports=i},{"../h":6}],6:[function(t,e,r){var i,s;i=function(){function t(){this.vars()}return t.prototype.NS="http://www.w3.org/2000/svg",t.prototype.logBadgeCss="background:#3A0839;color:#FF512F;border-radius:5px; padding: 1px 5px 2px; border: 1px solid #FF512F;",t.prototype.shortColors={transparent:"rgba(0,0,0,0)",none:"rgba(0,0,0,0)",aqua:"rgb(0,255,255)",black:"rgb(0,0,0)",blue:"rgb(0,0,255)",fuchsia:"rgb(255,0,255)",gray:"rgb(128,128,128)",green:"rgb(0,128,0)",lime:"rgb(0,255,0)",maroon:"rgb(128,0,0)",navy:"rgb(0,0,128)",olive:"rgb(128,128,0)",purple:"rgb(128,0,128)",red:"rgb(255,0,0)",silver:"rgb(192,192,192)",teal:"rgb(0,128,128)",white:"rgb(255,255,255)",yellow:"rgb(255,255,0)",orange:"rgb(255,128,0)"},t.prototype.chainOptionMap={duration:1,delay:1,repeat:1,easing:1,yoyo:1,onStart:1,onComplete:1,onCompleteChain:1,onUpdate:1,points:1},t.prototype.callbacksMap={onStart:1,onComplete:1,onCompleteChain:1,onUpdate:1},t.prototype.tweenOptionMap={duration:1,delay:1,repeat:1,easing:1,yoyo:1},t.prototype.posPropsMap={x:1,y:1,shiftX:1,shiftY:1,burstX:1,burstY:1,burstShiftX:1,burstShiftY:1},t.prototype.strokeDashPropsMap={strokeDasharray:1,strokeDashoffset:1},t.prototype.RAD_TO_DEG=180/Math.PI,t.prototype.vars=function(){var t;return this.prefix=this.getPrefix(),this.getRemBase(),this.isFF="moz"===this.prefix.lowercase,this.isIE="ms"===this.prefix.lowercase,t=navigator.userAgent,this.isOldOpera=t.match(/presto/gim),this.isSafari=t.indexOf("Safari")>-1,this.isChrome=t.indexOf("Chrome")>-1,this.isOpera=t.toLowerCase().indexOf("op")>-1,this.isChrome&&this.isSafari&&(this.isSafari=!1),t.match(/PhantomJS/gim)&&(this.isSafari=!1),this.isChrome&&this.isOpera&&(this.isChrome=!1),this.is3d=this.checkIf3d(),this.uniqIDs=-1,this.div=document.createElement("div"),document.body.appendChild(this.div)},t.prototype.cloneObj=function(t,e){var r,i,s,n;for(s=Object.keys(t),n={},r=s.length;r--;)i=s[r],null!=e?e[i]||(n[i]=t[i]):n[i]=t[i];return n},t.prototype.extend=function(t,e){var r,i;for(r in e)i=e[r],null==t[r]&&(t[r]=e[r]);return t},t.prototype.getRemBase=function(){var t,e;return t=document.querySelector("html"),e=getComputedStyle(t),this.remBase=parseFloat(e.fontSize)},t.prototype.clamp=function(t,e,r){return e>t?e:t>r?r:t},t.prototype.setPrefixedStyle=function(t,e,r,i){return e.match(/transform/gim)?(t.style[""+e]=r,t.style[""+this.prefix.css+e]=r):t.style[e]=r},t.prototype.style=function(t,e,r){var i,s,n,o;if("object"==typeof e){for(s=Object.keys(e),n=s.length,o=[];n--;)i=s[n],r=e[i],o.push(this.setPrefixedStyle(t,i,r));return o}return this.setPrefixedStyle(t,e,r)},t.prototype.prepareForLog=function(t){return t=Array.prototype.slice.apply(t),t.unshift("::"),t.unshift(this.logBadgeCss),t.unshift("%cmo·js%c"),t},t.prototype.log=function(){return mojs.isDebug!==!1?console.log.apply(console,this.prepareForLog(arguments)):void 0},t.prototype.warn=function(){return mojs.isDebug!==!1?console.warn.apply(console,this.prepareForLog(arguments)):void 0},t.prototype.error=function(){return mojs.isDebug!==!1?console.error.apply(console,this.prepareForLog(arguments)):void 0},t.prototype.parseUnit=function(t){var e,r,i,s,n,o;return"number"==typeof t?n={unit:"px",isStrict:!1,value:t,string:t+"px"}:"string"==typeof t?(s=/px|%|rem|em|ex|cm|ch|mm|in|pt|pc|vh|vw|vmin/gim,o=null!=(i=t.match(s))?i[0]:void 0,r=!0,o||(o="px",r=!1),e=parseFloat(t),n={unit:o,isStrict:r,value:e,string:""+e+o}):t},t.prototype.bind=function(t,e){var r,i;return i=function(){var i,s;return i=Array.prototype.slice.call(arguments),s=r.concat(i),t.apply(e,s)},r=Array.prototype.slice.call(arguments,2),i},t.prototype.getRadialPoint=function(t){var e,r,i,s;return null==t&&(t={}),null!=t.radius&&null!=t.angle&&null!=t.center?(r=(t.angle-90)*(Math.PI/180),i=null!=t.radiusX?t.radiusX:t.radius,s=null!=t.radiusY?t.radiusY:t.radius,e={x:t.center.x+Math.cos(r)*i,y:t.center.y+Math.sin(r)*s}):void 0},t.prototype.getPrefix=function(){var t,e,r,i;return r=window.getComputedStyle(document.documentElement,""),i=Array.prototype.slice.call(r).join("").match(/-(moz|webkit|ms)-/),e=(i||""===r.OLink&&["","o"])[1],t="WebKit|Moz|MS|O".match(new RegExp("("+e+")","i"))[1],{dom:t,lowercase:e,css:"-"+e+"-",js:e[0].toUpperCase()+e.substr(1)}},t.prototype.strToArr=function(t){var e;return e=[],"number"!=typeof t||isNaN(t)?(t.trim().split(/\s+/gim).forEach(function(t){return function(r){return e.push(t.parseUnit(t.parseIfRand(r)))}}(this)),e):(e.push(this.parseUnit(t)),e)},t.prototype.calcArrDelta=function(t,e){var r,i,s,n,o;for(r=[],i=s=0,n=t.length;n>s;i=++s)o=t[i],r[i]=this.parseUnit(""+(e[i].value-t[i].value)+e[i].unit);return r},t.prototype.isArray=function(t){return t instanceof Array},t.prototype.normDashArrays=function(t,e){var r,i,s,n,o,p,a,h,u,l;if(r=t.length,i=e.length,r>i)for(a=r-i,l=e.length,n=o=0,h=a;h>=0?h>o:o>h;n=h>=0?++o:--o)s=n+l,e.push(this.parseUnit("0"+t[s].unit));else if(i>r)for(a=i-r,l=t.length,n=p=0,u=a;u>=0?u>p:p>u;n=u>=0?++p:--p)s=n+l,t.push(this.parseUnit("0"+e[s].unit));return[t,e]},t.prototype.makeColorObj=function(t){var e,r,i,s,n,o,p,a,h,u;return"#"===t[0]&&(h=/^#?([a-f\d]{1,2})([a-f\d]{1,2})([a-f\d]{1,2})$/i.exec(t),i={},h&&(o=2===h[1].length?h[1]:h[1]+h[1],s=2===h[2].length?h[2]:h[2]+h[2],r=2===h[3].length?h[3]:h[3]+h[3],i={r:parseInt(o,16),g:parseInt(s,16),b:parseInt(r,16),a:1})),"#"!==t[0]&&(n="r"===t[0]&&"g"===t[1]&&"b"===t[2],n&&(u=t),n||(u=this.shortColors[t]?this.shortColors[t]:(this.div.style.color=t,this.computedStyle(this.div).color)),p="^rgba?\\((\\d{1,3}),\\s?(\\d{1,3}),",a="\\s?(\\d{1,3}),?\\s?(\\d{1}|0?\\.\\d{1,})?\\)$",h=new RegExp(p+a,"gi").exec(u),i={},e=parseFloat(h[4]||1),h&&(i={r:parseInt(h[1],10),g:parseInt(h[2],10),b:parseInt(h[3],10),a:null==e||isNaN(e)?1:e})),i},t.prototype.computedStyle=function(t){return getComputedStyle(t)},t.prototype.capitalize=function(t){if("string"!=typeof t)throw Error("String expected - nothing to capitalize");return t.charAt(0).toUpperCase()+t.substring(1)},t.prototype.parseRand=function(t){var e,r,i;return r=t.split(/rand\(|\,|\)/),i=this.parseUnit(r[2]),e=this.rand(parseFloat(r[1]),parseFloat(r[2])),i.unit&&r[2].match(i.unit)?e+i.unit:e},t.prototype.parseStagger=function(t,e){var r,i,s,n,o,p;return p=t.split(/stagger\(|\)$/)[1].toLowerCase(),s=p.split(/(rand\(.*?\)|[^\(,\s]+)(?=\s*,|\s*$)/gim),p=s.length>3?(r=this.parseUnit(this.parseIfRand(s[1])),s[3]):(r=this.parseUnit(0),s[1]),p=this.parseIfRand(p),o=this.parseUnit(p),i=e*o.value+r.value,n=r.isStrict?r.unit:o.isStrict?o.unit:"",n?""+i+n:i},t.prototype.parseIfStagger=function(t,e){return"string"==typeof t&&t.match(/stagger/g)?this.parseStagger(t,e):t},t.prototype.parseIfRand=function(t){return"string"==typeof t&&t.match(/rand\(/)?this.parseRand(t):t},t.prototype.parseDelta=function(t,e){var r,i,s,n,o,p,a,h,u,l;if(h=Object.keys(e)[0],i=e[h],r={start:h},isNaN(parseFloat(h))&&!h.match(/rand\(/)){if("strokeLinecap"===t)return this.warn("Sorry, stroke-linecap property is not animatable yet, using the start("+h+") value instead",e),r;l=this.makeColorObj(h),n=this.makeColorObj(i),r={start:l,end:n,type:"color",delta:{r:n.r-l.r,g:n.g-l.g,b:n.b-l.b,a:n.a-l.a}}}else if("strokeDasharray"===t||"strokeDashoffset"===t){for(u=this.strToArr(h),s=this.strToArr(i),this.normDashArrays(u,s),o=p=0,a=u.length;a>p;o=++p)h=u[o],i=s[o],this.mergeUnits(h,i,t);r={start:u,end:s,delta:this.calcArrDelta(u,s),type:"array"}}else this.chainOptionMap[t]||(this.posPropsMap[t]?(i=this.parseUnit(this.parseIfRand(i)),h=this.parseUnit(this.parseIfRand(h)),this.mergeUnits(h,i,t),r={start:h,end:i,delta:i.value-h.value,type:"unit"}):(i=parseFloat(this.parseIfRand(i)),h=parseFloat(this.parseIfRand(h)),r={start:h,end:i,delta:i-h,type:"number"}));return r},t.prototype.mergeUnits=function(t,e,r){return!e.isStrict&&t.isStrict?(e.unit=t.unit,e.string=""+e.value+e.unit):e.isStrict&&!t.isStrict?(t.unit=e.unit,t.string=""+t.value+t.unit):e.isStrict&&t.isStrict&&e.unit!==t.unit?(t.unit=e.unit,t.string=""+t.value+t.unit,this.warn('Two different units were specified on "'+r+'" delta property, mo · js will fallback to end "'+e.unit+'" unit ')):void 0},t.prototype.rand=function(t,e){return Math.random()*(e-t)+t},t.prototype.isDOM=function(t){var e;return null==t?!1:(e="number"==typeof t.nodeType&&"string"==typeof t.nodeName,"object"==typeof t&&e)},t.prototype.getChildElements=function(t){var e,r,i;for(e=t.childNodes,r=[],i=e.length;i--;)1===e[i].nodeType&&r.unshift(e[i]);return r},t.prototype.delta=function(t,e){var r,i,s,n,o;return n=typeof t,o=typeof e,r="string"===n||"number"===n&&!isNaN(t),i="string"===o||"number"===o&&!isNaN(e),r&&i?(s={},s[t]=e,s):void this.error("delta method expects Strings or Numbers at input but got - "+t+", "+e)},t.prototype.getUniqID=function(){return++this.uniqIDs},t.prototype.parsePath=function(t){var e;return"string"==typeof t?"m"===t.charAt(0).toLowerCase()?(e=document.createElementNS(this.NS,"path"),e.setAttributeNS(null,"d",t),e):document.querySelector(t):t.style?t:void 0},t.prototype.closeEnough=function(t,e,r){return Math.abs(t-e)0&&this.createFilter(),this.path=this.getPath(),this.path.getAttribute("d")?(this.len=this.path.getTotalLength(),this.slicedLen=this.len*(this.props.pathEnd-this.props.pathStart),this.startLen=this.props.pathStart*this.len,this.fill=this.props.fill,null!=this.fill&&(this.container=this.parseEl(this.props.fill.container),this.fillRule=this.props.fill.fillRule||"all",this.getScaler(),null!=this.container)?(this.removeEvent(this.container,"onresize",this.getScaler),this.addEvent(this.container,"onresize",this.getScaler)):void 0):(o.error("Path has no coordinates to work with, aborting"),!0)):(o.error('Missed "el" option. It could be a selector, DOMNode or another module.'),!0)},t.prototype.addEvent=function(t,e,r){return t.addEventListener(e,r,!1)},t.prototype.removeEvent=function(t,e,r){return t.removeEventListener(e,r,!1)},t.prototype.createFilter=function(){var t,e;return t=document.createElement("div"),this.filterID="filter-"+o.getUniqID(),t.innerHTML='',e=t.querySelector("#svg-"+this.filterID),this.filter=e.querySelector("#blur"),this.filterOffset=e.querySelector("#blur-offset"),document.body.insertBefore(e,document.body.firstChild),this.el.style.filter="url(#"+this.filterID+")",this.el.style[o.prefix.css+"filter"]="url(#"+this.filterID+")"},t.prototype.parseEl=function(t){return"string"==typeof t?document.querySelector(t):t instanceof HTMLElement?t:null!=t.setProp?(this.isModule=!0,t):void 0},t.prototype.getPath=function(){var t;return t=o.parsePath(this.props.path),t?t:this.props.path.x||this.props.path.y?this.curveToPath({start:{x:0,y:0},shift:{x:this.props.path.x||0,y:this.props.path.y||0},curvature:{x:this.props.curvature.x||this.defaults.curvature.x,y:this.props.curvature.y||this.defaults.curvature.y}}):void 0},t.prototype.getScaler=function(){var t,e,r;switch(this.cSize={width:this.container.offsetWidth||0,height:this.container.offsetHeight||0},r=this.path.getPointAtLength(0),t=this.path.getPointAtLength(this.len),e={},this.scaler={},e.width=t.x>=r.x?t.x-r.x:r.x-t.x,e.height=t.y>=r.y?t.y-r.y:r.y-t.y,this.fillRule){case"all":return this.calcWidth(e),this.calcHeight(e);case"width":return this.calcWidth(e),this.scaler.y=this.scaler.x;case"height":return this.calcHeight(e),this.scaler.x=this.scaler.y}},t.prototype.calcWidth=function(t){return this.scaler.x=this.cSize.width/t.width,!isFinite(this.scaler.x)&&(this.scaler.x=1)},t.prototype.calcHeight=function(t){return this.scaler.y=this.cSize.height/t.height,!isFinite(this.scaler.y)&&(this.scaler.y=1)},t.prototype.run=function(t){var e,r,i;if(t){e=this.history[0];for(r in t)i=t[r],o.callbacksMap[r]||o.tweenOptionMap[r]?(o.warn('the property "'+r+'" property can not be overridden on run yet'),delete t[r]):this.history[0][r]=i;this.tuneOptions(t)}return this.startTween()},t.prototype.createTween=function(){return this.tween=new n({duration:this.props.duration,delay:this.props.delay,yoyo:this.props.yoyo,repeat:this.props.repeat,easing:this.props.easing,onStart:function(t){return function(){var e;return null!=(e=t.props.onStart)?e.apply(t):void 0}}(this),onComplete:function(t){return function(){var e;return t.props.motionBlur&&t.setBlur({blur:{x:0,y:0},offset:{x:0,y:0}}),null!=(e=t.props.onComplete)?e.apply(t):void 0; 8 | 9 | }}(this),onUpdate:function(t){return function(e){return t.setProgress(e)}}(this),onFirstUpdateBackward:function(t){return function(){return t.history.length>1&&t.tuneOptions(t.history[0])}}(this)}),this.timeline=new s,this.timeline.add(this.tween),!this.props.isRunLess&&this.startTween(),this.props.isPresetPosition&&this.setProgress(0,!0)},t.prototype.startTween=function(){return setTimeout(function(t){return function(){var e;return null!=(e=t.timeline)?e.start():void 0}}(this),1)},t.prototype.setProgress=function(t,e){var r,i,s,n;return r=this.startLen+(this.props.isReverse?(1-t)*this.slicedLen:t*this.slicedLen),i=this.path.getPointAtLength(r),s=i.x+this.props.offsetX,n=i.y+this.props.offsetY,this._getCurrentAngle(i,r,t),this._setTransformOrigin(t),this._setTransform(s,n,t,e),this.props.motionBlur&&this.makeMotionBlur(s,n)},t.prototype.setElPosition=function(t,e,r){var i,s,n,p;return n=0!==this.angle?"rotate("+this.angle+"deg)":"",s=this.props.isCompositeLayer&&o.is3d,i=s?"translateZ(0)":"",p="translate("+t+"px,"+e+"px) "+n+" "+i,o.setPrefixedStyle(this.el,"transform",p)},t.prototype.setModulePosition=function(t,e){return this.el.setProp({shiftX:t+"px",shiftY:e+"px",angle:this.angle}),this.el.draw()},t.prototype._getCurrentAngle=function(t,e,r){var i,s,n,p,a;return s="function"==typeof this.props.transformOrigin,this.props.isAngle||null!=this.props.angleOffset||s?(n=this.path.getPointAtLength(e-1),p=t.y-n.y,a=t.x-n.x,i=Math.atan(p/a),!isFinite(i)&&(i=0),this.angle=i*o.RAD_TO_DEG,"function"!=typeof this.props.angleOffset?this.angle+=this.props.angleOffset||0:this.angle=this.props.angleOffset.call(this,this.angle,r)):this.angle=0},t.prototype._setTransform=function(t,e,r,i){var s;return this.scaler&&(t*=this.scaler.x,e*=this.scaler.y),s=null,i||(s="function"==typeof this.onUpdate?this.onUpdate(r,{x:t,y:e,angle:this.angle}):void 0),this.isModule?this.setModulePosition(t,e):"string"!=typeof s?this.setElPosition(t,e,r):o.setPrefixedStyle(this.el,"transform",s)},t.prototype._setTransformOrigin=function(t){var e,r;return this.props.transformOrigin?(e="function"==typeof this.props.transformOrigin,r=e?this.props.transformOrigin(this.angle,t):this.props.transformOrigin,o.setPrefixedStyle(this.el,"transform-origin",r)):void 0},t.prototype.makeMotionBlur=function(t,e){var r,i,s,n,p,a,h;return h=0,p=1,a=1,null==this.prevCoords.x||null==this.prevCoords.y?(this.speedX=0,this.speedY=0):(s=t-this.prevCoords.x,n=e-this.prevCoords.y,s>0&&(p=-1),0>p&&(a=-1),this.speedX=Math.abs(s),this.speedY=Math.abs(n),h=Math.atan(n/s)*(180/Math.PI)+90),r=h-this.angle,i=this.angToCoords(r),this.blurX=o.clamp(this.speedX/16*this.props.motionBlur,0,1),this.blurY=o.clamp(this.speedY/16*this.props.motionBlur,0,1),this.setBlur({blur:{x:3*this.blurX*this.blurAmount*Math.abs(i.x),y:3*this.blurY*this.blurAmount*Math.abs(i.y)},offset:{x:3*p*this.blurX*i.x*this.blurAmount,y:3*a*this.blurY*i.y*this.blurAmount}}),this.prevCoords.x=t,this.prevCoords.y=e},t.prototype.setBlur=function(t){return this.isMotionBlurReset?void 0:(this.filter.setAttribute("stdDeviation",t.blur.x+","+t.blur.y),this.filterOffset.setAttribute("dx",t.offset.x),this.filterOffset.setAttribute("dy",t.offset.y))},t.prototype.extendDefaults=function(t){var e,r,i;r=[];for(e in t)i=t[e],r.push(this[e]=i);return r},t.prototype.extendOptions=function(t){var e,r,i;r=[];for(e in t)i=t[e],r.push(this.props[e]=i);return r},t.prototype.then=function(t){var e,r,i,s,p;s=this.history[this.history.length-1],i={};for(r in s)p=s[r],!o.callbacksMap[r]&&!o.tweenOptionMap[r]||"duration"===r?null==t[r]&&(t[r]=p):null==t[r]&&(t[r]=void 0),o.tweenOptionMap[r]&&(i[r]="duration"!==r?t[r]:null!=t[r]?t[r]:s[r]);return this.history.push(t),e=this,i.onUpdate=function(t){return function(e){return t.setProgress(e)}}(this),i.onStart=function(t){return function(){var e;return null!=(e=t.props.onStart)?e.apply(t):void 0}}(this),i.onComplete=function(t){return function(){var e;return null!=(e=t.props.onComplete)?e.apply(t):void 0}}(this),i.onFirstUpdate=function(){return e.tuneOptions(e.history[this.index])},i.isChained=!t.delay,this.timeline.append(new n(i)),this},t.prototype.tuneOptions=function(t){return this.extendOptions(t),this.postVars()},t.prototype.angToCoords=function(t){var e,r,i;return t%=360,e=(t-90)*Math.PI/180,r=Math.cos(e),i=Math.sin(e),r=0>r?Math.max(r,-.7):Math.min(r,.7),i=0>i?Math.max(i,-.7):Math.min(i,.7),{x:1.428571429*r,y:1.428571429*i}},t}(),e.exports=i},{"./h":6,"./tween/timeline":24,"./tween/tween":25,"./vendor/resize":27}],9:[function(t,e,r){!function(t){var e,r,i;return null==t.performance&&(t.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},null==t.performance.now?(e=(null!=(r=t.performance)&&null!=(i=r.timing)?i.navigationStart:void 0)?performance.timing.navigationStart:Date.now(),t.performance.now=function(){return Date.now()-e}):void 0}(window)},{}],10:[function(t,e,r){!function(){"use strict";var t,e,r,i,s,n,o;for(s=["webkit","moz"],e=0,o=window;en;i=++n)r=p[i],e="%"===r.unit?this.castPercent(r.value):r.value,a+=e+" ";return this.props[t]="0 "===a?a="":a,this.props[t]=a}return"object"==typeof this.props[t]?(a="%"===this.props[t].unit?this.castPercent(this.props[t].value):this.props[t].value,this.props[t]=0===a?a="":a):void 0},t.prototype.castPercent=function(t){return t*(this.props.length/100)},t.prototype.setAttrsIfChanged=function(t,e){var r,i,s,n;if("object"==typeof t){for(i=Object.keys(t),s=i.length,n=[];s--;)r=i[s],e=t[r],n.push(this.setAttrIfChanged(r,e));return n}return null==e&&(e=this.props[t]),this.setAttrIfChanged(t,e)},t.prototype.setAttrIfChanged=function(t,e){return this.isChanged(t,e)?(this.el.setAttribute(t,e),this.state[t]=e):void 0},t.prototype.isChanged=function(t,e){return null==e&&(e=this.props[t]),this.state[t]!==e},t.prototype.getLength=function(){var t;return null!=(null!=(t=this.el)?t.getTotalLength:void 0)&&this.el.getAttribute("d")?this.el.getTotalLength():2*(null!=this.props.radiusX?this.props.radiusX:this.props.radius)},t}(),e.exports=i},{"../h":6}],12:[function(t,e,r){var i,s,n,o,p,a,h,u,l,c;i=t("./bit"),n=t("./circle"),a=t("./line"),l=t("./zigzag"),u=t("./rect"),h=t("./polygon"),o=t("./cross"),p=t("./equal"),c=t("../h"),s=function(){function t(){}return t.prototype.h=c,t.prototype.map={bit:i,circle:n,line:a,zigzag:l,rect:u,polygon:h,cross:o,equal:p},t.prototype.getBit=function(t){return this.map[t]||this.h.error('no "'+t+'" shape available yet, please choose from this list:',this.map)},t}(),e.exports=new s},{"../h":6,"./bit":11,"./circle":13,"./cross":14,"./equal":15,"./line":16,"./polygon":17,"./rect":18,"./zigzag":19}],13:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;i=t("./bit"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.type="ellipse",e.prototype.draw=function(){var t,r;return t=null!=this.props.radiusX?this.props.radiusX:this.props.radius,r=null!=this.props.radiusY?this.props.radiusY:this.props.radius,this.setAttrsIfChanged({rx:t,ry:r,cx:this.props.x,cy:this.props.y}),e.__super__.draw.apply(this,arguments)},e.prototype.getLength=function(){var t,e;return t=null!=this.props.radiusX?this.props.radiusX:this.props.radius,e=null!=this.props.radiusY?this.props.radiusY:this.props.radius,2*Math.PI*Math.sqrt((Math.pow(t,2)+Math.pow(e,2))/2)},e}(i),e.exports=s},{"./bit":11}],14:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;i=t("./bit"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.type="path",e.prototype.draw=function(){var t,r,i,s,n,o,p,a,h;return e.__super__.draw.apply(this,arguments),s=null!=this.props.radiusX?this.props.radiusX:this.props.radius,n=null!=this.props.radiusY?this.props.radiusY:this.props.radius,o=this.props.x-s,p=this.props.x+s,r="M"+o+","+this.props.y+" L"+p+","+this.props.y,a=this.props.y-n,h=this.props.y+n,i="M"+this.props.x+","+a+" L"+this.props.x+","+h,t=r+" "+i,this.setAttr({d:t})},e.prototype.getLength=function(){var t,e;return t=null!=this.props.radiusX?this.props.radiusX:this.props.radius,e=null!=this.props.radiusY?this.props.radiusY:this.props.radius,2*(t+e)},e}(i),e.exports=s},{"./bit":11}],15:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;i=t("./bit"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.type="path",e.prototype.ratio=1.43,e.prototype.draw=function(){var t,r,i,s,n,o,p,a,h,u,l;if(e.__super__.draw.apply(this,arguments),this.props.points){for(s=null!=this.props.radiusX?this.props.radiusX:this.props.radius,n=null!=this.props.radiusY?this.props.radiusY:this.props.radius,p=this.props.x-s,a=this.props.x+s,t="",l=2*n/(this.props.points-1),u=this.props.y-n,r=i=0,o=this.props.points;o>=0?o>i:i>o;r=o>=0?++i:--i)h=""+(r*l+u),t+="M"+p+", "+h+" L"+a+", "+h+" ";return this.setAttr({d:t})}},e.prototype.getLength=function(){return 2*(null!=this.props.radiusX?this.props.radiusX:this.props.radius)},e}(i),e.exports=s},{"./bit":11}],16:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;i=t("./bit"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.draw=function(){var t;return t=null!=this.props.radiusX?this.props.radiusX:this.props.radius,this.setAttrsIfChanged({x1:this.props.x-t,x2:this.props.x+t,y1:this.props.y,y2:this.props.y}),e.__super__.draw.apply(this,arguments)},e}(i),e.exports=s},{"./bit":11}],17:[function(t,e,r){var i,s,n,o=function(t,e){function r(){this.constructor=t}for(var i in e)p.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},p={}.hasOwnProperty;i=t("./bit"),n=t("../h"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return o(e,t),e.prototype.type="path",e.prototype.draw=function(){return this.drawShape(),e.__super__.draw.apply(this,arguments)},e.prototype.drawShape=function(){var t,e,r,i,s,o,p,a,h,u;for(u=360/this.props.points,this.radialPoints=[],r=i=0,a=this.props.points;a>=0?a>i:i>a;r=a>=0?++i:--i)this.radialPoints.push(n.getRadialPoint({radius:this.props.radius,radiusX:this.props.radiusX,radiusY:this.props.radiusY,angle:r*u,center:{x:this.props.x,y:this.props.y}}));for(e="",h=this.radialPoints,r=s=0,o=h.length;o>s;r=++s)p=h[r],t=0===r?"M":"L",e+=""+t+p.x.toFixed(4)+","+p.y.toFixed(4)+" ";return this.setAttr({d:e+="z"})},e.prototype.getLength=function(){return this.el.getTotalLength()},e}(i),e.exports=s},{"../h":6,"./bit":11}],18:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;i=t("./bit"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.type="rect",e.prototype.ratio=1.43,e.prototype.draw=function(){var t,r;return e.__super__.draw.apply(this,arguments),t=null!=this.props.radiusX?this.props.radiusX:this.props.radius,r=null!=this.props.radiusY?this.props.radiusY:this.props.radius,this.setAttrsIfChanged({width:2*t,height:2*r,x:this.props.x-t,y:this.props.y-r})},e.prototype.getLength=function(){var t,e;return t=null!=this.props.radiusX?this.props.radiusX:this.props.radius,e=null!=this.props.radiusY?this.props.radiusY:this.props.radius,2*t+2*e},e}(i),e.exports=s},{"./bit":11}],19:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;i=t("./bit"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.type="path",e.prototype.ratio=1.43,e.prototype.draw=function(){var t,r,i,s,n,o,p,a,h,u,l,c,d,f,y,g;if(this.props.points){for(h=null!=this.props.radiusX?this.props.radiusX:this.props.radius,u=null!=this.props.radiusY?this.props.radiusY:this.props.radius,a="",c=2*h/this.props.points,d=2*u/this.props.points,f=this.props["stroke-width"],y=this.props.x-h,g=this.props.y-u,r=p=l=this.props.points;0>=l?0>p:p>0;r=0>=l?++p:--p)i=y+r*c+f,n=g+r*d+f,s=y+(r-1)*c+f,o=g+(r-1)*d+f,t=r===this.props.points?"M":"L",a+=""+t+i+","+n+" l0, -"+d+" l-"+c+", 0";return this.setAttr({d:a}),e.__super__.draw.apply(this,arguments)}},e}(i),e.exports=s},{"./bit":11}],20:[function(t,e,r){var i,s,n,o;o=t("./h"),n=t("./tween/tween"),s=t("./tween/timeline"),i=function(){function t(t){return this.o=null!=t?t:{},null==this.o.el?o.error('No "el" option specified, aborting'):(this._vars(),this._extendDefaults(),this._parseFrames(),this._frames.length<=2&&o.warn("Spriter: only "+this._frames.length+" frames found"),this._frames.length<1&&o.error("Spriter: there is no frames to animate, aborting"),void this._createTween())}return t.prototype._defaults={duration:500,delay:0,easing:"linear.none",repeat:0,yoyo:!1,isRunLess:!1,isShowEnd:!1,onStart:null,onUpdate:null,onComplete:null},t.prototype._vars=function(){return this._props=o.cloneObj(this.o),this.el=this.o.el,this._frames=[]},t.prototype.run=function(t){return this._timeline.start()},t.prototype._extendDefaults=function(){return o.extend(this._props,this._defaults)},t.prototype._parseFrames=function(){var t,e,r,i,s;for(this._frames=Array.prototype.slice.call(this.el.children,0),s=this._frames,e=r=0,i=s.length;i>r;e=++r)t=s[e],t.style.opacity=0;return this._frameStep=1/this._frames.length},t.prototype._createTween=function(){return this._tween=new n({duration:this._props.duration,delay:this._props.delay,yoyo:this._props.yoyo,repeat:this._props.repeat,easing:this._props.easing,onStart:function(t){return function(){var e;return"function"==typeof(e=t._props).onStart?e.onStart():void 0}}(this),onComplete:function(t){return function(){var e;return"function"==typeof(e=t._props).onComplete?e.onComplete():void 0}}(this),onUpdate:function(t){return function(e){return t._setProgress(e)}}(this)}),this._timeline=new s,this._timeline.add(this._tween),!this._props.isRunLess&&this._startTween()},t.prototype._startTween=function(){return setTimeout(function(t){return function(){return t._timeline.start()}}(this),1)},t.prototype._setProgress=function(t){var e,r,i,s,n;return i=Math.floor(t/this._frameStep),this._prevFrame!==this._frames[i]&&(null!=(s=this._prevFrame)&&(s.style.opacity=0),r=1===t&&this._props.isShowEnd?i-1:i,null!=(n=this._frames[r])&&(n.style.opacity=1),this._prevFrame=this._frames[i]),"function"==typeof(e=this._props).onUpdate?e.onUpdate(t):void 0},t}(),e.exports=i},{"./h":6,"./tween/timeline":24,"./tween/tween":25}],21:[function(t,e,r){var i,s,n,o;o=t("./h"),n=t("./tween/timeline"),i=function(){function t(t,e){this.init(t,e)}return t.prototype._getOptionByMod=function(t,e,r){var i,s;return i=r[t],i+""=="[object NodeList]"&&(i=Array.prototype.slice.call(i,0)),i+""=="[object HTMLCollection]"&&(i=Array.prototype.slice.call(i,0)),s=o.isArray(i)?i[e%i.length]:i,o.parseIfStagger(s,e)},t.prototype._getOptionByIndex=function(t,e){var r,i,s;i={};for(r in e)s=e[r],i[r]=this._getOptionByMod(r,t,e);return i},t.prototype._getChildQuantity=function(t,e){var r,i;return"number"==typeof t?t:(i=e[t],o.isArray(i)?i.length:i+""=="[object NodeList]"?i.length:i+""=="[object HTMLCollection]"?(r=Array.prototype.slice.call(i,0),r.length):i instanceof HTMLElement?1:"string"==typeof i?1:void 0)},t.prototype._createTimeline=function(t){return null==t&&(t={}),this.timeline=new n({onStart:t.onStaggerStart,onUpdate:t.onStaggerUpdate,onComplete:t.onStaggerComplete,onReverseComplete:t.onStaggerReverseComplete,delay:t.moduleDelay})},t.prototype.init=function(t,e){var r,i,s,n,o,p;for(r=this._getChildQuantity(t.quantifier||"el",t),this._createTimeline(t),this.childModules=[],i=s=0,p=r;p>=0?p>s:s>p;i=p>=0?++s:--s)o=this._getOptionByIndex(i,t),o.isRunLess=!0,n=new e(o),this.childModules.push(n),this.timeline.add(n);return this},t.prototype.run=function(){return this.timeline.start()},t}(),s=function(){function t(t){var e;return e=t,function(t){return new i(t,e)}}return t}(),e.exports=s},{"./h":6,"./tween/timeline":24}],22:[function(t,e,r){var i,s,n=function(t,e){function r(){this.constructor=t}for(var i in e)o.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},o={}.hasOwnProperty;s=t("./transit"),i=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return n(e,t),e.prototype.skipPropsDelta={x:1,y:1},e.prototype.vars=function(){return e.__super__.vars.apply(this,arguments),!this.o.isSwirlLess&&this.generateSwirl()},e.prototype.extendDefaults=function(){var t,r,i,s;return e.__super__.extendDefaults.apply(this,arguments),i=this.getPosValue("x"),s=this.getPosValue("y"),t=90+Math.atan(s.delta/i.delta||0)*(180/Math.PI),i.delta<0&&(t+=180),this.positionDelta={radius:Math.sqrt(i.delta*i.delta+s.delta*s.delta),angle:t,x:i,y:s},null==(r=this.o).radiusScale&&(r.radiusScale=1),this.props.angleShift=this.h.parseIfRand(this.o.angleShift||0),this.props.radiusScale=this.h.parseIfRand(this.o.radiusScale)},e.prototype.getPosValue=function(t){var e,r;return e=this.o[t],e&&"object"==typeof e?(r=this.h.parseDelta(t,e),{start:r.start.value,end:r.end.value,delta:r.delta,units:r.end.unit}):(r=parseFloat(e||this.defaults[t]),{start:r,end:r,delta:0,units:"px"})},e.prototype.setProgress=function(t){var r,i,s,n;return r=this.positionDelta.angle,this.o.isSwirl&&(r+=this.getSwirl(t)),i=this.h.getRadialPoint({angle:r,radius:this.positionDelta.radius*t*this.props.radiusScale,center:{x:this.positionDelta.x.start,y:this.positionDelta.y.start}}),s=i.x.toFixed(4),n=i.y.toFixed(4),this.props.x=this.o.ctx?s:s+this.positionDelta.x.units,this.props.y=this.o.ctx?n:n+this.positionDelta.y.units,e.__super__.setProgress.apply(this,arguments)},e.prototype.generateSwirl=function(){var t,e;return this.props.signRand=Math.round(this.h.rand(0,1))?-1:1,null==(t=this.o).swirlSize&&(t.swirlSize=10),null==(e=this.o).swirlFrequency&&(e.swirlFrequency=3),this.props.swirlSize=this.h.parseIfRand(this.o.swirlSize),this.props.swirlFrequency=this.h.parseIfRand(this.o.swirlFrequency)},e.prototype.getSwirl=function(t){return this.props.signRand*this.props.swirlSize*Math.sin(this.props.swirlFrequency*t)},e}(s),e.exports=i},{"./transit":23}],23:[function(t,e,r){var i,s,n,o,p,a=function(t,e){function r(){this.constructor=t}for(var i in e)h.call(e,i)&&(t[i]=e[i]);return r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype,t},h={}.hasOwnProperty;p=t("./h"),o=t("./shapes/bitsMap"),n=t("./tween/tween"),i=t("./tween/timeline"),s=function(t){function e(){return e.__super__.constructor.apply(this,arguments)}return a(e,t),e.prototype.progress=0,e.prototype.defaults={strokeWidth:2,strokeOpacity:1,strokeDasharray:0,strokeDashoffset:0,stroke:"transparent",fill:"deeppink",fillOpacity:"transparent",strokeLinecap:"",points:3,x:0,y:0,shiftX:0,shiftY:0,opacity:1,radius:{0:50},radiusX:void 0,radiusY:void 0,angle:0,size:null,sizeGap:0,onStart:null,onComplete:null,onUpdate:null,duration:500,delay:0,repeat:0,yoyo:!1,easing:"Linear.None"},e.prototype.vars=function(){var t;return null==this.h&&(this.h=p),null==this.lastSet&&(this.lastSet={}),this.index=this.o.index||0,null==this.runCount&&(this.runCount=0),this.extendDefaults(),t=this.h.cloneObj(this.o),this.h.extend(t,this.defaults),this.history=[t],this.isForeign=!!this.o.ctx,this.isForeignBit=!!this.o.bit,this.timelines=[]},e.prototype.render=function(){return this.isRendered||(this.isForeign||this.isForeignBit?(this.ctx=this.o.ctx,this.createBit(),this.calcSize()):(this.ctx=document.createElementNS(this.ns,"svg"),this.ctx.style.position="absolute",this.ctx.style.width="100%",this.ctx.style.height="100%",this.createBit(),this.calcSize(),this.el=document.createElement("div"),this.el.appendChild(this.ctx),(this.o.parent||document.body).appendChild(this.el)),this.isRendered=!0),this.setElStyles(),this.setProgress(0,!0),this.createTween(),this},e.prototype.setElStyles=function(){var t,e,r;return this.isForeign||(r=this.props.size+"px",t=-this.props.size/2+"px",this.el.style.position="absolute",this.el.style.top=this.props.y,this.el.style.left=this.props.x,this.el.style.width=r,this.el.style.height=r,this.el.style["margin-left"]=t,this.el.style["margin-top"]=t,this.el.style.marginLeft=t,this.el.style.marginTop=t),null!=(e=this.el)&&(e.style.opacity=this.props.opacity),this.o.isShowInit?this.show():this.hide()},e.prototype.show=function(){return this.isShown||null==this.el?void 0:(this.el.style.display="block",this.isShown=!0)},e.prototype.hide=function(){return this.isShown!==!1&&null!=this.el?(this.el.style.display="none",this.isShown=!1):void 0},e.prototype.draw=function(){return this.bit.setProp({x:this.origin.x,y:this.origin.y,stroke:this.props.stroke,"stroke-width":this.props.strokeWidth,"stroke-opacity":this.props.strokeOpacity,"stroke-dasharray":this.props.strokeDasharray,"stroke-dashoffset":this.props.strokeDashoffset,"stroke-linecap":this.props.strokeLinecap,fill:this.props.fill,"fill-opacity":this.props.fillOpacity,radius:this.props.radius,radiusX:this.props.radiusX,radiusY:this.props.radiusY,points:this.props.points,transform:this.calcTransform()}),this.bit.draw(),this.drawEl()},e.prototype.drawEl=function(){return null==this.el?!0:(this.isPropChanged("opacity")&&(this.el.style.opacity=this.props.opacity),!this.isForeign&&(this.isPropChanged("x")&&(this.el.style.left=this.props.x),this.isPropChanged("y")&&(this.el.style.top=this.props.y),this.isNeedsTransform())?this.h.setPrefixedStyle(this.el,"transform",this.fillTransform()):void 0)},e.prototype.fillTransform=function(){return"translate("+this.props.shiftX+", "+this.props.shiftY+")"},e.prototype.isNeedsTransform=function(){var t,e;return t=this.isPropChanged("shiftX"),e=this.isPropChanged("shiftY"),t||e},e.prototype.isPropChanged=function(t){var e;return null==(e=this.lastSet)[t]&&(e[t]={}),this.lastSet[t].value!==this.props[t]?(this.lastSet[t].value=this.props[t],!0):!1},e.prototype.calcTransform=function(){return this.props.transform="rotate("+this.props.angle+","+this.origin.x+","+this.origin.y+")"},e.prototype.calcSize=function(){var t,e,r,i;if(!this.o.size){switch(r=this.calcMaxRadius(),e=this.deltas.strokeWidth,i=null!=e?Math.max(Math.abs(e.start),Math.abs(e.end)):this.props.strokeWidth,this.props.size=2*r+2*i,"function"==typeof(t=this.props.easing).toLowerCase?t.toLowerCase():void 0){case"elastic.out":case"elastic.inout":this.props.size*=1.25;break;case"back.out":case"back.inout":this.props.size*=1.1}return this.props.size*=this.bit.ratio,this.props.size+=2*this.props.sizeGap,this.props.center=this.props.size/2}},e.prototype.calcMaxRadius=function(){var t,e,r;return t=this.getRadiusSize({key:"radius"}),e=this.getRadiusSize({key:"radiusX",fallback:t}),r=this.getRadiusSize({key:"radiusY",fallback:t}),Math.max(e,r)},e.prototype.getRadiusSize=function(t){return null!=this.deltas[t.key]?Math.max(Math.abs(this.deltas[t.key].end),Math.abs(this.deltas[t.key].start)):null!=this.props[t.key]?parseFloat(this.props[t.key]):t.fallback||0},e.prototype.createBit=function(){var t;return t=o.getBit(this.o.type||this.type),this.bit=new t({ctx:this.ctx,el:this.o.bit,isDrawLess:!0}),this.isForeign||this.isForeignBit?this.el=this.bit.el:void 0},e.prototype.setProgress=function(t,e){return e||(this.show(),"function"==typeof this.onUpdate&&this.onUpdate(t)),this.progress=0>t||!t?0:t>1?1:t,this.calcCurrentProps(t),this.calcOrigin(),this.draw(t),this},e.prototype.calcCurrentProps=function(t){var e,r,i,s,n,o,p,a,h,u,l,c,d,f;for(a=Object.keys(this.deltas),h=a.length,l=[];h--;)p=a[h],f=this.deltas[p],l.push(this.props[p]=function(){var p,a,h;switch(f.type){case"array":for(c=[],h=f.delta,n=p=0,a=h.length;a>p;n=++p)o=h[n],i=f.start[n].value+o.value*this.progress,c.push({value:i,unit:o.unit});return c;case"number":return f.start+f.delta*t;case"unit":return d=f.end.unit,""+(f.start.value+f.delta*t)+d;case"color":return u=parseInt(f.start.r+f.delta.r*t,10),s=parseInt(f.start.g+f.delta.g*t,10),r=parseInt(f.start.b+f.delta.b*t,10),e=parseInt(f.start.a+f.delta.a*t,10),"rgba("+u+","+s+","+r+","+e+")"}}.call(this));return l},e.prototype.calcOrigin=function(){return this.origin=this.o.ctx?{x:parseFloat(this.props.x),y:parseFloat(this.props.y)}:{x:this.props.center,y:this.props.center}},e.prototype.extendDefaults=function(t){var e,r,i,s,n,o,p,a,h,u,l,c,d,f;for(null==this.props&&(this.props={}),i=t||this.defaults,null==t&&(this.deltas={}),p=Object.keys(i),a=p.length;a--;)if(o=p[a],r=i[o],null!=(c=this.skipProps)?!c[o]:!0)if(t?(this.o[o]=r,u=r,delete this.deltas[o]):u=null!=this.o[o]?this.o[o]:r,this.isDelta(u))this.isSkipDelta||this.getDelta(o,u);else if("string"==typeof u&&u.match(/stagger/)&&(u=this.h.parseStagger(u,this.index)),"string"==typeof u&&u.match(/rand/)&&(u=this.h.parseRand(u)),this.props[o]=u,"radius"===o&&(null==this.o.radiusX&&(this.props.radiusX=u),null==this.o.radiusY&&(this.props.radiusY=u)),this.h.posPropsMap[o]&&(this.props[o]=this.h.parseUnit(this.props[o]).string),this.h.strokeDashPropsMap[o]){switch(l=this.props[o],f=[],typeof l){case"number":f.push(this.h.parseUnit(l));break;case"string":for(e=this.props[o].split(" "),s=n=0,h=e.length;h>n;s=++n)d=e[s],f.push(this.h.parseUnit(d))}this.props[o]=f}return this.onUpdate=this.props.onUpdate},e.prototype.isDelta=function(t){var e;return e=null!=t&&"object"==typeof t,e=e&&!t.unit,!(!e||this.h.isArray(t)||p.isDOM(t))},e.prototype.getDelta=function(t,e){var r,i;return"x"!==t&&"y"!==t||this.o.ctx||this.h.warn("Consider to animate shiftX/shiftY properties instead of x/y, as it would be much more performant",e),(null!=(i=this.skipPropsDelta)?i[t]:0)?void 0:(r=this.h.parseDelta(t,e,this.defaults[t]),null!=r.type&&(this.deltas[t]=r),this.props[t]=r.start)},e.prototype.mergeThenOptions=function(t,e){var r,i,s,n,o,p,a,h,u;p={};for(n in t)u=t[n],p[n]=!this.h.tweenOptionMap[n]&&!this.h.callbacksMap[n]||"duration"===n?u:"easing"===n?"":void 0;for(o=Object.keys(e),i=o.length;i--;)n=o[i],r=e[n],s="function"==typeof r,this.h.tweenOptionMap[n]||"object"==typeof r||s?p[n]=null!=r?r:t[n]:(a=t[n],null==a&&(a=this.defaults[n]),"radiusX"!==n&&"radiusY"!==n||null!=a||(a=t.radius),"object"==typeof a&&null!=a&&(h=Object.keys(a),a=a[h[0]]),null!=r&&(p[n]={},p[n][a]=r));return p},e.prototype.then=function(t){var e,r,i,s,o,p;if(null!=t&&Object.keys(t)){for(o=this.mergeThenOptions(this.history[this.history.length-1],t),this.history.push(o),i=Object.keys(this.h.tweenOptionMap),e=i.length,p={};e--;)p[i[e]]=o[i[e]];return r=this,s=r.history.length,function(e){return function(i){return p.onUpdate=function(t){return e.setProgress(t)},p.onStart=function(){var t;return null!=(t=e.props.onStart)?t.apply(e):void 0},p.onComplete=function(){var t;return null!=(t=e.props.onComplete)?t.apply(e):void 0},p.onFirstUpdate=function(){return r.tuneOptions(r.history[this.index])},p.isChained=!t.delay,e.timeline.append(new n(p))}}(this)(s),this}},e.prototype.tuneOptions=function(t){return this.extendDefaults(t),this.calcSize(),this.setElStyles()},e.prototype.createTween=function(){var t;return t=this,this.createTimeline(),this.timeline=new i({onComplete:function(t){return function(){var e;return!t.o.isShowEnd&&t.hide(),null!=(e=t.props.onComplete)?e.apply(t):void 0}}(this)}),this.timeline.add(this.tween),!this.o.isRunLess&&this.startTween()},e.prototype.createTimeline=function(){return this.tween=new n({duration:this.props.duration,delay:this.props.delay,repeat:this.props.repeat,yoyo:this.props.yoyo,easing:this.props.easing,onUpdate:function(t){return function(e){return t.setProgress(e)}}(this),onStart:function(t){return function(){var e;return t.show(),null!=(e=t.props.onStart)?e.apply(t):void 0}}(this),onFirstUpdateBackward:function(t){return function(){return t.history.length>1&&t.tuneOptions(t.history[0])}}(this),onReverseComplete:function(t){return function(){var e;return!t.o.isShowInit&&t.hide(),null!=(e=t.props.onReverseComplete)?e.apply(t):void 0}}(this)})},e.prototype.run=function(t){var e,r,i;if(this.runCount++,t&&Object.keys(t).length){if(this.history.length>1)for(r=Object.keys(t),i=r.length;i--;)e=r[i],(p.callbacksMap[e]||p.tweenOptionMap[e])&&(p.warn('the property "'+e+'" property can not be overridden on run with "then" chain yet'),delete t[e]);this.transformHistory(t),this.tuneNewOption(t),t=this.h.cloneObj(this.o),this.h.extend(t,this.defaults),this.history[0]=t,!this.o.isDrawLess&&this.setProgress(0,!0)}else this.tuneNewOption(this.history[0]);return this.startTween()},e.prototype.transformHistory=function(t){var e,r,i,s,n,o,p,a,h,u,l,c;for(n=Object.keys(t),r=-1,o=n.length,e=this.history.length,a=[];++re;t=++e)r=s[t],n[r]=this.props[r];return n.onStart=this.props.onStart,n.onComplete=this.props.onComplete,this.tween.setProp(n)},e.prototype.getBitLength=function(){return this.props.bitLength=this.bit.getLength(),this.props.bitLength},e}(o.map.bit),e.exports=s},{"./h":6,"./shapes/bitsMap":12,"./tween/timeline":24,"./tween/tween":25}],24:[function(t,e,r){var i,s,n,o=[].slice;s=t("../h"),n=t("./tweener"),i=function(){function t(t){this.o=null!=t?t:{},this.vars(),this._extendDefaults()}return t.prototype.state="stop",t.prototype.defaults={repeat:0,delay:0},t.prototype.vars=function(){return this.timelines=[],this.props={time:0,repeatTime:0,shiftedRepeatTime:0},this.loop=s.bind(this.loop,this),this.onUpdate=this.o.onUpdate},t.prototype.add=function(){var t;return t=1<=arguments.length?o.call(arguments,0):[],this.pushTimelineArray(t),this},t.prototype.pushTimelineArray=function(t){var e,r,i,n,o;for(n=[],e=r=0,i=t.length;i>r;e=++r)o=t[e],n.push(s.isArray(o)?this.pushTimelineArray(o):this.pushTimeline(o));return n},t.prototype._extendDefaults=function(){var t,e,r,i;e=this.defaults,r=[];for(t in e)i=e[t],r.push(this.props[t]=null!=this.o[t]?this.o[t]:i);return r},t.prototype.setProp=function(t){var e,r;for(e in t)r=t[e],this.props[e]=r;return this.recalcDuration()},t.prototype.pushTimeline=function(e,r){return e.timeline instanceof t&&(e=e.timeline),null!=r&&e.setProp({shiftTime:r}),this.timelines.push(e),this._recalcTimelineDuration(e)},t.prototype.remove=function(t){var e;return e=this.timelines.indexOf(t),-1!==e?this.timelines.splice(e,1):void 0},t.prototype.append=function(){var t,e,r,i,n;for(i=1<=arguments.length?o.call(arguments,0):[],t=e=0,r=i.length;r>e;t=++e)n=i[t],s.isArray(n)?this._appendTimelineArray(n):this.appendTimeline(n,this.timelines.length);return this},t.prototype._appendTimelineArray=function(t){var e,r,i,s;for(e=t.length,s=this.props.repeatTime-this.props.delay,r=this.timelines.length,i=[];e--;)i.push(this.appendTimeline(t[e],r,s));return i},t.prototype.appendTimeline=function(t,e,r){var i;return i=null!=r?r:this.props.time,i+=t.props.shiftTime||0,t.index=e,this.pushTimeline(t,i)},t.prototype.recalcDuration=function(){var t,e;for(t=this.timelines.length,this.props.time=0,this.props.repeatTime=0,this.props.shiftedRepeatTime=0,e=[];t--;)e.push(this._recalcTimelineDuration(this.timelines[t]));return e},t.prototype._recalcTimelineDuration=function(t){var e;return e=t.props.repeatTime+(t.props.shiftTime||0),this.props.time=Math.max(e,this.props.time),this.props.repeatTime=(this.props.time+this.props.delay)*(this.props.repeat+1),this.props.shiftedRepeatTime=this.props.repeatTime+(this.props.shiftTime||0),this.props.shiftedRepeatTime-=this.props.delay},t.prototype.update=function(t,e){return t>this.props.endTime&&(t=this.props.endTime),t===this.props.endTime&&this.isCompleted?!0:(this._updateTimelines(t,e),this._checkCallbacks(t))},t.prototype._updateTimelines=function(t,e){var r,i,s,n,o;if(n=this.props.startTime-this.props.delay,r=(t-n)%(this.props.delay+this.props.time),o=t===this.props.endTime?this.props.endTime:n+r>=this.props.startTime?t>=this.props.endTime?this.props.endTime:n+r:t>this.props.startTime+this.props.time?this.props.startTime+this.props.time:null,null!=o)for(i=-1,s=this.timelines.length-1;i++(this._previousUpdateTime||0)),this.timelines[i].update(o,e);return this._previousUpdateTime=t},t.prototype._checkCallbacks=function(t){var e,r,i;if(this.prevTime!==t)return(!this.prevTime||this.isCompleted&&!this.isStarted)&&(null!=(e=this.o.onStart)&&e.apply(this),this.isStarted=!0,this.isCompleted=!1),t>=this.props.startTime&&tt&&t<=this.props.startTime&&null!=(r=this.o.onReverseComplete)&&r.apply(this),this.prevTime=t,t!==this.props.endTime||this.isCompleted?void 0:("function"==typeof this.onUpdate&&this.onUpdate(1),null!=(i=this.o.onComplete)&&i.apply(this),this.isCompleted=!0,this.isStarted=!1,!0)},t.prototype.start=function(t){return this.setStartTime(t),!t&&(n.add(this),this.state="play"),this},t.prototype.pause=function(){return this.removeFromTweener(),this.state="pause",this},t.prototype.stop=function(){return this.removeFromTweener(),this.setProgress(0),this.state="stop",this},t.prototype.restart=function(){return this.stop(),this.start()},t.prototype.removeFromTweener=function(){return n.remove(this),this},t.prototype.setStartTime=function(t){return this.getDimentions(t),this.startTimelines(this.props.startTime)},t.prototype.startTimelines=function(t){var e,r;for(e=this.timelines.length,null==t&&(t=this.props.startTime),r=[];e--;)r.push(this.timelines[e].start(t));return r},t.prototype.setProgress=function(t){return null==this.props.startTime&&this.setStartTime(),t=s.clamp(t,0,1),this.update(this.props.startTime+t*this.props.repeatTime)},t.prototype.getDimentions=function(t){return null==t&&(t=performance.now()),this.props.startTime=t+this.props.delay+(this.props.shiftTime||0),this.props.endTime=this.props.startTime+this.props.shiftedRepeatTime,this.props.endTime-=this.props.shiftTime||0},t}(),e.exports=i},{"../h":6,"./tweener":26}],25:[function(t,e,r){var i,s,n,o;n=t("../h"),o=t("./tweener"),s=t("../easing/easing"),i=function(){function t(t){this.o=null!=t?t:{},this.extendDefaults(),this.vars()}return t.prototype.defaults={duration:600,delay:0,repeat:0,yoyo:!1,easing:"Linear.None",onStart:null,onComplete:null,onReverseComplete:null,onFirstUpdate:null,onUpdate:null,onFirstUpdateBackward:null,isChained:!1},t.prototype.vars=function(){return this.h=n,this.progress=0,this.prevTime=0,this.calcDimentions()},t.prototype.calcDimentions=function(){return this.props.time=this.props.duration+this.props.delay,this.props.repeatTime=this.props.time*(this.props.repeat+1)},t.prototype.extendDefaults=function(){var t,e,r;this.props={},e=this.defaults;for(t in e)r=e[t],this.props[t]=null!=this.o[t]?this.o[t]:r;return this.props.easing=s.parseEasing(this.o.easing||this.defaults.easing),this.onUpdate=this.props.onUpdate},t.prototype.start=function(t){return this.isCompleted=!1,this.isStarted=!1,null==t&&(t=performance.now()),this.props.startTime=t+this.props.delay+(this.props.shiftTime||0),this.props.endTime=this.props.startTime+this.props.repeatTime-this.props.delay,this},t.prototype.update=function(t,e){var r,i,s,n,o;return t>=this.props.startTime&&t=this.props.endTime&&!this.isCompleted&&this._complete(),t>this.props.endTime&&(this.isFirstUpdate=!1),t>this.props.endTime&&(this.isFirstUpdateBackward=!1)),t=this.props.startTime?(i=(t-this.props.startTime)%(this.props.delay+this.props.duration),s=i/this.props.duration,this.setProgress(this.props.yoyo?e%2===0?s:1-(1===s?0:s):s)):this.setProgress(this.prevTimei;t=++i)r=n[t],null!=r.prototype&&o.push(function(t){var r,i;return r=t.prototype.addEventListener||t.prototype.attachEvent,function(r){var i;return i=function(){var t;return(this!==window||this!==document)&&(t="onresize"===arguments[0]&&!this.isAnyResizeEventInited,t&&e.handleResize({args:arguments,that:this})),r.apply(this,arguments)},t.prototype.addEventListener?t.prototype.addEventListener=i:t.prototype.attachEvent?t.prototype.attachEvent=i:void 0}(r),i=t.prototype.removeEventListener||t.prototype.detachEvent,function(e){var r;return r=function(){return this.isAnyResizeEventInited=!1,this.iframe&&this.removeChild(this.iframe),e.apply(this,arguments)},t.prototype.removeEventListener?t.prototype.removeEventListener=r:t.prototype.detachEvent?t.prototype.detachEvent=wrappedListener:void 0}(i)}(r));return o}.call(this)},t.prototype.handleResize=function(t){var e,r,i,s,n,o,p;return r=t.that,this.timerElements[r.tagName.toLowerCase()]?this.initTimer(r):(i=document.createElement("iframe"),r.appendChild(i),i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.zIndex=-999,i.style.opacity=0,i.style.top=0,i.style.left=0,e=window.getComputedStyle?getComputedStyle(r):r.currentStyle,n=""===r.style.position,o="static"===e.position&&n,s=""===e.position&&""===r.style.position,(o||s)&&(r.style.position="relative"),null!=(p=i.contentWindow)&&(p.onresize=function(t){return function(e){return t.dispatchEvent(r)}}(this)),r.iframe=i),r.isAnyResizeEventInited=!0},t.prototype.initTimer=function(t){var e,r;return r=0,e=0,this.interval=setInterval(function(i){return function(){var s,n;return n=t.offsetWidth,s=t.offsetHeight,n!==r||s!==e?(i.dispatchEvent(t),r=n,e=s):void 0}}(this),this.o.interval||62.5)},t.prototype.dispatchEvent=function(t){var e;return document.createEvent?(e=document.createEvent("HTMLEvents"),e.initEvent("onresize",!1,!1),t.dispatchEvent(e)):document.createEventObject?(e=document.createEventObject(),t.fireEvent("onresize",e)):!1},t.prototype.destroy=function(){var t,e,r,i,s,n,o;for(clearInterval(this.interval),this.interval=null,window.isAnyResizeEventInited=!1,e=this,n=this.allowedProtos,o=[],t=r=0,i=n.length;i>r;t=++r)s=n[t],null!=s.prototype&&o.push(function(t){var e;return e=t.prototype.addEventListener||t.prototype.attachEvent,t.prototype.addEventListener?t.prototype.addEventListener=Element.prototype.addEventListener:t.prototype.attachEvent&&(t.prototype.attachEvent=Element.prototype.attachEvent),t.prototype.removeEventListener?t.prototype.removeEventListener=Element.prototype.removeEventListener:t.prototype.detachEvent?t.prototype.detachEvent=Element.prototype.detachEvent:void 0}(s));return o},t}(),"function"==typeof t&&t.amd?t("any-resize-event",[],function(){return new e}):"object"==typeof r&&"object"==typeof r.exports?r.exports=new e:("undefined"!=typeof window&&null!==window&&(window.AnyResizeEvent=e),"undefined"!=typeof window&&null!==window?window.anyResizeEvent=new e:void 0)}()},{}]},{},[7])(7)}); -------------------------------------------------------------------------------- /js/segment.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * segment - A little JavaScript class (without dependencies) to draw and animate SVG path strokes 3 | * @version v1.0.8 4 | * @link https://github.com/lmgonzalves/segment 5 | * @license MIT 6 | */ 7 | function Segment(i,e,t,n){this.path=i,this.length=i.getTotalLength(),this.path.style.strokeDashoffset=2*this.length,this.begin="undefined"!=typeof e?this.valueOf(e):0,this.end="undefined"!=typeof t?this.valueOf(t):this.length,this.circular="undefined"!==n?n:!1,this.timer=null,this.animationTimer=null,this.draw(this.begin,this.end,0,{circular:this.circular})}!function(){for(var i=0,e=["ms","moz","webkit","o"],t=0;t1?s=1:a.animationTimer=window.requestAnimationFrame(d),a.begin=o+(c-o)*s,a.end=g+(u-g)*s,a.begin=a.begin<0&&!a.circular?0:a.begin,a.begin=a.begin>a.length&&!a.circular?a.length:a.begin,a.end=a.end<0&&!a.circular?0:a.end,a.end=a.end>a.length&&!a.circular?a.length:a.end,a.end-a.begin<=a.length&&a.end-a.begin>0?a.draw(a.begin,a.end,0,{circular:a.circular}):a.circular&&a.end-a.begin>a.length?a.draw(0,a.length,0,{circular:a.circular}):a.draw(a.begin+(a.end-a.begin),a.end-(a.end-a.begin),0,{circular:a.circular}),n>1&&"function"==typeof r?r.call(a):void 0}()}else this.path.style.strokeDasharray=this.strokeDasharray(i,e)},strokeDasharray:function(i,e){if(this.begin=this.valueOf(i),this.end=this.valueOf(e),this.circular){var t=this.begin>this.end||this.begin<0&&this.begin<-1*this.length?parseInt(this.begin/parseInt(this.length)):parseInt(this.end/parseInt(this.length));0!==t&&(this.begin=this.begin-this.length*t,this.end=this.end-this.length*t)}if(this.end>this.length){var n=this.end-this.length;return[this.length,this.length,n,this.begin-n,this.end-this.begin].join(" ")}if(this.begin<0){var s=this.length+this.begin;return this.end<0?[this.length,this.length+this.begin,this.end-this.begin,s-this.end,this.end-this.begin,this.length].join(" "):[this.length,this.length+this.begin,this.end-this.begin,s-this.end,this.length].join(" ")}return[this.length,this.length+this.begin,this.end-this.begin].join(" ")},valueOf:function(i){var e=parseFloat(i);if(("string"==typeof i||i instanceof String)&&~i.indexOf("%")){var t;~i.indexOf("+")?(t=i.split("+"),e=this.percent(t[0])+parseFloat(t[1])):~i.indexOf("-")?(t=i.split("-"),e=3===t.length?-this.percent(t[1])-parseFloat(t[2]):t[0]?this.percent(t[0])-parseFloat(t[1]):-this.percent(t[1])):e=this.percent(i)}return e},stop:function(){window.cancelAnimationFrame(this.animationTimer),this.animationTimer=null,clearTimeout(this.timer),this.timer=null},percent:function(i){return parseFloat(i)/100*this.length}}; --------------------------------------------------------------------------------