scale

API reference for the scale transition in Svelte

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>