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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-08-28T19:20:49.000Z (5 months ago)
• Last Synced: 2024-10-30T00:32:23.477Z (3 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.68 MB
• Stars: 131
• Watchers: 2
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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)