Skip to main content
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>