@bobbymannino/svelte-on-screen v1.1.0

Svelte On Screen

Description

An element for controlling wether an element is in the viewport using intersection observer that's:

• TypeScript First
• Customizable With Props
• Easy To Use

Demo

Demo Site

Installation

npm install --save-dev @bobbymannino/svelte-on-screen

Usage

<!-- +page.svelte -->

<script lang="ts">
	import { OnScreen } from "@bobbymannino/svelte-on-screen";

	let showing: boolean;
</script>

<OnScreen bind:showing>
	<div class:animate="{showing}">
		<h1>Some Title</h1>
		<p>Some more words...</p>
	</div>
</OnScreen>

Configuration

<!-- +page.svelte -->

<OnScreen bind:showing threshold="{0.5}" rootMargin="100px" once="{true}">
	<div class:animate="{showing}">
		<h1>Some Title</h1>
		<p>Some more words...</p>
	</div>
</OnScreen>

Bugs & Features

Submit all bugs and/or feature requests to the issues panel panel on GitHub