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 transition:scale></div>
{{/if}}

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

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

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

data.json

{
  "name": "world"
}