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

1. Manual Download

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

2. NPM (If published)

npm install animate-preloader-pro

🛠 Usage

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

1. Basic Implementation

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

animatePage.init(options)

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. |

animatePage.on(text, animation)

Triggers the preloader overlay.

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

animatePage.off()

Fades out and removes the preloader from the DOM.

🌟 Pro Tip: Dynamic Loading

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

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

📄 License

MIT © Itzbandhan