Skip to content
This repository was archived by the owner on Aug 11, 2019. It is now read-only.

sveltejs/svelte-transitions-draw

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

svelte-transitions-draw (demo)

Draw transition plugin for Svelte.

This transition will only work with <path> elements.

draw

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

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

<label>
  <input type=checkbox bind:checked=visible> visible
</label>

<svg viewBox='0 0 100 100'>
  {#if visible}
    <path d="M10,10 L90,10 90,90 10,90 Z" transition:draw/>
  {/if}
</svg>

<script>
  import draw from 'svelte-transitions-draw';

  export default {
    transitions: { draw }
  };
</script>

Parameters

As with most transitions, you can specify delay and duration parameters (both in milliseconds) and a custom easing function (which should live on your helpers):

<path
  in:draw='{delay: 250, duration: 1000, easing: quintOut}'
  d='M10,10 L90,10 90,90 10,90 Z'
/>

<script>
  import draw from 'svelte-transitions-draw';
  import { elasticOut } from 'eases-jsnext';

  export default {
    helpers: { elasticOut },
    transitions: { draw }
  };
</script>

License

LIL

Packages

No packages published

Contributors 2

  •  
  •