A lightweight, modular, typography-based preloader library with cinematic morphing animations.
npm install animate-preloader-pro
morph, wave, flip, glitch, blur, reveal, and pulse.
will-change and transform for 60FPS smoothness.
animatePage.js and include it in your project directory.
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();
});
``