Skip to main content
Animates the opacity and scale of an element. in transitions animate from the provided values to an element’s default values. out transitions animate from an element’s default values to the provided values.

​
Usage

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

<div transition:scale>scales in and out</div>

<div in:scale>scales in</div>

<div out:scale>scales out</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
​
start
number
default:"0"
The scale value to animate from/to (where 1 is the element’s natural size). A value of 0 makes the element invisible, 0.5 makes it half-size, and 2 makes it double-size
​
opacity
number
default:"0"
The target opacity value (between 0 and 1) when the element is fully transitioned out

​
Example with parameters

<script>
	import { scale } from 'svelte/transition';
	import { backOut } from 'svelte/easing';
</script>

<div transition:scale={{ start: 0.5, duration: 600 }}>
	scales from 50% size
</div>

<div in:scale={{ start: 2, easing: backOut }}>
	scales down from 200% with bounce
</div>

<div out:scale={{ start: 0.7, opacity: 0.5 }}>
	scales to 70% while fading
</div>