svelte-transitions-fade-scale

A transition plugin for Svelte that fades and scales in an element in parallel. Demo

Usage

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-scale

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

<script>
  import fadeScale from 'svelte-transitions-fade-scale';
 
  let visible = false;
</script> 
 
<label>
  <input type='checkbox' bind:checked={visible}> visible
</label>
 
{#if visible}
  <!-- use `in`, `out`, or `transition` (bidirectional) -->
  <div transition:fadeScale>hello!</div>
{/if}

Parameters

You can specify delay, duration, easing, and baseScale parameters, which default to 0, 400, x => sx, and 0 repectively:

<script>
  import { cubicInOut } from 'svelte/easing';
</script> 
 
<div
  in:fadeScale={{
    delay: 250,
    duration: 1000,
    easing: cubicInOut,
    baseScale: 0.5
  }}
>
  fades and scales in slowly from 0 opacity and 0.5 scaling after a short delay with cubic easing
</div>

License

MIT