Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

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

{{#if visible}}
  <div in:fade="{ duration: 300 }" out:fly="{ duration: 300, delay: 300, y: -80 }">
	  <div class="inner" transition:scale="{ duration: 600 }"></div>
  </div>
{{/if}}

<style>
	.inner {
		width: 200px;
		height: 200px;
		background: red;
	}
</style>

<script>
	import { cubicOut } from 'eases-jsnext';
	import { fade, fly } from 'svelte-transitions'
	export default {
		transitions: {
      fly,
      fade,
			scale(
				node,
				{ delay = 0, duration = 400, easing = cubicOut, initial = 0 }
			) {
				const diff = initial - 1;

				return {
					delay,
					duration,
					easing,
					css: t => `transform: scale(${initial - (t * diff)});`
				};
			}
		}
	};
</script>

data.json

{
  "name": "world"
}