Svelte Transitions Fade

Fade transition plugin for Svelte

DEPRECATED — As of Svelte v3, transitions are built into the main package


Fade transition plugin for Svelte. Demo


Recommended usage is via svelte-transitions, but you can use this module directly if you prefer. Note that it assumes an ES module or CommonJS environment.

Install with npm or yarn:

npm install --save svelte-transitions-fade

Then add the plugin to your Svelte component's exported definition:

  <input type='checkbox' bind:checked='visible'> visible

{#if visible}
  <!-- use `in`, `out`, or `transition` (bidirectional) -->
  <div transition:fade>hello!</div>

  import fade from 'svelte-transitions-fade';

  export default {
    transitions: { fade }


You can specify delay and duration parameters, which default to 0 and 400 respectively:

<div in:fade='{delay: 250, duration: 1000}'>
  fades in slowly after a short delay



Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes