hypnagaga/src/components/Visible/stories/docs/component.md

Wrap components or other HTML elements to determine if they are visible on the page using the Intersection Observer API.

This is really useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.

Pro tip: Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.

<script>
  import { Visible } from '@reuters-graphics/graphics-components';
</script>

<Visible let:visible>
  {#if visible}
    <p>Visible!</p>
  {:else}
    <p>Not yet visible.</p>
  {/if}
</Visible>