animatePage.js 🎭

A high-performance, lightweight typography preloader library. animatePage.js transforms standard loading screens into cinematic experiences by splitting text into individual characters and applying GPU-accelerated morphing animations.

---

✨ Features

* 7 Cinematic Animations: Choose between morph, wave, flip, glitch, blur, reveal, and pulse.
* Zero Dependencies: 100% Vanilla JavaScript.
* Staggered Letter Logic: Automatic character-level DOM manipulation for fluid motion.
* Fully Customizable: Control colors, speeds, fonts, and sizes via a simple API.
* High Performance: Optimized with CSS will-change and transform for 60FPS smoothness.

---

🌐 Live Demo

Experience the cinematic animations in real-time on our interactive playground:

👉 Launch Live Demo

---

📸 Preview


> Note: The demo allows you to toggle between all 7 animation styles and customize colors to see how the engine adapts to your branding.

🚀 Installation

$3

Download animatePage.js and include it in your project directory.

$3

``bash
npm install animate-preloader-pro

`

---

🛠 Usage

Since this is an ES6 Module, ensure your script tag uses type="module".

$3

`javascript
import animatePage from './animatePage.js';

// 1. Initialize settings
animatePage.init({
bg: '#0a0a0a', // Background Color
fg: '#00ffcc', // Text Color
size: '5rem', // Font Size (px, rem, vw)
font: 'sans-serif' // Font Family
});

// 2. Start the animation
// animatePage.on(text, animationStyle)
animatePage.on("LOADING", "morph");

// 3. Stop the animation
setTimeout(() => {
animatePage.off();
}, 3000);

`

---

🎨 Animation Styles

| Style | Effect Description |
| --- | --- |
| morph | (Default) Letters scale and skew with an organic focal blur. |
| wave | A vertical ripple effect that moves across the string. |
| flip | 3D Y-axis rotation with perspective depth. |
| glitch | High-frequency digital noise with RGB shadow shifting. |
| blur | Cinematic focal breathing where letters dissolve in/out. |
| reveal | Professional editorial mask-reveal moving upwards. |
| pulse | Soft neon glow breathing with subtle scaling. |

---

⚙️ API Reference

$3

Configures the global styles and behaviors.

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| bg | string | "#000" | Background color. |
| fg | string | "#fff" | Letter color. |
| size | string | "5rem" | Font size. |
| speed | number | 2 | Speed of one animation cycle (seconds). |
| fadeTime | number | 600 | Fade-out duration on off() (ms). |
| font | string | "sans-serif" | Font family. |

$3

Triggers the preloader overlay.

* text: The string you want to animate.
* animation: The style key (e.g., "glitch").

$3

Fades out and removes the preloader from the DOM.

---

🌟 Pro Tip: Dynamic Loading

For real-world apps, trigger .off() inside a window load event:

`javascript
window.addEventListener('load', () => {
animatePage.off();
});

``

📄 License

MIT © Itzbandhan