🎨 Animate on Scroll - Modern & Livewire Compatible

A modern, TypeScript-based animate-on-scroll library that's fully compatible with Laravel Livewire. Solves the animation state persistence issue that occurs with dynamic DOM updates.

✨ Features

• 🚀 Modern: Built with TypeScript, SCSS, and ES Modules
• ⚡ Lightweight: ~2KB minified + gzipped
• 🔧 Livewire Compatible: Maintains animation state during Livewire updates
• 🎯 Performance: Uses IntersectionObserver API for efficient scroll detection
• 📱 Accessible: Respects prefers-reduced-motion setting
• 🎨 CSS Custom Properties: Dynamic timing and easing controls
• ⚡ Zero-Class Approach: Uses [data-aos] selectors for instant page load styling

🚀 Installation

npm install maskowsoftwares/animate-on-scroll

📖 Basic Usage

ES Modules (Recommended)

import { init } from '@maskowsoftwares/animate-on-scroll';
import '@maskowsoftwares/animate-on-scroll/dist/animate-on-scroll.css';

// Initialize
init();

HTML + Script Tags

<link rel="stylesheet" href="node_modules/@maskowsoftwares/animate-on-scroll/dist/animate-on-scroll.css">
<script src="node_modules/@maskowsoftwares/animate-on-scroll/dist/animate-on-scroll.iife.js"></script>
<script>
  AOS.init();
</script>

Add animations to your HTML

<!-- Elements are automatically hidden on page load via [data-aos] selector -->
<div data-aos="fade-up">Fade up animation</div>
<div data-aos="fade-down" data-aos-delay="100">Fade down with delay</div>
<div data-aos="zoom-in" data-aos-duration="1000">Slow zoom in</div>

✨ Instant Page Load: Unlike other AOS libraries, elements with data-aos attributes are immediately hidden via CSS [data-aos] selectors - no JavaScript required for initial styling!

Options

| Option | Default | Description | | --- | --- | --- | | offset | 120 | Pixel distance before an element fully enters the viewport to trigger. | | once | true | If true, run only the first time the element becomes visible. | | delay | 0 | Fallback delay (ms) for elements without data-aos-delay. | | duration | 400 | Fallback duration (ms) for elements without data-aos-duration. | | easing | 'ease' | CSS easing string. | | disable | false | Skip setup entirely. | | respectReducedMotion | true | Disable animations when the user prefers reduced motion. |

Development

npm install
npm run build

Outputs land in dist/ as ESM, CJS, IIFE bundles plus a minified CSS file.