Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/DaveKeehl/svelte-reveal

Svelte action that leverages the Intersection Observer API to trigger reveal on scroll transitions.
https://github.com/DaveKeehl/svelte-reveal

animation intersection javascript observer reveal scroll svelte sveltejs sveltekit transition

Last synced: 2 months ago
JSON representation

Svelte action that leverages the Intersection Observer API to trigger reveal on scroll transitions.

Host: GitHub
URL: https://github.com/DaveKeehl/svelte-reveal
Owner: DaveKeehl
License: mit
Created: 2021-07-28T15:07:31.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-04-14T12:46:45.000Z (2 months ago)
Last Synced: 2024-04-14T16:06:21.860Z (2 months ago)
Topics: animation, intersection, javascript, observer, reveal, scroll, svelte, sveltejs, sveltekit, transition
Language: TypeScript
Homepage: https://stackblitz.com/edit/svelte-reveal?file=src%2FApp.svelte
Size: 9.32 MB
Stars: 104
Watchers: 2
Forks: 2
Open Issues: 6
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Lists

awesome-stars - DaveKeehl/svelte-reveal - Svelte action that leverages the Intersection Observer API to trigger reveal on scroll transitions. (TypeScript)

README

        ![](https://cdn.sanity.io/images/mbh58i22/production/1f71d5306d82ec00b28d884a1d5482b92205988a-2560x1280.png)

# Svelte Reveal

![npm](https://img.shields.io/npm/v/svelte-reveal) ![npm](https://img.shields.io/npm/dw/svelte-reveal) ![GitHub](https://img.shields.io/github/license/davekeehl/svelte-reveal)

Svelte Reveal is a library created with the purpose of helping [Svelte](https://svelte.dev/) users add reveal on scroll animations to their web applications in the easiest way possible. This library leverages the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in order to know when to trigger the animations.

## Features

- ⚡️ Near zero config

- 👀 Intersection Observer API

- 🧩 Customizable transitions

- 🔌 Extensive API

- 📚 Exhaustive documentation

- 🔥 100% TypeScript

## Documentation

The documentation is available [here](./packages/svelte-reveal/README.md).

## Monorepo

| Name                                            | Purpose | Description                                                  |

| ----------------------------------------------- | ------- | ------------------------------------------------------------ |

| [svelte-reveal](./packages/svelte-reveal)       | package | The Svelte action that gets published on NPM                 |

| [with-svelte-vite](./examples/with-svelte-vite) | example | Basic example project on how to use Svelte Reveal with Svelte + Vite |

| [with-sveltekit](./examples/with-sveltekit)     | example | Basic example project on how to use Svelte Reveal with SvelteKit |

## Troubleshooting

Feel free to [open a new issue](https://github.com/DaveKeehl/svelte-reveal/issues/new/choose) in case of any problems.

## Funding

[Want to buy me a coffee?](https://ko-fi.com/davekeehl)

## Versioning

This project uses [Semantic Versioning](https://semver.org/) to keep track of its version number.

## Changelog

[CHANGELOG](./packages/svelte-reveal/CHANGELOG.md)

## License

[MIT](./LICENSE)