<script lang="ts">
  import { inview } from 'svelte-inview'
  import { fly } from 'svelte/transition'

  let { height = 'large', flyFrom = 'left', children}  = $props()
  let visible = $state(false)

  
</script>

<div>
  {#if visible}
    <div in:fly={{x:(flyFrom=='right'? 50: -50), duration: 700}}>
      {@render children()}
    </div>
  {:else}
    <div class="{height}-height">
      <div use:inview oninview_enter={()=>visible=true} class="absolute middle"></div>
    </div>
  {/if}
</div>