https://github.com/pixelmund/svelte-animate-on-scroll
https://github.com/pixelmund/svelte-animate-on-scroll
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/pixelmund/svelte-animate-on-scroll
- Owner: pixelmund
- Created: 2025-04-30T09:32:44.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-04-30T09:46:03.000Z (about 1 month ago)
- Last Synced: 2025-04-30T11:28:46.086Z (about 1 month ago)
- Language: CSS
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-animate-on-scroll
A lightweight and customizable animate-on-scroll library for Svelte applications. Add beautiful scroll animations to your components with ease.
## Installation
```bash
npm install svelte-animate-on-scroll
```
## Usage
```svelte
import { AOS } from 'svelte-animate-on-scroll';
This will fade up on scroll
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| animate | string | required | Animation type to apply. See [Available Animations](#available-animations) |
| ease | string | 'ease-in-out' | Easing function to use. See [Available Easings](#available-easings) |
| delay | number | 0 | Delay before animation starts (in milliseconds) |
| duration | number | 300 | Duration of the animation (in milliseconds) |
| distance | string | '100px' | Distance for translate animations |
| once | boolean | true | Whether animation should only happen once |
| top | number | 0 | Offset from top of viewport before triggering |
| bottom | number | 0 | Offset from bottom of viewport before triggering |
| class | object | { container: '', animate: '' } | Custom classes for container and animated elements |
| onupdate | function | (observing) => {} | Callback when visibility changes |
## Available Animations
- Fade animations:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
- Zoom animations:
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
- Slide animations:
- slide-up
- slide-down
- slide-left
- slide-right
- Flip animations:
- flip-left
- flip-right
- flip-up
- flip-down
## Available Easings
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quadratic
- ease-out-quadratic
- ease-in-out-quadratic
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quartic
- ease-out-quartic
- ease-in-out-quartic
## Examples
```svelte
Content that fades up
Content that zooms in repeatedly
Content that slides from the left
{
console.log('Element is visible:', visible);
}}
>
Content that flips up
```
## Browser Support
The library uses the IntersectionObserver API with a fallback to getBoundingClientRect for older browsers. No additional polyfills are required for modern browsers.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT License