Zero CSS Dependencies • ~2KB Gzipped
Native Web Animations.
Zero CSS Dependencies.
A lightweight utility wrapper over the browser's native Web Animations API (WAAPI). Hardware-accelerated, promise-based, and built for fluid iOS-like transitions.
Live Preview
Ready
Malo
// Click a button above to run an animationInteractive Playground
Test core WAAPI features, staggering, dynamic controls, and promises in real time.
Status: Ready
1
2
3
Preset Showcase
Built-in presets optimized for compositor execution. Click any card to preview.
Quick Start
Include Malo.js directly in your web page via a CDN script tag. No build steps or bundlers required.
Basic Usage
// Animate element with preset
Malo.animate('.card', 'popIn', { duration: 400 });
// Custom keyframes array
Malo.animate('#box', {
opacity: [0, 1],
transform: ['translateY(20px)', 'translateY(0)']
}, { duration: 600 });Options Reference
Malo forwards parameters directly into native WAAPI while adding modern stagger utilities.
| Option | Type | Default | Description |
|---|---|---|---|
| duration | number | 500 | Animation length in ms. |
| delay | number | 0 | Start delay in ms. |
| stagger | number | 0 | Incremental delay added per target element. |
| easing | string | 'ease' | Timing curve function. |
| iterations | number | 1 | Repetitions (or Infinity). |
| onfinish | function | undefined | Callback fired upon animation end. |