svelte/animate

The svelte/animate module exports one function for use with Svelte animations.

flip

animate:flip={params}

The flip function calculates the start and end position of an element and animates between them, translating the x and y values. flip stands for First, Last, Invert, Play.

flip accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number | function, default d => Math.sqrt(d) * 120) — see below
easing (function, default cubicOut) — an easing function
duration can be provided as either:
- a number, in milliseconds.
- a function, distance: number => duration: number, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.

You can see a full example on the animations tutorial

<script>
	import { flip } from 'svelte/animate';
	import { quintOut } from 'svelte/easing';


	let list = [1, 2, 3];
</script>

{#each list as n (n)}
	<div animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
		{n}
	</div>
{/each}

svelte/easing

Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. svelte/easing contains 31 named exports, a linear ease and 3 variants of 10 different easing functions: in, out and inOut.

You can explore the various eases using the ease visualiser in the examples section.

ease	in	out	inOut
back	backIn	backOut	backInOut
bounce	bounceIn	bounceOut	bounceInOut
circ	circIn	circOut	circInOut
cubic	cubicIn	cubicOut	cubicInOut
elastic	elasticIn	elasticOut	elasticInOut
expo	expoIn	expoOut	expoInOut
quad	quadIn	quadOut	quadInOut
quart	quartIn	quartOut	quartInOut
quint	quintIn	quintOut	quintInOut
sine	sineIn	sineOut	sineInOut

svelte/register

To render Svelte components in Node.js without bundling, use require('svelte/register'). After that, you can use require to include any .svelte file.

require('svelte/register');


const App = require('./App.svelte').default;


...


const { html, css, head } = App.render({ answer: 42 });

To set compile options, or to use a custom file extension, call the register hook as a function:

require('svelte/register')({
  extensions: ['.customextension'], // defaults to ['.html', '.svelte']
	preserveComments: true
});