import { fade } from 'svelte/transition';

import LazyLoad from '@dimfeld/svelte-lazyload';

let name = 'world';

let visible = false;

</script>

<div style="position:fixed;top:0">

Visible: {visible}

</div>

<div style="height:150vh">

<div style="margin-top:2rem">

Scroll down to see the element fade in when it is created.

</div>

</div>

<LazyLoad height="4rem" bind:visible on:visible={() => console.log('Visible event')}>

<h1 in:fade={{ duration: 5000 }}>Hello {name}!</h1>

</LazyLoad>