svelte-transitions-fly

Fly transition plugin for Svelte

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
svelte-transitions-fly
411.0.46 years ago7 years agoMinified + gzip package size for svelte-transitions-fly in KB

Readme

svelte-transitions-fly
Fly transition plugin for Svelte. Demo
fly-hello

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

Then add the plugin to your Svelte component's exported definition:
<label>
  <input type='checkbox' bind:checked='visible'> visible
</label>

{#if visible}
  <!-- use `in`, `out`, or `transition` (bidirectional) -->
  <div transition:fly='{y:-20}'>hello!</div>
{/if}

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

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

Parameters

x and y are the position the node will fly in from (and out to). Both default to zero:
<div in:fly='{x: -200}'>
  flies in from the left
</div>

You can also specify delay and duration parameters, which default to 0 and 400 respectively, and a custom easing function (which should live on your helpers):
<div in:fly='{x: -200, delay: 250, duration: 1000, easing: elasticOut}'>
  wheee!!!!
</div>

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

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

License

MIT