https://github.com/michaelsynan/nuxt-intersection-observer
A Nuxt module that uses a Vue custom directive and the Intersection Observer API to trigger animations
https://github.com/michaelsynan/nuxt-intersection-observer
animation intersection-observer intersectionobserver-api nuxt nuxt-module
Last synced: 4 months ago
JSON representation
A Nuxt module that uses a Vue custom directive and the Intersection Observer API to trigger animations
- Host: GitHub
- URL: https://github.com/michaelsynan/nuxt-intersection-observer
- Owner: michaelsynan
- Created: 2024-06-29T15:03:03.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-09-26T11:59:31.000Z (9 months ago)
- Last Synced: 2025-02-06T20:41:49.852Z (4 months ago)
- Topics: animation, intersection-observer, intersectionobserver-api, nuxt, nuxt-module
- Language: TypeScript
- Homepage:
- Size: 994 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt Intersection Observer
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Nuxt module using a Vue custom directive and the Intersection Observer API to trigger animations.
- [✨ Release Notes](/CHANGELOG.md)
## Features
- 🎯 Trigger animations on elements entering the viewport
- 🚀 Smooth transitions using the Intersection Observer API
- 🌟 Customizable animation effects (coming soon)
## Quick Setup
Install the module to your Nuxt application with one command:
```bash
npx nuxi module add nuxt-intersection-observer
```
That's it! You can now use Nuxt Intersection Observer in your Nuxt app ✨
## Usage
Add the module to your `nuxt.config.ts`:
```typescript
export default defineNuxtConfig({
modules: [
'nuxt-intersection-observer'
],
})
```
Use the directive in your components:
```html
This content will fade in when it enters the viewport.
```
## Contribution
Local development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-intersection-observer/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-intersection-observer
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-intersection-observer.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-intersection-observer
[license-src]: https://img.shields.io/npm/l/nuxt-intersection-observer.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-intersection-observer
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com