Skip to content

Instantly share code, notes, and snippets.

@alexjlockwood

alexjlockwood/suntomoon.shapeshifter

Created April 12, 2018 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexjlockwood/b4ba1c007de0c7c2fc0e164ac0aa7bca to your computer and use it in GitHub Desktop.
Save alexjlockwood/b4ba1c007de0c7c2fc0e164ac0aa7bca to your computer and use it in GitHub Desktop.
Download ZIP
A sun-to-moon path morphing animation. Inspired by Mark Allison's Chicago Roboto talk. Open in https://shapeshifter.design ("File" --> "Open" --> "suntomoon.shapeshifter")
Raw
suntomoon.shapeshifter
{
"version": 1,
"layers": {
"vectorLayer": {
"id": "221",
"name": "vector",
"type": "vector",
"width": 1000,
"height": 1000,
"children": [
{
"id": "540206",
"name": "group",
"type": "group",
"pivotX": 500,
"pivotY": 500,
"children": [
{
"id": "223",
"name": "path_1",
"type": "path",
"pathData": "M 281.667 201.667 L 206.667 127.083 L 147.917 185.833 L 222.5 260.417 L 281.667 201.667 Z M 166.667 437.5 L 41.667 437.5 L 41.667 520.833 L 166.667 520.833 L 166.667 437.5 Z M 541.667 22.917 L 458.333 22.917 L 458.333 145.833 L 541.667 145.833 L 541.667 22.917 Z M 852.083 185.833 L 793.333 127.083 L 718.75 201.667 L 777.5 260.417 L 852.083 185.833 Z M 718.333 756.667 L 792.917 831.667 L 851.667 772.917 L 776.667 698.333 L 718.333 756.667 Z M 833.333 437.5 L 833.333 520.833 L 958.333 520.833 L 958.333 437.5 L 833.333 437.5 Z M 500 229.167 C 362.083 229.167 250 341.25 250 479.167 C 250 617.083 362.083 729.167 500 729.167 C 637.917 729.167 750 617.083 750 479.167 C 750 341.25 637.917 229.167 500 229.167 Z M 458.333 935.417 L 541.667 935.417 L 541.667 812.5 L 458.333 812.5 L 458.333 935.417 Z M 147.917 772.5 L 206.667 831.25 L 281.25 756.25 L 222.5 697.5 L 147.917 772.5 Z",
"fillColor": "#ffeb3b",
"strokeWidth": 1
}
]
}
]
},
"hiddenLayerIds": []
},
"timeline": {
"animation": {
"id": "224",
"name": "anim",
"duration": 1000,
"blocks": [
{
"id": "225",
"layerId": "223",
"propertyName": "pathData",
"startTime": 0,
"endTime": 1000,
"interpolator": "FAST_OUT_SLOW_IN",
"type": "path",
"fromValue": "M 500 229.167 C 500 229.167 500 229.167 500 229.167 C 477.014 229.167 454.745 232.28 433.594 238.108 C 412.442 243.935 392.407 252.477 373.889 263.334 C 355.37 274.19 338.368 287.361 323.281 302.448 C 308.194 317.535 295.023 334.537 284.167 353.056 C 273.31 371.574 264.768 391.609 258.941 412.761 C 253.113 433.912 250 456.181 250 479.167 C 250 498.869 252.287 518.044 256.611 536.441 C 260.934 554.837 267.293 572.455 275.437 589.043 C 283.581 605.63 293.509 621.188 304.971 635.464 C 316.432 649.74 329.426 662.735 343.702 674.196 C 349.756 679.056 356.039 683.64 362.534 687.929 C 370.039 692.886 377.827 697.449 385.867 701.589 C 394.137 705.847 402.674 709.658 411.446 712.988 C 421.576 716.834 432.019 720.04 442.726 722.556 C 452.366 724.822 462.219 726.528 472.25 727.639 C 481.363 728.649 490.622 729.167 500 729.167 C 513.378 729.167 526.513 728.112 539.326 726.082 C 555.045 723.591 570.28 719.631 584.885 714.348 C 596.054 710.308 606.854 705.494 617.222 699.971 C 627.589 694.448 637.523 688.217 646.959 681.341 C 654.217 676.052 661.181 670.382 667.82 664.361 C 678.443 654.727 688.235 644.193 697.076 632.881 C 703.917 624.127 710.188 614.907 715.833 605.278 C 721.066 596.352 725.761 587.074 729.874 577.488 C 734.293 567.186 738.04 556.53 741.059 545.573 C 743.845 535.463 746.01 525.097 747.512 514.52 C 749.152 502.969 750 491.166 750 479.167 C 750 463.169 748.492 447.518 745.61 432.349 C 743.647 422.019 741.048 411.913 737.854 402.072 C 734.186 390.773 729.734 379.824 724.563 369.291 C 716.419 352.703 706.491 337.145 695.029 322.869 C 683.568 308.593 670.574 295.599 656.298 284.138 C 642.022 272.676 626.464 262.748 609.876 254.604 C 593.289 246.46 575.671 240.101 557.274 235.778 C 538.878 231.454 519.702 229.167 500 229.167 M 222.5 260.417 L 147.917 185.833 L 206.667 127.083 L 281.667 201.667 L 281.667 201.667 L 222.5 260.417 M 166.667 437.5 L 166.667 520.833 L 41.667 520.833 L 41.667 437.5 L 166.667 437.5 L 166.667 437.5 M 541.667 22.917 L 541.667 145.833 L 458.333 145.833 L 458.333 22.917 L 541.667 22.917 L 541.667 22.917 M 852.083 185.833 L 852.083 185.833 L 777.5 260.417 L 718.75 201.667 L 793.333 127.083 L 852.083 185.833 M 851.667 772.917 L 792.917 831.667 L 718.333 756.667 L 718.333 756.667 L 776.667 698.333 L 851.667 772.917 M 833.333 437.5 L 958.333 437.5 L 958.333 520.833 L 833.333 520.833 L 833.333 437.5 L 833.333 437.5 M 458.333 812.5 L 541.667 812.5 L 541.667 935.417 L 458.333 935.417 L 458.333 935.417 L 458.333 812.5 M 147.917 772.5 L 147.917 772.5 L 222.5 697.5 L 281.25 756.25 L 206.667 831.25 L 147.917 772.5",
"toValue": "M 492.95 235.1 C 471.05 235.8 449.75 239.3 429 245.55 C 408.25 251.8 389.15 260.3 371.75 271.05 C 354.3 281.8 338.3 294.7 323.7 309.7 C 309.1 324.7 296.7 341.05 286.6 358.75 C 276.5 376.45 268.6 395.6 262.95 416.3 C 257.3 437 254.5 458.15 254.5 479.75 C 254.5 482.5 254.55 485.2 254.7 487.8 C 255.4 509.6 258.9 530.75 265.25 551.35 C 271.55 571.9 280.1 590.9 290.85 608.25 C 301.6 625.65 314.55 641.55 329.7 656.1 C 344.9 670.65 361.3 682.95 379 693 C 396.7 703.05 416 710.9 436.85 716.55 C 457.7 722.2 479.05 725 500.8 725 C 503.4 725 506.1 724.95 508.85 724.8 C 508.85 724.8 508.85 724.8 508.85 724.8 C 543.3 723.7 575.25 716.25 604.85 702.55 C 634.3 688.75 660.05 669.7 682.1 645.3 C 684.45 642.65 685.6 640.7 685.6 639.4 C 685.6 638.1 684.45 637.45 682.1 637.45 C 680.85 637.45 679.3 637.65 677.35 638.05 C 668.95 639.85 658.75 640.95 646.75 641.35 C 644.333 641.35 641.917 641.35 639.5 641.35 C 620.35 641.35 601.6 638.9 583.2 634 C 564.8 629.1 547.8 622.2 532.15 613.25 C 516.5 604.3 502.05 593.45 488.75 580.7 C 475.45 567.95 464.05 553.95 454.55 538.65 C 445 523.35 437.45 506.65 431.8 488.45 C 426.15 470.25 423.05 451.6 422.5 432.45 C 422.35 429.95 422.3 427.55 422.3 425.2 C 422.3 407.347 424.356 390.099 428.475 373.451 C 432.972 355.271 439.928 337.806 449.35 321.05 C 457.707 306.188 467.404 292.665 478.446 280.487 C 491.252 266.363 505.868 254.048 522.3 243.55 C 524.5 242.15 525.6 240.7 525.6 239.2 C 525.6 237 523.1 235.8 518.15 235.5 C 507 234.95 498.6 234.8 492.95 235.1 M 214.723 193.758 L 214.723 193.758 L 214.723 193.758 L 214.723 193.758 L 214.723 193.758 L 214.723 193.758 M 104.167 479.166 L 104.167 479.166 L 104.167 479.166 L 104.167 479.166 L 104.167 479.166 L 104.167 479.166 M 500 84.375 L 500 84.375 L 500 84.375 L 500 84.375 L 500 84.375 L 500 84.375 M 785.417 193.75 L 785.417 193.75 L 785.417 193.75 L 785.417 193.75 L 785.417 193.75 L 785.417 193.75 M 792.813 772.813 L 792.813 772.813 L 792.813 772.813 L 792.813 772.813 L 792.813 772.813 L 792.813 772.813 M 895.833 479.166 L 895.833 479.166 L 895.833 479.166 L 895.833 479.166 L 895.833 479.166 L 895.833 479.166 M 500 873.958 L 500 873.958 L 500 873.958 L 500 873.958 L 500 873.958 L 500 873.958 M 214.583 764.375 L 214.583 764.375 L 214.583 764.375 L 214.583 764.375 L 214.583 764.375 L 214.583 764.375"
},
{
"id": "46048",
"layerId": "223",
"propertyName": "fillColor",
"startTime": 0,
"endTime": 1000,
"interpolator": "FAST_OUT_SLOW_IN",
"type": "color",
"fromValue": "#ffeb3b",
"toValue": "#90a4ae"
},
{
"id": "540207",
"layerId": "540206",
"propertyName": "rotation",
"startTime": 0,
"endTime": 1000,
"interpolator": "FAST_OUT_SLOW_IN",
"type": "number",
"fromValue": 0,
"toValue": 360
}
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment