svelte-fancy-transitions

A collection of fancy and customizable transitions for Svelte 5, including flyIn, flyOut, and turn.

Installation

Simply add it via your package manager:

npm install svelte-fancy-transitions
pnpm add svelte-fancy-transitions
yarn add svelte-fancy-transitions

Docs

Usage

Fly transitions

<script>
  import { flyIn, flyOut } from 'svelte-fancy-transitions';
  let show = $state(false);
</script>

{#if show}
  <div in:flyIn out:flyOut>
    Example
  </div>
{/if}

<button onclick={() => show = !show}>
  show/hide
</button>

Turn transition

For turn to work properly, the target element should be absolute inside a container with a CSS perspective:

<script>
  import { turn } from 'svelte-fancy-transitions';
  let seconds = $state(0);
  const tick = setInterval(() => { seconds += 1 }, 1000);
</script>

<div style="perspective: 50px">
  {#key seconds}
    <h3 in:turn out:turn={{ reverse: true }} style="position: absolute;">
      {seconds}
    </h3>
  {/key}
</div>

Note: setting reverse: true in out: makes the element exit in the opposite direction.

Customization

Each transition accepts a typed config object: FlyParams or TurnParams. These define customizable options like duration, delay, scaling, easing, etc.

FlyParams:

type FlyParams = {
  delay?: number;
  duration?: number;
  scaling?: number;
  blur?: number;
  easing?: (t: number) => number;
  reverse?: boolean;
};

FlyParams:

type TurnParams = {
   delay?: number;
   duration?: number;
   easing?: (t: number) => number;
   origin?: string;
   angle?: number;
   axis?: "x" | "y";
   reverse?: boolean;
};

Usage example:

<script lang="ts">
  import { flyIn, flyOut, type FlyParams } from 'svelte-fancy-transitions';

  const options: FlyParams = {
    duration: 800,
    scaling: 1.5,
    reverse: true
  };
</script>

<div in:flyIn={options} out:flyOut={options}>
  Example
</div>

You can experiment with parameters live in the Playground.

Contributing

Contributions are welcome! If you’d like to add new transitions, improve documentation, or fix a bug — feel free to open a PR.

Development setup

1. Clone the repository:

   git clone https://github.com/Mr1am/SvelteFancyTransitions.git
   cd svelte-fancy-transitions

2. Install dependencies:

   pnpm install

3. Start the playground for live testing:

   pnpm dev

Guidelines

• Always provide a typed config object (e.g. FlyParams, TurnParams).
• Add examples of new transitions to /playground and document them in /docs.

Pull requests

1. Fork the repo and create a new branch:

   git checkout -b feature/my-transition

2. Make your changes and add/update examples.
3. Commit with a clear message:

   git commit -m "feat: add *name* transition"

4. Push your branch and open a Pull Request