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: 30 days 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 5 years ago)
• Default Branch: main
• Last Pushed: 2024-08-28T19:20:49.000Z (almost 2 years ago)
• Last Synced: 2024-10-30T00:32:23.477Z (over 1 year 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

          
![Svelte Reveal](./assets/hero.png)

> ⚠️ **This package has been sunset**

> Svelte Reveal is no longer actively maintained. The final release is version **1.2.0**. Please see the [package README](./packages/svelte-reveal/README.md) for context and recommended alternatives.

# 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

You can find full documentation on [svelte-reveal.vercel.app](https://svelte-reveal.vercel.app/).

## 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)