Svelte Inview

A Svelte component that monitors an element enters or leaves the viewport/parent element. Performant and efficient thanks to using Intersection Observer under the hood. Can be used in multiple projects including lazy loading images, infinite scrolling, playing/pausing the video when in the viewport, tracking user behaviour firing link pre-fetching and animations and many many more.

🔥Check it out live here

Why bother?

• 👓️Watch for any element that enters or leaves the viewport (or another wrapper/parent element).
• 🏎️Thanks to using Intersection Observer, Svelte Inview is blazing fast and doesn't block the main thread.
• 📦️ Tiny, yet powerful (just ~2kb). No external dependencies (well, apart from Svelte).
• 🎛️ Use it in several different scenarios such as lazy loading images, infinite scrolling, playing/pausing the video when in the viewport, firing link pre-fetching, animations and many many more.
• 🐥Easy to use API.
• ↕️ Detects the scrolling direction.

Installation

The only thing you need is Svelte itself.

Installation

Svelte Inview is distributed via npm.

$ yarn add svelte-inview
# or 
$ npm install --save svelte-inview

⚠️ Modern browsers have the full support of Intersection Observer, but if you need to support ones like IE you can use this simple polyfill. Just install it and import it in your project.

Usage

Basic Use Case

This is the most basic use case for svelte-inview. The ref props is required. You can also pass other configuration props. You can check if the element is visible by getting the inView from the component or from the inside of the callback method - on:change.

 
<script>
  import Inview from 'svelte-inview';
  let ref;
</script> 
 
<Inview
  let:inView
  wrapper={ref}
  on:change={(event) => {
    const { inView, entry, scrollDirection, observe, unobserve } = event.detail;
  }}
  on:enter={(event) => {
    const { entry, scrollDirection, observe, unobserve } = event.detail;
  }}
  on:leave={(event) => {
    const { entry, scrollDirection, observe, unobserve } = event.detail;
  }}>
  <div bind:this={ref}>{inView ? 'Hey I am in the viewport' : 'Bye, Bye'}</div>
 
</Inview>

Lazy Loading Images

Svelte Inview lets you easily lazy load images. For a better UX we can pass a rootMargin="50px" props, so the image will be loaded when scroll is 50px before the viewport. After it's in the DOM, you don't want to observe it anymore, hence the unobserveOnEnter props set to true.

 
<script>
  import
  import Inview from 'svelte-inview';
  let ref;
</script> 
 
<Inview
  let:inView={inView}
  wrapper={ref}
  rootMargin="50px"
  unobserveOnEnter={true}
  <div bind:this={ref}>
    {#if inView}
      <img src="path/to/image.jpg">
    {:else}
      <div class="placeholder" />
    {/if}
  </div>
 
</Inview>

Video Control

You can play/pause a video when it's in/out of the viewport. Simply pass correct methods in on:enter and on:leave callbacks.

<script>
  import Inview from 'svelte-inview';
  let ref;
  let videoRef;
</script> 
 
<Inview
  wrapper={ref}
  on:enter={() => videoRef.play()}
  on:leave={() => videoRef.pause()}>
  <div bind:this={ref}>
    <video width="500" controls bind:this={videoRef}>
      <source src="path/to/video.mp4" type="video/mp4" />
    </video>
  </div>
</Inview>

Animations

You can also add some cool animations when an element enters the viewport. To make sure the animation won't fire too soon you can pass a negative value to rootMargin. When inView is true add an animation class to your target. Additionally, you can detect the scroll direction to make the animations even cooler!

 
<script>
  import
  import Inview from 'svelte-inview';
  let ref;
</script> 
 
<Inview
  let:inView
  let:scrollDirection
  wrapper={ref}
  rootMargin="-50px"
  unobserveOnEnter={true}>
  <div bind:this={ref}>
    <div
      class:animate={inView}
      class:animateFromBottom={scrollDirection.vertical === 'down'}
      class:animateFromTop={scrollDirection.vertical === 'top'}>
      Animate me!
    </div>
  </div>
 
</Inview>

API

Props

Callback arguments

Additional Info

Usage with rootMargin

If you want to increase or decrease the area of the root, just pass the rootMargin. On the image below you can see the blue area being the root. It means that every time, the target element will enter or leave that area (or meet the specified threshold), a callback will be fired.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Maciek Grzybek - @maciek_g88 - maciekgrzybek1@gmail.com - www.maciekgrzybek.dev