Name: svelte-transitions-draw
Owner: Svelte
Description: Draw transition plugin for Svelte
Created: 2018-05-17 00:29:19.0
Updated: 2018-05-18 09:46:37.0
Pushed: 2018-05-17 16:03:04.0
Homepage: https://svelte.technology/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50
Size: 4
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Draw transition plugin for Svelte.
This transition will only work with <path> elements.
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:
install --save svelte-transitions-draw
Then add the plugin to your Svelte component's exported definition:
el>
nput type=checkbox bind:checked=visible> visible
bel>
viewBox='0 0 100 100'>
if visible}
<path d="M10,10 L90,10 90,90 10,90 Z" transition:draw/>
if}
g>
ipt>
port draw from 'svelte-transitions-draw';
port default {
transitions: { draw }
ript>
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):
h
:draw='{delay: 250, duration: 1000, easing: quintOut}'
'M10,10 L90,10 90,90 10,90 Z'
ipt>
port draw from 'svelte-transitions-draw';
port { elasticOut } from 'eases-jsnext';
port default {
helpers: { elasticOut },
transitions: { draw }
ript>