fly

API reference for the fly transition in Svelte

Animates the x and y positions and the opacity of an element. in transitions animate from the provided values to the element’s default values. out transitions animate from the element’s default values to the provided values.

Usage

<script>
	import { fly } from 'svelte/transition';
</script>

<div transition:fly={{ y: 200 }}>flies in and out</div>

<div in:fly={{ x: -200 }}>flies in from the left</div>

<div out:fly={{ y: -200 }}>flies out upward</div>

Parameters

delay · number · default: "0"

Milliseconds before starting the transition

duration · number · default: "400"

Duration of the transition in milliseconds

easing · function · default: "cubicOut"

An easing function that controls the animation curve

x · number | string · default: "0"

The horizontal offset to animate from/to. Can be a number (pixels) or a CSS length string (e.g., ‘100px’, ‘50vw’)

y · number | string · default: "0"

The vertical offset to animate from/to. Can be a number (pixels) or a CSS length string (e.g., ‘100px’, ‘50vh’)

opacity · number · default: "0"

The target opacity value (between 0 and 1) when the element is fully transitioned out

Example with parameters

<script>
	import { fly } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

<div in:fly={{ y: 200, duration: 1000, easing: quintOut }}>
	flies in from below
</div>

<div in:fly={{ x: '100vw', opacity: 0.5 }}>
	flies in from right edge
</div>