SvelteHow-ToBeginner · 3 min read

How to Use Scale Transition in Svelte: Simple Guide

In Svelte, use the scale transition by importing it from 'svelte/transition' and applying it with the transition:scale directive on an element. You can customize the scale effect with parameters like duration and start to control animation speed and initial size.

📐

Syntax

The scale transition is imported from 'svelte/transition' and used with the transition:scale directive on an element. You can pass an optional object with parameters:

duration: time in milliseconds for the animation
start: the initial scale value (default is 0)
opacity: whether to animate opacity along with scale (default is true)

svelte

import { scale } from 'svelte/transition';

<div transition:scale={{ duration: 400, start: 0.5, opacity: true }}>
  Content to scale
</div>

Output

The element smoothly scales from half size (0.5) to full size (1) over 400 milliseconds while fading in.

💻

Example

This example shows a button that toggles the visibility of a box with a scale transition. The box grows from 0 to full size when shown and shrinks back when hidden.

svelte

<script>
  import { scale } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible} aria-pressed={visible} aria-label="Toggle box visibility">
  Toggle Box
</button>

{#if visible}
  <div transition:scale={{ duration: 300 }} style="width: 150px; height: 150px; background-color: #4caf50; margin-top: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
    Scaled Box
  </div>
{/if}

Output

A button labeled 'Toggle Box' toggles a green square that smoothly scales in and out when shown or hidden.

⚠️

Common Pitfalls

Common mistakes when using scale transition include:

Not importing scale from 'svelte/transition', causing errors.
Forgetting to use the transition: directive, which means no animation happens.
Setting start to 0 without adjusting opacity, which can cause the element to be invisible during animation.
Applying the transition on elements that are not conditionally rendered, so the animation never triggers.

Example of wrong and right usage:

svelte

<!-- Wrong: missing import and directive -->
<div scale={{ duration: 300 }}>No animation</div>

<!-- Right: correct import and directive -->
<script>
  import { scale } from 'svelte/transition';
</script>
<div transition:scale={{ duration: 300 }}>Animated content</div>

Output

The first div does not animate; the second div smoothly scales in and out.

📊

Quick Reference

Parameter	Type	Default	Description
duration	number	400	Time in milliseconds for the transition
start	number	0	Initial scale value (0 means no size)
opacity	boolean	true	Animate opacity along with scale

✅

Key Takeaways

Import scale from 'svelte/transition' before using it.

Use transition:scale directive on elements to apply the scale animation.

Customize animation speed and start size with duration and start parameters.

Ensure the element is conditionally rendered to see the transition effect.

Remember to handle opacity if you want fade effects along with scaling.