svelte/transition

Edit this page on GitHub

The svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw and crossfade. They are for use with Svelte transitions.

fadepermalink

ts
function fade(
  node: Element,
  { delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;

transition:fade={params}

in:fade={params}

out:fade={params}

Animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.

fade accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default linear) — an easing function

You can see the fade transition in action in the transition tutorial.

<script>
  import { fade } from 'svelte/transition';
</script>

{#if condition}
  <div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
{/if}

blurpermalink

ts
function blur(
  node: Element,
  {
    delay,
    duration,
    easing,
    amount,
    opacity
  }?: BlurParams | undefined
): TransitionConfig;

transition:blur={params}

in:blur={params}

out:blur={params}

Animates a blur filter alongside an element's opacity.

blur accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicInOut) — an easing function
opacity (number, default 0) - the opacity value to animate out to and in from
amount (number | string, default 5) - the size of the blur. Supports css units (for example: "4rem"). The default unit is px

<script>
  import { blur } from 'svelte/transition';
</script>

{#if condition}
  <div transition:blur={{ amount: 10 }}>fades in and out</div>
{/if}

flypermalink

ts
function fly(
  node: Element,
  {
    delay,
    duration,
    easing,
    x,
    y,
    opacity
  }?: FlyParams | undefined
): TransitionConfig;

transition:fly={params}

in:fly={params}

out:fly={params}

Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.

fly accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function
x (number | string, default 0) - the x offset to animate out to and in from
y (number | string, default 0) - the y offset to animate out to and in from
opacity (number, default 0) - the opacity value to animate out to and in from

x and y use px by default but support css units, for example x: '100vw' or y: '50%'. You can see the fly transition in action in the transition tutorial.

<script>
  import { fly } from 'svelte/transition';
  import { quintOut } from 'svelte/easing';
</script>

{#if condition}
  <div
    transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
  >
    flies in and out
  </div>
{/if}

slidepermalink

ts
function slide(
  node: Element,
  {
    delay,
    duration,
    easing,
    axis
  }?: SlideParams | undefined
): TransitionConfig;

transition:slide={params}

in:slide={params}

out:slide={params}

Slides an element in and out.

slide accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function

axis (x | y, default y) — the axis of motion along which the transition occurs

<script>
  import { slide } from 'svelte/transition';
  import { quintOut } from 'svelte/easing';
</script>

{#if condition}
  <div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
    slides in and out horizontally
  </div>
{/if}

scalepermalink

ts
function scale(
  node: Element,
  {
    delay,
    duration,
    easing,
    start,
    opacity
  }?: ScaleParams | undefined
): TransitionConfig;

transition:scale={params}

in:scale={params}

out:scale={params}

Animates the opacity and scale of an element. in transitions animate from an element's current (default) values to the provided values, passed as parameters. out transitions animate from the provided values to an element's default values.

scale accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function
start (number, default 0) - the scale value to animate out to and in from
opacity (number, default 0) - the opacity value to animate out to and in from

<script>
  import { scale } from 'svelte/transition';
  import { quintOut } from 'svelte/easing';
</script>

{#if condition}
  <div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
    scales in and out
  </div>
{/if}

drawpermalink

ts
function draw(
  node: SVGElement & {
    getTotalLength(): number;
  },
  {
    delay,
    speed,
    duration,
    easing
  }?: DrawParams | undefined
): TransitionConfig;

transition:draw={params}

in:draw={params}

out:draw={params}

Animates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like <path> and <polyline>.

draw accepts the following parameters:

delay (number, default 0) — milliseconds before starting
speed (number, default undefined) - the speed of the animation, see below.
duration (number | function, default 800) — milliseconds the transition lasts
easing (function, default cubicInOut) — an easing function

The speed parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: duration = length / speed. A path that is 1000 pixels with a speed of 1 will have a duration of 1000ms, setting the speed to 0.5 will double that duration and setting it to 2 will halve it.

<script>
  import { draw } from 'svelte/transition';
  import { quintOut } from 'svelte/easing';
</script>

<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
  {#if condition}
    <path
      transition:draw={{ duration: 5000, delay: 500, easing: quintOut }}
      d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
      fill="none"
      stroke="cornflowerblue"
      stroke-width="0.1px"
      stroke-linejoin="round"
    />
  {/if}
</svg>

crossfadepermalink

ts
function crossfade({
  fallback,
  ...defaults
}: CrossfadeParams & {
  fallback?:
    | ((
        node: Element,
        params: CrossfadeParams,
        intro: boolean
      ) => TransitionConfig)
    | undefined;
}): [
  (
    node: any,
    params: CrossfadeParams & {
      key: any;
    }
  ) => () => TransitionConfig,
  (
    node: any,
    params: CrossfadeParams & {
      key: any;
    }
  ) => () => TransitionConfig
];

The crossfade function creates a pair of transitions called send and receive. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the fallback transition is used.

crossfade accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number | function, default 800) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function
fallback (function) — A fallback transition to use for send when there is no matching element being received, and for receive when there is no element being sent.

<script>
  import { crossfade } from 'svelte/transition';
  import { quintOut } from 'svelte/easing';

  const [send, receive] = crossfade({
    duration: 1500,
    easing: quintOut
  });
</script>

{#if condition}
  <h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
{:else}
  <small in:send={{ key }} out:receive={{ key }}>small elem</small>
{/if}

Typespermalink

BlurParamspermalink

ts
interface BlurParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
amount?: number | string;

ts
opacity?: number;

CrossfadeParamspermalink

ts
interface CrossfadeParams {…}

ts
delay?: number;

ts
duration?: number | ((len: number) => number);

ts
easing?: EasingFunction;

DrawParamspermalink

ts
interface DrawParams {…}

ts
delay?: number;

ts
speed?: number;

ts
duration?: number | ((len: number) => number);

ts
easing?: EasingFunction;

EasingFunctionpermalink

ts
type EasingFunction = (t: number) => number;

FadeParamspermalink

ts
interface FadeParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

FlyParamspermalink

ts
interface FlyParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
x?: number | string;

ts
y?: number | string;

ts
opacity?: number;

ScaleParamspermalink

ts
interface ScaleParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
start?: number;

ts
opacity?: number;

SlideParamspermalink

ts
interface SlideParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
axis?: 'x' | 'y';

TransitionConfigpermalink

ts
interface TransitionConfig {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
css?: (t: number, u: number) => string;

ts
tick?: (t: number, u: number) => void;

previous svelte/motion

next svelte/animate