Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
import { fade } from 'svelte/transition';
import { elasticOut } from 'svelte/easing';

let visible = $state(true);

function spin(node, { duration }) {
return {
duration,
css: (t) => {
const eased = elasticOut(t);

return `
transform: scale(${eased}) rotate(${eased * 1080}deg);
color: hsl(
${~~(t * 360)},
${Math.min(100, 1000 - 1000 * t)}%,
${Math.min(50, 500 - 500 * t)}%
);`;
}
};
}
</script>

<label>
<input type="checkbox" bind:checked={visible} />
visible
</label>

{#if visible}
<div class="centered" in:spin={{ duration: 8000 }} out:fade>
<span>transitions!</span>
</div>
{/if}

<style>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import { fade } from 'svelte/transition';
import { elasticOut } from 'svelte/easing';

var root_1 = $.template(`<div class="centered svelte-30ja2x"><span class="svelte-30ja2x">transitions!</span></div>`);
var root = $.template(`<label><input type="checkbox"> visible</label> <!>`, 1);

export default function App($$anchor, $$props) {
$.push($$props, true);

let visible = $.state(true);

function spin(node, { duration }) {
return {
duration,
css: (t) => {
const eased = elasticOut(t);

return `
transform: scale(${eased}) rotate(${eased * 1080}deg);
color: hsl(
${~~(t * 360)},
${Math.min(100, 1000 - 1000 * t)}%,
${Math.min(50, 500 - 500 * t)}%
);`;
}
};
}

var fragment = root();
var label = $.first_child(fragment);
var input = $.child(label);

$.remove_input_defaults(input);
$.next();
result = svelte.compile(source, {
generate: ,
});

.centered.svelte-30ja2x {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

span.svelte-30ja2x {
position: absolute;
transform: translate(-50%, -50%);
font-size: 4em;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 662
      • end: 865
      • attributes: []
      • children: [...] (2)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 671
            • end: 680
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 671
                • end: 680
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "centered"
                        • start: 671
                        • end: 680
                        }
                      ]
                    • start: 671
                    • end: 680
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 681
            • end: 768
            • children: [...] (4)
              • Declaration {...}
                • type: "Declaration"
                • start: 685
                • end: 703
                • property: "position"
                • value: "absolute"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 707
                • end: 716
                • property: "left"
                • value: "50%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 720
                • end: 728
                • property: "top"
                • value: "50%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 732
                • end: 764
                • property: "transform"
                • value: "translate(-50%, -50%)"
                }
              ]
            }
          • start: 671
          • end: 768
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 771
            • end: 775
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 771
                • end: 775
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "span"
                        • start: 771
                        • end: 775
                        }
                      ]
                    • start: 771
                    • end: 775
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 776
            • end: 856
            • children: [...] (3)
              • Declaration {...}
                • type: "Declaration"
                • start: 780
                • end: 798
                • property: "position"
                • value: "absolute"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 802
                • end: 834
                • property: "transform"
                • value: "translate(-50%, -50%)"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 838
                • end: 852
                • property: "font-size"
                • value: "4em"
                }
              ]
            }
          • start: 771
          • end: 856
          }
        ]
      • content: {...}
        • start: 669
        • end: 857
        • styles: "\n\t.centered {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\n\tspan {\n\t\tposition: absolute;\n\t\ttransform: translate(-50%, -50%);\n\t\tfont-size: 4em;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 466
    • end: 660
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (5)
        • Text {...}
          • type: "Text"
          • start: 464
          • end: 466
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 466
          • end: 541
          • name: "label"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 473
                • end: 475
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 475
                • end: 523
                • name: "input"
                • attributes: [...] (2)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 482
                    • end: 497
                    • name: "type"
                    • value: [...] (1)
                      • Text {...}
                        • start: 488
                        • end: 496
                        • type: "Text"
                        • raw: "checkbox"
                        • data: "checkbox"
                        }
                      ]
                    }
                  • BindDirective {...}
                    • start: 498
                    • end: 520
                    • type: "BindDirective"
                    • name: "checked"
                    • expression: Identifier {...}
                      • type: "Identifier"
                      • start: 512
                      • end: 519
                      • loc: {...}
                        • start: {...}
                          • line: 26
                          • column: 38
                          }
                        • end: {...}
                          • line: 26
                          • column: 45
                          }
                        }
                      • name: "visible"
                      }
                    • modifiers: []
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: []
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 523
                • end: 533
                • raw: " visible"
                • data: " visible"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 541
          • end: 543
          • raw: " "
          • data: " "
          }
        • IfBlock {...}
          • type: "IfBlock"
          • elseif: false
          • start: 543
          • end: 660
          • test: Identifier {...}
            • type: "Identifier"
            • start: 548
            • end: 555
            • loc: {...}
              • start: {...}
                • line: 30
                • column: 5
                }
              • end: {...}
                • line: 30
                • column: 12
                }
              }
            • name: "visible"
            }
          • consequent: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 556
                • end: 558
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 558
                • end: 654
                • name: "div"
                • attributes: [...] (3)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 563
                    • end: 579
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 570
                        • end: 578
                        • type: "Text"
                        • raw: "centered"
                        • data: "centered svelte-30ja2x"
                        }
                      ]
                    }
                  • TransitionDirective {...}
                    • start: 580
                    • end: 608
                    • type: "TransitionDirective"
                    • name: "spin"
                    • expression: ObjectExpression {...}
                      • type: "ObjectExpression"
                      • start: 589
                      • end: 607
                      • loc: {...}
                        • start: {...}
                          • line: 31
                          • column: 32
                          }
                        • end: {...}
                          • line: 31
                          • column: 50
                          }
                        }
                      • properties: [...] (1)
                        • Property {...}
                          • type: "Property"
                          • start: 591
                          • end: 605
                          • loc: {...}
                            • start: {...}
                              • line: 31
                              • column: 34
                              }
                            • end: {...}
                              • line: 31
                              • column: 48
                              }
                            }
                          • method: false
                          • shorthand: false
                          • computed: false
                          • key: Identifier {...}
                            • type: "Identifier"
                            • start: 591
                            • end: 599
                            • loc: {...}
                              • start: {...}
                                • line: 31
                                • column: 34
                                }
                              • end: {...}
                                • line: 31
                                • column: 42
                                }
                              }
                            • name: "duration"
                            }
                          • value: Literal {...}
                            • type: "Literal"
                            • start: 601
                            • end: 605
                            • loc: {...}
                              • start: {...}
                                • line: 31
                                • column: 44
                                }
                              • end: {...}
                                • line: 31
                                • column: 48
                                }
                              }
                            • value: 8000
                            • raw: "8000"
                            }
                          • kind: "init"
                          }
                        ]
                      }
                    • modifiers: []
                    • intro: true
                    • outro: false
                    }
                  • TransitionDirective {...}
                    • start: 609
                    • end: 617
                    • type: "TransitionDirective"
                    • name: "fade"
                    • expression: null
                    • modifiers: []
                    • intro: false
                    • outro: true
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 618
                      • end: 621
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 621
                      • end: 646
                      • name: "span"
                      • attributes: [...] (1)
                        • Attribute {...}
                          • type: "Attribute"
                          • start: -1
                          • end: -1
                          • name: "class"
                          • value: [...] (1)
                            • Text {...}
                              • type: "Text"
                              • data: "svelte-30ja2x"
                              • raw: "svelte-30ja2x"
                              • start: -1
                              • end: -1
                              }
                            ]
                          }
                        ]
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 627
                            • end: 639
                            • raw: "transitions!"
                            • data: "transitions!"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 646
                      • end: 648
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 654
                • end: 655
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          • alternate: null
          }
        • Text {...}
          • type: "Text"
          • start: 660
          • end: 662
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 464
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 455
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 23
            • column: 0
            }
          }
        • body: [...] (4)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 51
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 42
                }
              }
            • specifiers: [...] (1)
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 19
                • end: 23
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 10
                    }
                  • end: {...}
                    • line: 2
                    • column: 14
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 19
                  • end: 23
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 10
                      }
                    • end: {...}
                      • line: 2
                      • column: 14
                      }
                    }
                  • name: "fade"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 19
                  • end: 23
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 10
                      }
                    • end: {...}
                      • line: 2
                      • column: 14
                      }
                    }
                  • name: "fade"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 31
              • end: 50
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 22
                  }
                • end: {...}
                  • line: 2
                  • column: 41
                  }
                }
              • value: "svelte/transition"
              • raw: "'svelte/transition'"
              }
            }
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 53
            • end: 96
            • loc: {...}
              • start: {...}
                • line: 3
                • column: 1
                }
              • end: {...}
                • line: 3
                • column: 44
                }
              }
            • specifiers: [...] (1)
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 62
                • end: 72
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 10
                    }
                  • end: {...}
                    • line: 3
                    • column: 20
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 62
                  • end: 72
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 10
                      }
                    • end: {...}
                      • line: 3
                      • column: 20
                      }
                    }
                  • name: "elasticOut"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 62
                  • end: 72
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 10
                      }
                    • end: {...}
                      • line: 3
                      • column: 20
                      }
                    }
                  • name: "elasticOut"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 80
              • end: 95
              • loc: {...}
                • start: {...}
                  • line: 3
                  • column: 28
                  }
                • end: {...}
                  • line: 3
                  • column: 43
                  }
                }
              • value: "svelte/easing"
              • raw: "'svelte/easing'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 99
            • end: 126
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 1
                }
              • end: {...}
                • line: 5
                • column: 28
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 103
                • end: 125
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 5
                    }
                  • end: {...}
                    • line: 5
                    • column: 27
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 103
                  • end: 110
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 5
                      }
                    • end: {...}
                      • line: 5
                      • column: 12
                      }
                    }
                  • name: "visible"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 113
                  • end: 125
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 15
                      }
                    • end: {...}
                      • line: 5
                      • column: 27
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 113
                    • end: 119
                    • loc: {...}
                      • start: {...}
                        • line: 5
                        • column: 15
                        }
                      • end: {...}
                        • line: 5
                        • column: 21
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 120
                      • end: 124
                      • loc: {...}
                        • start: {...}
                          • line: 5
                          • column: 22
                          }
                        • end: {...}
                          • line: 5
                          • column: 26
                          }
                        }
                      • value: true
                      • raw: "true"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • FunctionDeclaration {...}
            • type: "FunctionDeclaration"
            • start: 129
            • end: 454
            • loc: {...}
              • start: {...}
                • line: 7
                • column: 1
                }
              • end: {...}
                • line: 22
                • column: 2
                }
              }
            • id: Identifier {...}
              • type: "Identifier"
              • start: 138
              • end: 142
              • loc: {...}
                • start: {...}
                  • line: 7
                  • column: 10
                  }
                • end: {...}
                  • line: 7
                  • column: 14
                  }
                }
              • name: "spin"
              }
            • expression: false
            • generator: false
            • async: false
            • params: [...] (2)
              • Identifier {...}
                • type: "Identifier"
                • start: 143
                • end: 147
                • loc: {...}
                  • start: {...}
                    • line: 7
                    • column: 15
                    }
                  • end: {...}
                    • line: 7
                    • column: 19
                    }
                  }
                • name: "node"
                }
              • ObjectPattern {...}
                • type: "ObjectPattern"
                • start: 149
                • end: 161
                • loc: {...}
                  • start: {...}
                    • line: 7
                    • column: 21
                    }
                  • end: {...}
                    • line: 7
                    • column: 33
                    }
                  }
                • properties: [...] (1)
                  • Property {...}
                    • type: "Property"
                    • start: 151
                    • end: 159
                    • loc: {...}
                      • start: {...}
                        • line: 7
                        • column: 23
                        }
                      • end: {...}
                        • line: 7
                        • column: 31
                        }
                      }
                    • method: false
                    • shorthand: true
                    • computed: false
                    • key: Identifier {...}
                      • type: "Identifier"
                      • start: 151
                      • end: 159
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 23
                          }
                        • end: {...}
                          • line: 7
                          • column: 31
                          }
                        }
                      • name: "duration"
                      }
                    • kind: "init"
                    • value: Identifier {...}
                      • type: "Identifier"
                      • start: 151
                      • end: 159
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 23
                          }
                        • end: {...}
                          • line: 7
                          • column: 31
                          }
                        }
                      • name: "duration"
                      }
                    }
                  ]
                }
              ]
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 163
              • end: 454
              • loc: {...}
                • start: {...}
                  • line: 7
                  • column: 35
                  }
                • end: {...}
                  • line: 22
                  • column: 2
                  }
                }
              • body: [...] (1)
                • ReturnStatement {...}
                  • type: "ReturnStatement"
                  • start: 167
                  • end: 451
                  • loc: {...}
                    • start: {...}
                      • line: 8
                      • column: 2
                      }
                    • end: {...}
                      • line: 21
                      • column: 4
                      }
                    }
                  • argument: ObjectExpression {...}
                    • type: "ObjectExpression"
                    • start: 174
                    • end: 450
                    • loc: {...}
                      • start: {...}
                        • line: 8
                        • column: 9
                        }
                      • end: {...}
                        • line: 21
                        • column: 3
                        }
                      }
                    • properties: [...] (2)
                      • Property {...}
                        • type: "Property"
                        • start: 179
                        • end: 187
                        • loc: {...}
                          • start: {...}
                            • line: 9
                            • column: 3
                            }
                          • end: {...}
                            • line: 9
                            • column: 11
                            }
                          }
                        • method: false
                        • shorthand: true
                        • computed: false
                        • key: Identifier {...}
                          • type: "Identifier"
                          • start: 179
                          • end: 187
                          • loc: {...}
                            • start: {...}
                              • line: 9
                              • column: 3
                              }
                            • end: {...}
                              • line: 9
                              • column: 11
                              }
                            }
                          • name: "duration"
                          }
                        • kind: "init"
                        • value: Identifier {...}
                          • type: "Identifier"
                          • start: 179
                          • end: 187
                          • loc: {...}
                            • start: {...}
                              • line: 9
                              • column: 3
                              }
                            • end: {...}
                              • line: 9
                              • column: 11
                              }
                            }
                          • name: "duration"
                          }
                        }
                      • Property {...}
                        • type: "Property"
                        • start: 192
                        • end: 446
                        • loc: {...}
                          • start: {...}
                            • line: 10
                            • column: 3
                            }
                          • end: {...}
                            • line: 20
                            • column: 4
                            }
                          }
                        • method: false
                        • shorthand: false
                        • computed: false
                        • key: Identifier {...}
                          • type: "Identifier"
                          • start: 192
                          • end: 195
                          • loc: {...}
                            • start: {...}
                              • line: 10
                              • column: 3
                              }
                            • end: {...}
                              • line: 10
                              • column: 6
                              }
                            }
                          • name: "css"
                          }
                        • value: ArrowFunctionExpression {...}
                          • type: "ArrowFunctionExpression"
                          • start: 197
                          • end: 446
                          • loc: {...}
                            • start: {...}
                              • line: 10
                              • column: 8
                              }
                            • end: {...}
                              • line: 20
                              • column: 4
                              }
                            }
                          • id: null
                          • expression: false
                          • generator: false
                          • async: false
                          • params: [...] (1)
                            • Identifier {...}
                              • type: "Identifier"
                              • start: 198
                              • end: 199
                              • loc: {...}
                                • start: {...}
                                  • line: 10
                                  • column: 9
                                  }
                                • end: {...}
                                  • line: 10
                                  • column: 10
                                  }
                                }
                              • name: "t"
                              }
                            ]
                          • body: BlockStatement {...}
                            • type: "BlockStatement"
                            • start: 204
                            • end: 446
                            • loc: {...}
                              • start: {...}
                                • line: 10
                                • column: 15
                                }
                              • end: {...}
                                • line: 20
                                • column: 4
                                }
                              }
                            • body: [...] (2)
                              • VariableDeclaration {...}
                                • type: "VariableDeclaration"
                                • start: 210
                                • end: 238
                                • loc: {...}
                                  • start: {...}
                                    • line: 11
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 11
                                    • column: 32
                                    }
                                  }
                                • declarations: [...] (1)
                                  • VariableDeclarator {...}
                                    • type: "VariableDeclarator"
                                    • start: 216
                                    • end: 237
                                    • loc: {...}
                                      • start: {...}
                                        • line: 11
                                        • column: 10
                                        }
                                      • end: {...}
                                        • line: 11
                                        • column: 31
                                        }
                                      }
                                    • id: Identifier {...}
                                      • type: "Identifier"
                                      • start: 216
                                      • end: 221
                                      • loc: {...}
                                        • start: {...}
                                          • line: 11
                                          • column: 10
                                          }
                                        • end: {...}
                                          • line: 11
                                          • column: 15
                                          }
                                        }
                                      • name: "eased"
                                      }
                                    • init: CallExpression {...}
                                      • type: "CallExpression"
                                      • start: 224
                                      • end: 237
                                      • loc: {...}
                                        • start: {...}
                                          • line: 11
                                          • column: 18
                                          }
                                        • end: {...}
                                          • line: 11
                                          • column: 31
                                          }
                                        }
                                      • callee: Identifier {...}
                                        • type: "Identifier"
                                        • start: 224
                                        • end: 234
                                        • loc: {...}
                                          • start: {...}
                                            • line: 11
                                            • column: 18
                                            }
                                          • end: {...}
                                            • line: 11
                                            • column: 28
                                            }
                                          }
                                        • name: "elasticOut"
                                        }
                                      • arguments: [...] (1)
                                        • Identifier {...}
                                          • type: "Identifier"
                                          • start: 235
                                          • end: 236
                                          • loc: {...}
                                            • start: {...}
                                              • line: 11
                                              • column: 29
                                              }
                                            • end: {...}
                                              • line: 11
                                              • column: 30
                                              }
                                            }
                                          • name: "t"
                                          }
                                        ]
                                      • optional: false
                                      }
                                    }
                                  ]
                                • kind: "const"
                                }
                              • ReturnStatement {...}
                                • type: "ReturnStatement"
                                • start: 244
                                • end: 441
                                • loc: {...}
                                  • start: {...}
                                    • line: 13
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 19
                                    • column: 9
                                    }
                                  }
                                • argument: TemplateLiteral {...}
                                  • type: "TemplateLiteral"
                                  • start: 251
                                  • end: 440
                                  • loc: {...}
                                    • start: {...}
                                      • line: 13
                                      • column: 11
                                      }
                                    • end: {...}
                                      • line: 19
                                      • column: 8
                                      }
                                    }
                                  • expressions: [...] (5)
                                    • Identifier {...}
                                      • type: "Identifier"
                                      • start: 277
                                      • end: 282
                                      • loc: {...}
                                        • start: {...}
                                          • line: 14
                                          • column: 24
                                          }
                                        • end: {...}
                                          • line: 14
                                          • column: 29
                                          }
                                        }
                                      • name: "eased"
                                      }
                                    • BinaryExpression {...}
                                      • type: "BinaryExpression"
                                      • start: 294
                                      • end: 306
                                      • loc: {...}
                                        • start: {...}
                                          • line: 14
                                          • column: 41
                                          }
                                        • end: {...}
                                          • line: 14
                                          • column: 53
                                          }
                                        }
                                      • left: Identifier {...}
                                        • type: "Identifier"
                                        • start: 294
                                        • end: 299
                                        • loc: {...}
                                          • start: {...}
                                            • line: 14
                                            • column: 41
                                            }
                                          • end: {...}
                                            • line: 14
                                            • column: 46
                                            }
                                          }
                                        • name: "eased"
                                        }
                                      • operator: "*"
                                      • right: Literal {...}
                                        • type: "Literal"
                                        • start: 302
                                        • end: 306
                                        • loc: {...}
                                          • start: {...}
                                            • line: 14
                                            • column: 49
                                            }
                                          • end: {...}
                                            • line: 14
                                            • column: 53
                                            }
                                          }
                                        • value: 1080
                                        • raw: "1080"
                                        }
                                      }
                                    • UnaryExpression {...}
                                      • type: "UnaryExpression"
                                      • start: 338
                                      • end: 349
                                      • loc: {...}
                                        • start: {...}
                                          • line: 16
                                          • column: 8
                                          }
                                        • end: {...}
                                          • line: 16
                                          • column: 19
                                          }
                                        }
                                      • operator: "~"
                                      • prefix: true
                                      • argument: UnaryExpression {...}
                                        • type: "UnaryExpression"
                                        • start: 339
                                        • end: 349
                                        • loc: {...}
                                          • start: {...}
                                            • line: 16
                                            • column: 9
                                            }
                                          • end: {...}
                                            • line: 16
                                            • column: 19
                                            }
                                          }
                                        • operator: "~"
                                        • prefix: true
                                        • argument: BinaryExpression {...}
                                          • type: "BinaryExpression"
                                          • start: 341
                                          • end: 348
                                          • loc: {...}
                                            • start: {...}
                                              • line: 16
                                              • column: 11
                                              }
                                            • end: {...}
                                              • line: 16
                                              • column: 18
                                              }
                                            }
                                          • left: Identifier {...}
                                            • type: "Identifier"
                                            • start: 341
                                            • end: 342
                                            • loc: {...}
                                              • start: {...}
                                                • line: 16
                                                • column: 11
                                                }
                                              • end: {...}
                                                • line: 16
                                                • column: 12
                                                }
                                              }
                                            • name: "t"
                                            }
                                          • operator: "*"
                                          • right: Literal {...}
                                            • type: "Literal"
                                            • start: 345
                                            • end: 348
                                            • loc: {...}
                                              • start: {...}
                                                • line: 16
                                                • column: 15
                                                }
                                              • end: {...}
                                                • line: 16
                                                • column: 18
                                                }
                                              }
                                            • value: 360
                                            • raw: "360"
                                            }
                                          }
                                        }
                                      }
                                    • CallExpression {...}
                                      • type: "CallExpression"
                                      • start: 360
                                      • end: 390
                                      • loc: {...}
                                        • start: {...}
                                          • line: 17
                                          • column: 8
                                          }
                                        • end: {...}
                                          • line: 17
                                          • column: 38
                                          }
                                        }
                                      • callee: MemberExpression {...}
                                        • type: "MemberExpression"
                                        • start: 360
                                        • end: 368
                                        • loc: {...}
                                          • start: {...}
                                            • line: 17
                                            • column: 8
                                            }
                                          • end: {...}
                                            • line: 17
                                            • column: 16
                                            }
                                          }
                                        • object: Identifier {...}
                                          • type: "Identifier"
                                          • start: 360
                                          • end: 364
                                          • loc: {...}
                                            • start: {...}
                                              • line: 17
                                              • column: 8
                                              }
                                            • end: {...}
                                              • line: 17
                                              • column: 12
                                              }
                                            }
                                          • name: "Math"
                                          }
                                        • property: Identifier {...}
                                          • type: "Identifier"
                                          • start: 365
                                          • end: 368
                                          • loc: {...}
                                            • start: {...}
                                              • line: 17
                                              • column: 13
                                              }
                                            • end: {...}
                                              • line: 17
                                              • column: 16
                                              }
                                            }
                                          • name: "min"
                                          }
                                        • computed: false
                                        • optional: false
                                        }
                                      • arguments: [...] (2)
                                        • Literal {...}
                                          • type: "Literal"
                                          • start: 369
                                          • end: 372
                                          • loc: {...}
                                            • start: {...}
                                              • line: 17
                                              • column: 17
                                              }
                                            • end: {...}
                                              • line: 17
                                              • column: 20
                                              }
                                            }
                                          • value: 100
                                          • raw: "100"
                                          }
                                        • BinaryExpression {...}
                                          • type: "BinaryExpression"
                                          • start: 374
                                          • end: 389
                                          • loc: {...}
                                            • start: {...}
                                              • line: 17
                                              • column: 22
                                              }
                                            • end: {...}
                                              • line: 17
                                              • column: 37
                                              }
                                            }
                                          • left: Literal {...}
                                            • type: "Literal"
                                            • start: 374
                                            • end: 378
                                            • loc: {...}
                                              • start: {...}
                                                • line: 17
                                                • column: 22
                                                }
                                              • end: {...}
                                                • line: 17
                                                • column: 26
                                                }
                                              }
                                            • value: 1000
                                            • raw: "1000"
                                            }
                                          • operator: "-"
                                          • right: BinaryExpression {...}
                                            • type: "BinaryExpression"
                                            • start: 381
                                            • end: 389
                                            • loc: {...}
                                              • start: {...}
                                                • line: 17
                                                • column: 29
                                                }
                                              • end: {...}
                                                • line: 17
                                                • column: 37
                                                }
                                              }
                                            • left: Literal {...}
                                              • type: "Literal"
                                              • start: 381
                                              • end: 385
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 17
                                                  • column: 29
                                                  }
                                                • end: {...}
                                                  • line: 17
                                                  • column: 33
                                                  }
                                                }
                                              • value: 1000
                                              • raw: "1000"
                                              }
                                            • operator: "*"
                                            • right: Identifier {...}
                                              • type: "Identifier"
                                              • start: 388
                                              • end: 389
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 17
                                                  • column: 36
                                                  }
                                                • end: {...}
                                                  • line: 17
                                                  • column: 37
                                                  }
                                                }
                                              • name: "t"
                                              }
                                            }
                                          }
                                        ]
                                      • optional: false
                                      }
                                    • CallExpression {...}
                                      • type: "CallExpression"
                                      • start: 402
                                      • end: 429
                                      • loc: {...}
                                        • start: {...}
                                          • line: 18
                                          • column: 8
                                          }
                                        • end: {...}
                                          • line: 18
                                          • column: 35
                                          }
                                        }
                                      • callee: MemberExpression {...}
                                        • type: "MemberExpression"
                                        • start: 402
                                        • end: 410
                                        • loc: {...}
                                          • start: {...}
                                            • line: 18
                                            • column: 8
                                            }
                                          • end: {...}
                                            • line: 18
                                            • column: 16
                                            }
                                          }
                                        • object: Identifier {...}
                                          • type: "Identifier"
                                          • start: 402
                                          • end: 406
                                          • loc: {...}
                                            • start: {...}
                                              • line: 18
                                              • column: 8
                                              }
                                            • end: {...}
                                              • line: 18
                                              • column: 12
                                              }
                                            }
                                          • name: "Math"
                                          }
                                        • property: Identifier {...}
                                          • type: "Identifier"
                                          • start: 407
                                          • end: 410
                                          • loc: {...}
                                            • start: {...}
                                              • line: 18
                                              • column: 13
                                              }
                                            • end: {...}
                                              • line: 18
                                              • column: 16
                                              }
                                            }
                                          • name: "min"
                                          }
                                        • computed: false
                                        • optional: false
                                        }
                                      • arguments: [...] (2)
                                        • Literal {...}
                                          • type: "Literal"
                                          • start: 411
                                          • end: 413
                                          • loc: {...}
                                            • start: {...}
                                              • line: 18
                                              • column: 17
                                              }
                                            • end: {...}
                                              • line: 18
                                              • column: 19
                                              }
                                            }
                                          • value: 50
                                          • raw: "50"
                                          }
                                        • BinaryExpression {...}
                                          • type: "BinaryExpression"
                                          • start: 415
                                          • end: 428
                                          • loc: {...}
                                            • start: {...}
                                              • line: 18
                                              • column: 21
                                              }
                                            • end: {...}
                                              • line: 18
                                              • column: 34
                                              }
                                            }
                                          • left: Literal {...}
                                            • type: "Literal"
                                            • start: 415
                                            • end: 418
                                            • loc: {...}
                                              • start: {...}
                                                • line: 18
                                                • column: 21
                                                }
                                              • end: {...}
                                                • line: 18
                                                • column: 24
                                                }
                                              }
                                            • value: 500
                                            • raw: "500"
                                            }
                                          • operator: "-"
                                          • right: BinaryExpression {...}
                                            • type: "BinaryExpression"
                                            • start: 421
                                            • end: 428
                                            • loc: {...}
                                              • start: {...}
                                                • line: 18
                                                • column: 27
                                                }
                                              • end: {...}
                                                • line: 18
                                                • column: 34
                                                }
                                              }
                                            • left: Literal {...}
                                              • type: "Literal"
                                              • start: 421
                                              • end: 424
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 18
                                                  • column: 27
                                                  }
                                                • end: {...}
                                                  • line: 18
                                                  • column: 30
                                                  }
                                                }
                                              • value: 500
                                              • raw: "500"
                                              }
                                            • operator: "*"
                                            • right: Identifier {...}
                                              • type: "Identifier"
                                              • start: 427
                                              • end: 428
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 18
                                                  • column: 33
                                                  }
                                                • end: {...}
                                                  • line: 18
                                                  • column: 34
                                                  }
                                                }
                                              • name: "t"
                                              }
                                            }
                                          }
                                        ]
                                      • optional: false
                                      }
                                    ]
                                  • quasis: [...] (6)
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 252
                                      • end: 275
                                      • loc: {...}
                                        • start: {...}
                                          • line: 13
                                          • column: 12
                                          }
                                        • end: {...}
                                          • line: 14
                                          • column: 22
                                          }
                                        }
                                      • value: {...}
                                        • raw: "\n\t\t\t\t\ttransform: scale("
                                        • cooked: "\n\t\t\t\t\ttransform: scale("
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 283
                                      • end: 292
                                      • loc: {...}
                                        • start: {...}
                                          • line: 14
                                          • column: 30
                                          }
                                        • end: {...}
                                          • line: 14
                                          • column: 39
                                          }
                                        }
                                      • value: {...}
                                        • raw: ") rotate("
                                        • cooked: ") rotate("
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 307
                                      • end: 336
                                      • loc: {...}
                                        • start: {...}
                                          • line: 14
                                          • column: 54
                                          }
                                        • end: {...}
                                          • line: 16
                                          • column: 6
                                          }
                                        }
                                      • value: {...}
                                        • raw: "deg);\n\t\t\t\t\tcolor: hsl(\n\t\t\t\t\t\t"
                                        • cooked: "deg);\n\t\t\t\t\tcolor: hsl(\n\t\t\t\t\t\t"
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 350
                                      • end: 358
                                      • loc: {...}
                                        • start: {...}
                                          • line: 16
                                          • column: 20
                                          }
                                        • end: {...}
                                          • line: 17
                                          • column: 6
                                          }
                                        }
                                      • value: {...}
                                        • raw: ",\n\t\t\t\t\t\t"
                                        • cooked: ",\n\t\t\t\t\t\t"
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 391
                                      • end: 400
                                      • loc: {...}
                                        • start: {...}
                                          • line: 17
                                          • column: 39
                                          }
                                        • end: {...}
                                          • line: 18
                                          • column: 6
                                          }
                                        }
                                      • value: {...}
                                        • raw: "%,\n\t\t\t\t\t\t"
                                        • cooked: "%,\n\t\t\t\t\t\t"
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 430
                                      • end: 439
                                      • loc: {...}
                                        • start: {...}
                                          • line: 18
                                          • column: 36
                                          }
                                        • end: {...}
                                          • line: 19
                                          • column: 7
                                          }
                                        }
                                      • value: {...}
                                        • raw: "%\n\t\t\t\t\t);"
                                        • cooked: "%\n\t\t\t\t\t);"
                                        }
                                      • tail: true
                                      }
                                    ]
                                  }
                                }
                              ]
                            }
                          }
                        • kind: "init"
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Custom CSS transitions • Playground • Svelte