How to Use Fly Transition in Svelte for Smooth Animations

In Svelte, use the fly transition by importing it from 'svelte/transition' and applying it with the transition:fly directive on an element. Customize the animation by setting properties like x, y, duration, and opacity to control movement and fade effects.

Syntax

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

• x: horizontal distance in pixels the element moves from/to
• y: vertical distance in pixels the element moves from/to
• duration: time in milliseconds for the animation
• opacity: starting opacity value (default is 0)

Example syntax:

svelte

import { fly } from 'svelte/transition';

<div transition:fly={{ x: 200, y: 0, duration: 500, opacity: 0 }}>
  Animated content
</div>

Example

This example shows a button that toggles a box with a fly transition. The box flies in from the left and fades in, then flies out and fades out when hidden.

svelte

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

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

{#if visible}
  <div transition:fly={{ x: -300, duration: 400, opacity: 0 }}
       style="width: 200px; height: 100px; background-color: #4caf50; color: white; display: flex; align-items: center; justify-content: center; margin-top: 1rem; border-radius: 8px;">
    Flying Box
  </div>
{/if}

Output

A button labeled 'Toggle Box'. When clicked, a green box slides in from the left and fades in below the button. Clicking again slides the box out to the left and fades it out.

Common Pitfalls

Common mistakes when using fly transition include:

• Not importing fly from 'svelte/transition', causing errors.
• Forgetting to wrap the element in an {#if} block to trigger enter/leave transitions.
• Setting x and y to zero, which results in no visible movement.
• Using very short duration values that make the animation too fast to notice.

Example of a wrong and right usage:

svelte

<script>
  // Wrong: missing import and no if block
  let visible = true;
</script>

<!-- This will not animate because fly is not imported and no conditional rendering -->
<div transition:fly={{ x: 100 }}>
  No animation
</div>

<script>
  import { fly } from 'svelte/transition';
  let visible = true;
</script>

{#if visible}
  <div transition:fly={{ x: 100, duration: 300 }}>
    Correct animation
  </div>
{/if}

Quick Reference

Summary tips for using fly transition:

• Always import fly from 'svelte/transition'.
• Use {#if} blocks to trigger transitions on element mount/unmount.
• Customize x and y to control direction and distance.
• Adjust duration for speed and opacity for fade effect.
• Combine with other transitions or animations for complex effects.

Key Takeaways

Import fly from 'svelte/transition' and apply with transition:fly directive.

Use {#if} blocks to animate elements entering or leaving the DOM.

Set x and y to control the direction and distance of the fly animation.

Adjust duration and opacity for smooth and visible transitions.

Avoid missing imports and zero movement values to prevent no animation.