Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 4.2.18.
999
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import { spring } from 'svelte/motion';
// Using a spring to make it smoother, but not necessary
let animation = spring(0, {
stiffness: 0.08,
damping: 0.5
});
function toggleDropdown() {
if ($animation == 1) {
animation.set(0);
} else {
animation.set(1);
}
}
</script>
<div class="dropdown-container" style="--animation: {$animation}">
<!-- Actual button and menu elements, no Goo effect. Menu has no background. -->
<button class="button" on:click={toggleDropdown}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
</button>
<div class="menu">
<div class="menu-content">
Curabitur suscipit lectus lorem, convallis convallis est blandit quis.
</div>
</div>
<!-- Just shapes with the goo effect applied. Menu here serves as the background for the true menu. -->
<div class="goo-container">
<div class="button" />
<div class="menu" />
</div>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
999
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
›
⌄
⌄
/* App.svelte generated by Svelte v4.2.18 */
import {
SvelteComponent,
append,
append_styles,
attr,
component_subscribe,
detach,
element,
init,
insert,
listen,
noop,
safe_not_equal,
set_style,
space,
svg_element
} from "svelte/internal";
import "svelte/internal/disclose-version";
import { spring } from 'svelte/motion';
function add_css(target) {
append_styles(target, "svelte-14ed567", "body{display:grid;place-content:center;background-image:radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 0);background-size:1rem 1rem;background-repeat:round}.dropdown-container.svelte-14ed567.svelte-14ed567{position:relative;display:flex;flex-direction:column;align-items:center}.goo-container.svelte-14ed567.svelte-14ed567{filter:url(#goo);position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;align-items:center}.button.svelte-14ed567.svelte-14ed567{border:0;width:40px;height:40px;background:black;color:white;border-radius:50%;cursor:pointer;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;scale:calc(1 + (0.1 * var(--animation, 0)))}.menu.svelte-14ed567.svelte-14ed567{color:white;width:200px;height:72px;transform-origin:top;margin-top:8px;padding:1em;overflow:hidden;scale:calc(1 * var(--animation, 0));border-radius:calc(0.5em + (4em * (1 - var(--animation, 0))));translate:0 calc(-20px * (1 - var(--animation, 0)));opacity:1 * var(--animation, 0)}.goo-container.svelte-14ed567 .menu.svelte-14ed567{background:black}.menu-content.svelte-14ed567.svelte-14ed567{opacity:calc(-0.9 + (1.9 * var(--animation, 0)))}");
}
function create_fragment(ctx) {
let div5;
let button;
let t0;
let div1;
let t2;
let div4;
let t4;
let svg1;
let defs;
result = svelte.compile(source, {
generate: ,
});9
1
›
body{display:grid;place-content:center;background-image:radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 0);background-size:1rem 1rem;background-repeat:round}.dropdown-container.svelte-14ed567.svelte-14ed567{position:relative;display:flex;flex-direction:column;align-items:center}.goo-container.svelte-14ed567.svelte-14ed567{filter:url(#goo);position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;align-items:center}.button.svelte-14ed567.svelte-14ed567{border:0;width:40px;height:40px;background:black;color:white;border-radius:50%;cursor:pointer;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;scale:calc(1 + (0.1 * var(--animation, 0)))}.menu.svelte-14ed567.svelte-14ed567{color:white;width:200px;height:72px;transform-origin:top;margin-top:8px;padding:1em;overflow:hidden;scale:calc(1 * var(--animation, 0));border-radius:calc(0.5em + (4em * (1 - var(--animation, 0))));translate:0 calc(-20px * (1 - var(--animation, 0)));opacity:1 * var(--animation, 0)}.goo-container.svelte-14ed567 .menu.svelte-14ed567{background:black}.menu-content.svelte-14ed567.svelte-14ed567{opacity:calc(-0.9 + (1.9 * var(--animation, 0)))}
{
html: Fragment {...}
- start: 304
- end: 1716
- type: "Fragment"
children: [...] (7)
Text {...}
- start: 302
- end: 304
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 304
- end: 1204
- type: "Element"
- name: "div"
attributes: [...] (2)
Attribute {...}
- start: 309
- end: 335
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 316
- end: 334
- type: "Text"
- raw: "dropdown-container"
- data: "dropdown-container"
}
]
} Attribute {...}
- start: 336
- end: 369
- type: "Attribute"
- name: "style"
value: [...] (2)
Text {...}
- start: 343
- end: 356
- type: "Text"
- raw: "--animation: "
- data: "--animation: "
} MustacheTag {...}
- start: 356
- end: 368
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 357
- end: 367
loc: {...}
start: {...}
- line: 19
- column: 53
}end: {...}
- line: 19
- column: 63
}
}- name: "$animation"
}
}
]
}
]children: [...] (11)
Text {...}
- start: 370
- end: 373
- type: "Text"
- raw: "\n\n\t"
- data: "\n\n\t"
} Comment {...}
- start: 373
- end: 453
- type: "Comment"
- data: " Actual button and menu elements, no Goo effect. Menu has no background. "
- ignores: []
} Text {...}
- start: 453
- end: 455
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 455
- end: 865
- type: "Element"
- name: "button"
attributes: [...] (2)
Attribute {...}
- start: 463
- end: 477
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 470
- end: 476
- type: "Text"
- raw: "button"
- data: "button"
}
]
} EventHandler {...}
- start: 478
- end: 503
- type: "EventHandler"
- name: "click"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 488
- end: 502
loc: {...}
start: {...}
- line: 22
- column: 34
}end: {...}
- line: 22
- column: 48
}
}- name: "toggleDropdown"
}
}
]children: [...] (3)
Text {...}
- start: 504
- end: 507
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 507
- end: 854
- type: "Element"
- name: "svg"
attributes: [...] (10)
Attribute {...}
- start: 512
- end: 546
- type: "Attribute"
- name: "xmlns"
value: [...] (1)
Text {...}
- start: 519
- end: 545
- type: "Text"
- raw: "http://www.w3.org/2000/svg"
- data: "http://www.w3.org/2000/svg"
}
]
} Attribute {...}
- start: 547
- end: 557
- type: "Attribute"
- name: "width"
value: [...] (1)
Text {...}
- start: 554
- end: 556
- type: "Text"
- raw: "24"
- data: "24"
}
]
} Attribute {...}
- start: 558
- end: 569
- type: "Attribute"
- name: "height"
value: [...] (1)
Text {...}
- start: 566
- end: 568
- type: "Text"
- raw: "24"
- data: "24"
}
]
} Attribute {...}
- start: 570
- end: 589
- type: "Attribute"
- name: "viewBox"
value: [...] (1)
Text {...}
- start: 579
- end: 588
- type: "Text"
- raw: "0 0 24 24"
- data: "0 0 24 24"
}
]
} Attribute {...}
- start: 590
- end: 601
- type: "Attribute"
- name: "fill"
value: [...] (1)
Text {...}
- start: 596
- end: 600
- type: "Text"
- raw: "none"
- data: "none"
}
]
} Attribute {...}
- start: 602
- end: 623
- type: "Attribute"
- name: "stroke"
value: [...] (1)
Text {...}
- start: 610
- end: 622
- type: "Text"
- raw: "currentColor"
- data: "currentColor"
}
]
} Attribute {...}
- start: 624
- end: 640
- type: "Attribute"
- name: "stroke-width"
value: [...] (1)
Text {...}
- start: 638
- end: 639
- type: "Text"
- raw: "2"
- data: "2"
}
]
} Attribute {...}
- start: 641
- end: 663
- type: "Attribute"
- name: "stroke-linecap"
value: [...] (1)
Text {...}
- start: 657
- end: 662
- type: "Text"
- raw: "round"
- data: "round"
}
]
} Attribute {...}
- start: 664
- end: 687
- type: "Attribute"
- name: "stroke-linejoin"
value: [...] (1)
Text {...}
- start: 681
- end: 686
- type: "Text"
- raw: "round"
- data: "round"
}
]
} Attribute {...}
- start: 688
- end: 716
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 695
- end: 715
- type: "Text"
- raw: "feather feather-info"
- data: "feather feather-info"
}
]
}
]children: [...] (3)
Element {...}
- start: 717
- end: 757
- type: "Element"
- name: "circle"
attributes: [...] (3)
Attribute {...}
- start: 725
- end: 732
- type: "Attribute"
- name: "cx"
value: [...] (1)
Text {...}
- start: 729
- end: 731
- type: "Text"
- raw: "12"
- data: "12"
}
]
} Attribute {...}
- start: 733
- end: 740
- type: "Attribute"
- name: "cy"
value: [...] (1)
Text {...}
- start: 737
- end: 739
- type: "Text"
- raw: "12"
- data: "12"
}
]
} Attribute {...}
- start: 741
- end: 747
- type: "Attribute"
- name: "r"
value: [...] (1)
Text {...}
- start: 744
- end: 746
- type: "Text"
- raw: "10"
- data: "10"
}
]
}
]- children: []
} Element {...}
- start: 757
- end: 802
- type: "Element"
- name: "line"
attributes: [...] (4)
Attribute {...}
- start: 763
- end: 770
- type: "Attribute"
- name: "x1"
value: [...] (1)
Text {...}
- start: 767
- end: 769
- type: "Text"
- raw: "12"
- data: "12"
}
]
} Attribute {...}
- start: 771
- end: 778
- type: "Attribute"
- name: "y1"
value: [...] (1)
Text {...}
- start: 775
- end: 777
- type: "Text"
- raw: "16"
- data: "16"
}
]
} Attribute {...}
- start: 779
- end: 786
- type: "Attribute"
- name: "x2"
value: [...] (1)
Text {...}
- start: 783
- end: 785
- type: "Text"
- raw: "12"
- data: "12"
}
]
} Attribute {...}
- start: 787
- end: 794
- type: "Attribute"
- name: "y2"
value: [...] (1)
Text {...}
- start: 791
- end: 793
- type: "Text"
- raw: "12"
- data: "12"
}
]
}
]- children: []
} Element {...}
- start: 802
- end: 848
- type: "Element"
- name: "line"
attributes: [...] (4)
Attribute {...}
- start: 808
- end: 815
- type: "Attribute"
- name: "x1"
value: [...] (1)
Text {...}
- start: 812
- end: 814
- type: "Text"
- raw: "12"
- data: "12"
}
]
} Attribute {...}
- start: 816
- end: 822
- type: "Attribute"
- name: "y1"
value: [...] (1)
Text {...}
- start: 820
- end: 821
- type: "Text"
- raw: "8"
- data: "8"
}
]
} Attribute {...}
- start: 823
- end: 833
- type: "Attribute"
- name: "x2"
value: [...] (1)
Text {...}
- start: 827
- end: 832
- type: "Text"
- raw: "12.01"
- data: "12.01"
}
]
} Attribute {...}
- start: 834
- end: 840
- type: "Attribute"
- name: "y2"
value: [...] (1)
Text {...}
- start: 838
- end: 839
- type: "Text"
- raw: "8"
- data: "8"
}
]
}
]- children: []
}
]
} Text {...}
- start: 854
- end: 856
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 865
- end: 867
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 867
- end: 1005
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 872
- end: 884
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 879
- end: 883
- type: "Text"
- raw: "menu"
- data: "menu"
}
]
}
]children: [...] (3)
Text {...}
- start: 885
- end: 888
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 888
- end: 997
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 893
- end: 913
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 900
- end: 912
- type: "Text"
- raw: "menu-content"
- data: "menu-content"
}
]
}
]children: [...] (1)
Text {...}
- start: 914
- end: 991
- type: "Text"
- raw: "\n\t\t\tCurabitur suscipit lectus lorem, convallis convallis est blandit quis.\n\t\t"
- data: "\n\t\t\tCurabitur suscipit lectus lorem, convallis convallis est blandit quis.\n\t\t"
}
]
} Text {...}
- start: 997
- end: 999
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 1005
- end: 1008
- type: "Text"
- raw: "\n\n\t"
- data: "\n\n\t"
} Comment {...}
- start: 1008
- end: 1111
- type: "Comment"
- data: " Just shapes with the goo effect applied. Menu here serves as the background for the true menu. "
- ignores: []
} Text {...}
- start: 1111
- end: 1113
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 1113
- end: 1196
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 1118
- end: 1139
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1125
- end: 1138
- type: "Text"
- raw: "goo-container"
- data: "goo-container"
}
]
}
]children: [...] (5)
Text {...}
- start: 1140
- end: 1143
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 1143
- end: 1165
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 1148
- end: 1162
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1155
- end: 1161
- type: "Text"
- raw: "button"
- data: "button"
}
]
}
]- children: []
} Text {...}
- start: 1165
- end: 1168
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 1168
- end: 1188
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 1173
- end: 1185
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1180
- end: 1184
- type: "Text"
- raw: "menu"
- data: "menu"
}
]
}
]- children: []
} Text {...}
- start: 1188
- end: 1190
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 1196
- end: 1198
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
}
]
} Text {...}
- start: 1204
- end: 1206
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Comment {...}
- start: 1206
- end: 1257
- type: "Comment"
- data: " SVG filter definition, anywhere in the DOM "
- ignores: []
} Text {...}
- start: 1257
- end: 1258
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 1258
- end: 1716
- type: "Element"
- name: "svg"
attributes: [...] (3)
Attribute {...}
- start: 1263
- end: 1274
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1267
- end: 1273
- type: "Text"
- raw: "filter"
- data: "filter"
}
]
} Attribute {...}
- start: 1275
- end: 1309
- type: "Attribute"
- name: "xmlns"
value: [...] (1)
Text {...}
- start: 1282
- end: 1308
- type: "Text"
- raw: "http://www.w3.org/2000/svg"
- data: "http://www.w3.org/2000/svg"
}
]
} Attribute {...}
- start: 1310
- end: 1323
- type: "Attribute"
- name: "version"
value: [...] (1)
Text {...}
- start: 1319
- end: 1322
- type: "Text"
- raw: "1.1"
- data: "1.1"
}
]
}
]children: [...] (3)
Text {...}
- start: 1324
- end: 1326
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 1326
- end: 1709
- type: "Element"
- name: "defs"
- attributes: []
children: [...] (3)
Text {...}
- start: 1332
- end: 1335
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 1335
- end: 1700
- type: "Element"
- name: "filter"
attributes: [...] (1)
Attribute {...}
- start: 1343
- end: 1351
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1347
- end: 1350
- type: "Text"
- raw: "goo"
- data: "goo"
}
]
}
]children: [...] (7)
Text {...}
- start: 1352
- end: 1356
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Element {...}
- start: 1356
- end: 1452
- type: "Element"
- name: "feGaussianBlur"
attributes: [...] (4)
Attribute {...}
- start: 1372
- end: 1381
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1376
- end: 1380
- type: "Text"
- raw: "blur"
- data: "blur"
}
]
} Attribute {...}
- start: 1382
- end: 1398
- type: "Attribute"
- name: "result"
value: [...] (1)
Text {...}
- start: 1390
- end: 1397
- type: "Text"
- raw: "blurred"
- data: "blurred"
}
]
} Attribute {...}
- start: 1399
- end: 1417
- type: "Attribute"
- name: "in"
value: [...] (1)
Text {...}
- start: 1403
- end: 1416
- type: "Text"
- raw: "SourceGraphic"
- data: "SourceGraphic"
}
]
} Attribute {...}
- start: 1418
- end: 1434
- type: "Attribute"
- name: "stdDeviation"
value: [...] (1)
Text {...}
- start: 1432
- end: 1433
- type: "Text"
- raw: "4"
- data: "4"
}
]
}
]- children: []
} Text {...}
- start: 1452
- end: 1456
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Element {...}
- start: 1456
- end: 1596
- type: "Element"
- name: "feColorMatrix"
attributes: [...] (5)
Attribute {...}
- start: 1471
- end: 1482
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1475
- end: 1481
- type: "Text"
- raw: "adjust"
- data: "adjust"
}
]
} Attribute {...}
- start: 1483
- end: 1500
- type: "Attribute"
- name: "result"
value: [...] (1)
Text {...}
- start: 1491
- end: 1499
- type: "Text"
- raw: "adjusted"
- data: "adjusted"
}
]
} Attribute {...}
- start: 1501
- end: 1513
- type: "Attribute"
- name: "in"
value: [...] (1)
Text {...}
- start: 1505
- end: 1512
- type: "Text"
- raw: "blurred"
- data: "blurred"
}
]
} Attribute {...}
- start: 1514
- end: 1565
- type: "Attribute"
- name: "values"
value: [...] (1)
Text {...}
- start: 1522
- end: 1564
- type: "Text"
- raw: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -10"
- data: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -10"
}
]
} Attribute {...}
- start: 1566
- end: 1579
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 1572
- end: 1578
- type: "Text"
- raw: "matrix"
- data: "matrix"
}
]
}
]- children: []
} Text {...}
- start: 1596
- end: 1600
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Element {...}
- start: 1600
- end: 1688
- type: "Element"
- name: "feComposite"
attributes: [...] (4)
Attribute {...}
- start: 1613
- end: 1625
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1617
- end: 1624
- type: "Text"
- raw: "combine"
- data: "combine"
}
]
} Attribute {...}
- start: 1626
- end: 1643
- type: "Attribute"
- name: "result"
value: [...] (1)
Text {...}
- start: 1634
- end: 1642
- type: "Text"
- raw: "combined"
- data: "combined"
}
]
} Attribute {...}
- start: 1644
- end: 1657
- type: "Attribute"
- name: "in"
value: [...] (1)
Text {...}
- start: 1648
- end: 1656
- type: "Text"
- raw: "adjusted"
- data: "adjusted"
}
]
} Attribute {...}
- start: 1658
- end: 1673
- type: "Attribute"
- name: "operator"
value: [...] (1)
Text {...}
- start: 1668
- end: 1672
- type: "Text"
- raw: "atop"
- data: "atop"
}
]
}
]- children: []
} Text {...}
- start: 1688
- end: 1691
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
} Text {...}
- start: 1700
- end: 1702
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 1709
- end: 1710
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 1716
- end: 1718
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
}
]
}css: Style {...}
- type: "Style"
- start: 1718
- end: 3036
- attributes: []
children: [...] (7)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "body"
- start: 1735
- end: 1739
}
]- start: 1727
- end: 1740
}
]- start: 1727
- end: 1740
}
]- start: 1727
- end: 1740
}block: Block {...}
- type: "Block"
children: [...] (5)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "grid"
- start: 1754
- end: 1758
}
]- start: 1754
- end: 1758
}- start: 1745
- end: 1758
} Declaration {...}
- type: "Declaration"
- important: false
- property: "place-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 1777
- end: 1783
}
]- start: 1777
- end: 1783
}- start: 1762
- end: 1783
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background-image"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "radial-gradient"
children: [...] (7)
Identifier {...}
- type: "Identifier"
- name: "circle"
- start: 1821
- end: 1827
} Operator {...}
- type: "Operator"
- value: ","
- start: 1827
- end: 1828
} Function {...}
- type: "Function"
- name: "rgba"
children: [...] (7)
Number {...}
- type: "Number"
- value: "0"
- start: 1834
- end: 1835
} Operator {...}
- type: "Operator"
- value: ","
- start: 1835
- end: 1836
} Number {...}
- type: "Number"
- value: "0"
- start: 1837
- end: 1838
} Operator {...}
- type: "Operator"
- value: ","
- start: 1838
- end: 1839
} Number {...}
- type: "Number"
- value: "0"
- start: 1840
- end: 1841
} Operator {...}
- type: "Operator"
- value: ","
- start: 1841
- end: 1842
} Number {...}
- type: "Number"
- value: "0.1"
- start: 1843
- end: 1846
}
]- start: 1829
- end: 1847
} Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "px"
- start: 1848
- end: 1851
} Operator {...}
- type: "Operator"
- value: ","
- start: 1851
- end: 1852
} Identifier {...}
- type: "Identifier"
- name: "transparent"
- start: 1853
- end: 1864
} Number {...}
- type: "Number"
- value: "0"
- start: 1865
- end: 1866
}
]- start: 1805
- end: 1867
}
]- start: 1805
- end: 1867
}- start: 1787
- end: 1867
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background-size"
value: Value {...}
- type: "Value"
children: [...] (2)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 1889
- end: 1893
} Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 1894
- end: 1898
}
]- start: 1889
- end: 1898
}- start: 1872
- end: 1898
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background-repeat"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "round"
- start: 1922
- end: 1927
}
]- start: 1922
- end: 1927
}- start: 1903
- end: 1927
}
]- start: 1741
- end: 1931
}- start: 1727
- end: 1931
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "dropdown-container"
- start: 1935
- end: 1954
}
]- start: 1935
- end: 1954
}
]- start: 1935
- end: 1954
}block: Block {...}
- type: "Block"
children: [...] (4)
Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "relative"
- start: 1969
- end: 1977
}
]- start: 1969
- end: 1977
}- start: 1959
- end: 1977
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 1990
- end: 1994
}
]- start: 1990
- end: 1994
}- start: 1981
- end: 1994
} Declaration {...}
- type: "Declaration"
- important: false
- property: "flex-direction"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "column"
- start: 2014
- end: 2020
}
]- start: 2014
- end: 2020
}- start: 1998
- end: 2020
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-items"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2037
- end: 2043
}
]- start: 2037
- end: 2043
}- start: 2024
- end: 2043
}
]- start: 1955
- end: 2047
}- start: 1935
- end: 2047
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "goo-container"
- start: 2051
- end: 2065
}
]- start: 2051
- end: 2065
}
]- start: 2051
- end: 2065
}block: Block {...}
- type: "Block"
children: [...] (7)
Declaration {...}
- type: "Declaration"
- important: false
- property: "filter"
value: Value {...}
- type: "Value"
children: [...] (1)
Url {...}
- type: "Url"
- value: "#goo"
- start: 2079
- end: 2088
}
]- start: 2079
- end: 2088
}- start: 2071
- end: 2088
} Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "absolute"
- start: 2103
- end: 2111
}
]- start: 2103
- end: 2111
}- start: 2093
- end: 2111
} Declaration {...}
- type: "Declaration"
- important: false
- property: "inset"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 2122
- end: 2123
}
]- start: 2122
- end: 2123
}- start: 2115
- end: 2123
} Declaration {...}
- type: "Declaration"
- important: false
- property: "z-index"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "-1"
- start: 2136
- end: 2138
}
]- start: 2136
- end: 2138
}- start: 2127
- end: 2138
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 2151
- end: 2155
}
]- start: 2151
- end: 2155
}- start: 2142
- end: 2155
} Declaration {...}
- type: "Declaration"
- important: false
- property: "flex-direction"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "column"
- start: 2175
- end: 2181
}
]- start: 2175
- end: 2181
}- start: 2159
- end: 2181
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-items"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2198
- end: 2204
}
]- start: 2198
- end: 2204
}- start: 2185
- end: 2204
}
]- start: 2066
- end: 2208
}- start: 2051
- end: 2208
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "button"
- start: 2212
- end: 2219
}
]- start: 2212
- end: 2219
}
]- start: 2212
- end: 2219
}block: Block {...}
- type: "Block"
children: [...] (13)
Declaration {...}
- type: "Declaration"
- important: false
- property: "border"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 2232
- end: 2233
}
]- start: 2232
- end: 2233
}- start: 2224
- end: 2233
} Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "40"
- unit: "px"
- start: 2244
- end: 2248
}
]- start: 2244
- end: 2248
}- start: 2237
- end: 2248
} Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "40"
- unit: "px"
- start: 2260
- end: 2264
}
]- start: 2260
- end: 2264
}- start: 2252
- end: 2264
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "black"
- start: 2280
- end: 2285
}
]- start: 2280
- end: 2285
}- start: 2268
- end: 2285
} Declaration {...}
- type: "Declaration"
- important: false
- property: "color"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "white"
- start: 2296
- end: 2301
}
]- start: 2296
- end: 2301
}- start: 2289
- end: 2301
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border-radius"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "50"
- start: 2320
- end: 2323
}
]- start: 2320
- end: 2323
}- start: 2305
- end: 2323
} Declaration {...}
- type: "Declaration"
- important: false
- property: "cursor"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "pointer"
- start: 2335
- end: 2342
}
]- start: 2335
- end: 2342
}- start: 2327
- end: 2342
} Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "relative"
- start: 2356
- end: 2364
}
]- start: 2356
- end: 2364
}- start: 2346
- end: 2364
} Declaration {...}
- type: "Declaration"
- important: false
- property: "z-index"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "10"
- start: 2377
- end: 2379
}
]- start: 2377
- end: 2379
}- start: 2368
- end: 2379
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 2392
- end: 2396
}
]- start: 2392
- end: 2396
}- start: 2383
- end: 2396
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-items"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2413
- end: 2419
}
]- start: 2413
- end: 2419
}- start: 2400
- end: 2419
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2440
- end: 2446
}
]- start: 2440
- end: 2446
}- start: 2423
- end: 2446
} Declaration {...}
- type: "Declaration"
- important: false
- property: "scale"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "calc"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1"
- start: 2496
- end: 2497
} Operator {...}
- type: "Operator"
- value: " + "
- start: 2498
- end: 2499
} Parentheses {...}
- type: "Parentheses"
children: [...] (3)
Number {...}
- type: "Number"
- value: "0.1"
- start: 2501
- end: 2504
} Operator {...}
- type: "Operator"
- value: "*"
- start: 2505
- end: 2506
} Function {...}
- type: "Function"
- name: "var"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "--animation"
- start: 2511
- end: 2522
} Operator {...}
- type: "Operator"
- value: ","
- start: 2522
- end: 2523
} Raw {...}
- type: "Raw"
- value: " 0"
- start: 2523
- end: 2525
}
]- start: 2507
- end: 2526
}
]- start: 2500
- end: 2527
}
]- start: 2491
- end: 2528
}
]- start: 2491
- end: 2528
}- start: 2484
- end: 2528
}
]- start: 2220
- end: 2532
}- start: 2212
- end: 2532
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "menu"
- start: 2536
- end: 2541
}
]- start: 2536
- end: 2541
}
]- start: 2536
- end: 2541
}block: Block {...}
- type: "Block"
children: [...] (11)
Declaration {...}
- type: "Declaration"
- important: false
- property: "color"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "white"
- start: 2553
- end: 2558
}
]- start: 2553
- end: 2558
}- start: 2546
- end: 2558
} Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "200"
- unit: "px"
- start: 2569
- end: 2574
}
]- start: 2569
- end: 2574
}- start: 2562
- end: 2574
} Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "72"
- unit: "px"
- start: 2586
- end: 2590
}
]- start: 2586
- end: 2590
}- start: 2578
- end: 2590
} Declaration {...}
- type: "Declaration"
- important: false
- property: "transform-origin"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "top"
- start: 2612
- end: 2615
}
]- start: 2612
- end: 2615
}- start: 2594
- end: 2615
} Declaration {...}
- type: "Declaration"
- important: false
- property: "margin-top"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "8"
- unit: "px"
- start: 2631
- end: 2634
}
]- start: 2631
- end: 2634
}- start: 2619
- end: 2634
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "em"
- start: 2647
- end: 2650
}
]- start: 2647
- end: 2650
}- start: 2638
- end: 2650
} Declaration {...}
- type: "Declaration"
- important: false
- property: "overflow"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "hidden"
- start: 2664
- end: 2670
}
]- start: 2664
- end: 2670
}- start: 2654
- end: 2670
} Declaration {...}
- type: "Declaration"
- important: false
- property: "scale"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "calc"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1"
- start: 2716
- end: 2717
} Operator {...}
- type: "Operator"
- value: "*"
- start: 2718
- end: 2719
} Function {...}
- type: "Function"
- name: "var"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "--animation"
- start: 2724
- end: 2735
} Operator {...}
- type: "Operator"
- value: ","
- start: 2735
- end: 2736
} Raw {...}
- type: "Raw"
- value: " 0"
- start: 2736
- end: 2738
}
]- start: 2720
- end: 2739
}
]- start: 2711
- end: 2740
}
]- start: 2711
- end: 2740
}- start: 2704
- end: 2740
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border-radius"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "calc"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "0.5"
- unit: "em"
- start: 2764
- end: 2769
} Operator {...}
- type: "Operator"
- value: " + "
- start: 2770
- end: 2771
} Parentheses {...}
- type: "Parentheses"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "4"
- unit: "em"
- start: 2773
- end: 2776
} Operator {...}
- type: "Operator"
- value: "*"
- start: 2777
- end: 2778
} Parentheses {...}
- type: "Parentheses"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1"
- start: 2780
- end: 2781
} Operator {...}
- type: "Operator"
- value: " - "
- start: 2782
- end: 2783
} Function {...}
- type: "Function"
- name: "var"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "--animation"
- start: 2788
- end: 2799
} Operator {...}
- type: "Operator"
- value: ","
- start: 2799
- end: 2800
} Raw {...}
- type: "Raw"
- value: " 0"
- start: 2800
- end: 2802
}
]- start: 2784
- end: 2803
}
]- start: 2779
- end: 2804
}
]- start: 2772
- end: 2805
}
]- start: 2759
- end: 2806
}
]- start: 2759
- end: 2806
}- start: 2744
- end: 2806
} Declaration {...}
- type: "Declaration"
- important: false
- property: "translate"
value: Value {...}
- type: "Value"
children: [...] (2)
Number {...}
- type: "Number"
- value: "0"
- start: 2821
- end: 2822
} Function {...}
- type: "Function"
- name: "calc"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "-20"
- unit: "px"
- start: 2828
- end: 2833
} Operator {...}
- type: "Operator"
- value: "*"
- start: 2834
- end: 2835
} Parentheses {...}
- type: "Parentheses"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1"
- start: 2837
- end: 2838
} Operator {...}
- type: "Operator"
- value: " - "
- start: 2839
- end: 2840
} Function {...}
- type: "Function"
- name: "var"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "--animation"
- start: 2845
- end: 2856
} Operator {...}
- type: "Operator"
- value: ","
- start: 2856
- end: 2857
} Raw {...}
- type: "Raw"
- value: " 0"
- start: 2857
- end: 2859
}
]- start: 2841
- end: 2860
}
]- start: 2836
- end: 2861
}
]- start: 2823
- end: 2862
}
]- start: 2821
- end: 2862
}- start: 2810
- end: 2862
} Declaration {...}
- type: "Declaration"
- important: false
- property: "opacity"
value: Value {...}
- type: "Value"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1"
- start: 2875
- end: 2876
} Operator {...}
- type: "Operator"
- value: "*"
- start: 2877
- end: 2878
} Function {...}
- type: "Function"
- name: "var"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "--animation"
- start: 2883
- end: 2894
} Operator {...}
- type: "Operator"
- value: ","
- start: 2894
- end: 2895
} Raw {...}
- type: "Raw"
- value: " 0"
- start: 2895
- end: 2897
}
]- start: 2879
- end: 2898
}
]- start: 2875
- end: 2898
}- start: 2866
- end: 2898
}
]- start: 2542
- end: 2902
}- start: 2536
- end: 2902
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (3)
ClassSelector {...}
- type: "ClassSelector"
- name: "goo-container"
- start: 2905
- end: 2919
} Combinator {...}
- type: "Combinator"
- loc: null
- name: " "
} ClassSelector {...}
- type: "ClassSelector"
- name: "menu"
- start: 2920
- end: 2925
}
]- start: 2905
- end: 2925
}
]- start: 2905
- end: 2925
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "background"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "black"
- start: 2942
- end: 2947
}
]- start: 2942
- end: 2947
}- start: 2930
- end: 2947
}
]- start: 2926
- end: 2951
}- start: 2905
- end: 2951
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "menu-content"
- start: 2954
- end: 2967
}
]- start: 2954
- end: 2967
}
]- start: 2954
- end: 2967
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "opacity"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "calc"
children: [...] (3)
Number {...}
- type: "Number"
- value: "-0.9"
- start: 2986
- end: 2990
} Operator {...}
- type: "Operator"
- value: " + "
- start: 2991
- end: 2992
} Parentheses {...}
- type: "Parentheses"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1.9"
- start: 2994
- end: 2997
} Operator {...}
- type: "Operator"
- value: "*"
- start: 2998
- end: 2999
} Function {...}
- type: "Function"
- name: "var"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "--animation"
- start: 3004
- end: 3015
} Operator {...}
- type: "Operator"
- value: ","
- start: 3015
- end: 3016
} Raw {...}
- type: "Raw"
- value: " 0"
- start: 3016
- end: 3018
}
]- start: 3000
- end: 3019
}
]- start: 2993
- end: 3020
}
]- start: 2981
- end: 3021
}
]- start: 2981
- end: 3021
}- start: 2972
- end: 3021
}
]- start: 2968
- end: 3025
}- start: 2954
- end: 3025
}
]content: {...}
- start: 1725
- end: 3028
- styles: "\n\t:global(body) {\n\t\tdisplay: grid;\n\t\tplace-content: center;\n\t\tbackground-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 0);\n\t background-size: 1rem 1rem;\n\t background-repeat: round;\n\t}\n\t\n\t.dropdown-container {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t}\n\t\n\t.goo-container { \n\t\tfilter: url(#goo); \n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tz-index: -1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t}\n\t\n\t.button {\n\t\tborder: 0;\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: black;\n\t\tcolor: white;\n\t\tborder-radius: 50%;\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\tz-index: 10;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t\n\t\t/* Scale up 10% when open */\n\t\tscale: calc(1 + (0.1 * var(--animation, 0)));\n\t}\n\t\n\t.menu {\n\t\tcolor: white;\n\t\twidth: 200px;\n\t\theight: 72px;\n\t\ttransform-origin: top;\n\t\tmargin-top: 8px;\n\t\tpadding: 1em;\n\t\toverflow: hidden;\n\n\t\t/* Transition elements */\n\t\tscale: calc(1 * var(--animation, 0));\n\t\tborder-radius: calc(0.5em + (4em * (1 - var(--animation, 0))));\n\t\ttranslate: 0 calc(-20px * (1 - var(--animation, 0)));\n\t\topacity: 1 * var(--animation, 0);\n\t}\n\n\t.goo-container .menu {\n\t\tbackground: black;\n\t}\n\n\t.menu-content {\n\t\topacity: calc(-0.9 + (1.9 * var(--animation, 0)));\n\t}\n\n\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 302
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 293
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 17
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 40
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 16
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 16
}
}- name: "spring"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 16
}
}- name: "spring"
}
}
]source: Literal {...}
- type: "Literal"
- start: 33
- end: 48
loc: {...}
start: {...}
- line: 2
- column: 24
}end: {...}
- line: 2
- column: 39
}
}- value: "svelte/motion"
- raw: "'svelte/motion'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 110
- end: 176
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 8
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 114
- end: 175
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 8
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 114
- end: 123
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 14
}
}- name: "animation"
}init: CallExpression {...}
- type: "CallExpression"
- start: 126
- end: 175
loc: {...}
start: {...}
- line: 5
- column: 17
}end: {...}
- line: 8
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 126
- end: 132
loc: {...}
start: {...}
- line: 5
- column: 17
}end: {...}
- line: 5
- column: 23
}
}- name: "spring"
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 133
- end: 134
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 25
}
}- value: 0
- raw: "0"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 136
- end: 174
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 8
- column: 2
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 140
- end: 155
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 17
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 140
- end: 149
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 11
}
}- name: "stiffness"
}value: Literal {...}
- type: "Literal"
- start: 151
- end: 155
loc: {...}
start: {...}
- line: 6
- column: 13
}end: {...}
- line: 6
- column: 17
}
}- value: 0.08
- raw: "0.08"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 159
- end: 171
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 14
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 159
- end: 166
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 9
}
}- name: "damping"
}value: Literal {...}
- type: "Literal"
- start: 168
- end: 171
loc: {...}
start: {...}
- line: 7
- column: 11
}end: {...}
- line: 7
- column: 14
}
}- value: 0.5
- raw: "0.5"
}- kind: "init"
}
]
}
]- optional: false
}
}
]- kind: "let"
leadingComments: [...] (1)
Line {...}
- type: "Line"
- value: " Using a spring to make it smoother, but not necessary"
- start: 52
- end: 108
- has_trailing_newline: true
}
]
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 180
- end: 292
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 16
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 189
- end: 203
loc: {...}
start: {...}
- line: 10
- column: 10
}end: {...}
- line: 10
- column: 24
}
}- name: "toggleDropdown"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 206
- end: 292
loc: {...}
start: {...}
- line: 10
- column: 27
}end: {...}
- line: 16
- column: 2
}
}body: [...] (1)
IfStatement {...}
- type: "IfStatement"
- start: 210
- end: 289
loc: {...}
start: {...}
- line: 11
- column: 2
}end: {...}
- line: 15
- column: 3
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 214
- end: 229
loc: {...}
start: {...}
- line: 11
- column: 6
}end: {...}
- line: 11
- column: 21
}
}left: Identifier {...}
- type: "Identifier"
- start: 214
- end: 224
loc: {...}
start: {...}
- line: 11
- column: 6
}end: {...}
- line: 11
- column: 16
}
}- name: "$animation"
}- operator: "=="
right: Literal {...}
- type: "Literal"
- start: 228
- end: 229
loc: {...}
start: {...}
- line: 11
- column: 20
}end: {...}
- line: 11
- column: 21
}
}- value: 1
- raw: "1"
}
}consequent: BlockStatement {...}
- type: "BlockStatement"
- start: 231
- end: 257
loc: {...}
start: {...}
- line: 11
- column: 23
}end: {...}
- line: 13
- column: 3
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 236
- end: 253
loc: {...}
start: {...}
- line: 12
- column: 3
}end: {...}
- line: 12
- column: 20
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 236
- end: 252
loc: {...}
start: {...}
- line: 12
- column: 3
}end: {...}
- line: 12
- column: 19
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 236
- end: 249
loc: {...}
start: {...}
- line: 12
- column: 3
}end: {...}
- line: 12
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 236
- end: 245
loc: {...}
start: {...}
- line: 12
- column: 3
}end: {...}
- line: 12
- column: 12
}
}- name: "animation"
}property: Identifier {...}
- type: "Identifier"
- start: 246
- end: 249
loc: {...}
start: {...}
- line: 12
- column: 13
}end: {...}
- line: 12
- column: 16
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 250
- end: 251
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 18
}
}- value: 0
- raw: "0"
}
]- optional: false
}
}
]
}alternate: BlockStatement {...}
- type: "BlockStatement"
- start: 263
- end: 289
loc: {...}
start: {...}
- line: 13
- column: 9
}end: {...}
- line: 15
- column: 3
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 268
- end: 285
loc: {...}
start: {...}
- line: 14
- column: 3
}end: {...}
- line: 14
- column: 20
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 268
- end: 284
loc: {...}
start: {...}
- line: 14
- column: 3
}end: {...}
- line: 14
- column: 19
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 268
- end: 281
loc: {...}
start: {...}
- line: 14
- column: 3
}end: {...}
- line: 14
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 268
- end: 277
loc: {...}
start: {...}
- line: 14
- column: 3
}end: {...}
- line: 14
- column: 12
}
}- name: "animation"
}property: Identifier {...}
- type: "Identifier"
- start: 278
- end: 281
loc: {...}
start: {...}
- line: 14
- column: 13
}end: {...}
- line: 14
- column: 16
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 282
- end: 283
loc: {...}
start: {...}
- line: 14
- column: 17
}end: {...}
- line: 14
- column: 18
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
]
}
}
]
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time