Custom JavaScript animation library with modular effects
npm install anim8-corefadeIn, slideIn, rotate, scrollReveal, gooeyNav, typewriterPulse, and more.
bash
npm install anim8-core
`
`js
// ESM Import
import * as anim8 from "anim8-core";
// Usage
anim8.fadeIn(document.querySelector(".box"), {
duration: 800,
easing: "easeOutQuad",
});
`
---
$3
`html
`
---
āØ Animations Available
| Function | Description |
| --------------------- | ------------------------------------ |
| fadeIn(el) | Smooth fade-in effect |
| slideIn(el, dir) | Slide in from left, right, etc. |
| slideOut(el) | Slide out effect |
| rotate(el) | Rotate element |
| rotateScale(el) | Rotate + scale |
| depthZoom(el) | Zoom with depth illusion |
| blurIn(el) | Blur-in reveal |
| scrollReveal(el) | Animate when element enters viewport |
| scrollTrigger(el) | Scroll-based trigger |
| gooeyNav(el) | Gooey effect for navigation |
| typewriterPulse(el) | Typewriter + pulse effect |
| stagger(el) | Stagger animations |
---
š Quick Start
Import only the animations you need for optimal bundle size:
`javascript
import { fadeIn, slideIn, rotate } from "anim8-core";
// Get your element
const element = document.querySelector(".my-element");
// Fade in with custom options
fadeIn(element, {
duration: 800,
delay: 200,
easing: "easeOutExpo",
});
// Slide in from the left
slideIn(element, {
direction: "left",
duration: 600,
distance: "100px",
});
// Rotate continuously
rotate(element, {
speed: 2,
duration: 3000,
});
`
---
āļø Configuration Options
Most animations accept these common parameters:
`javascript
{
duration: 1000, // Animation duration in milliseconds
delay: 0, // Delay before animation starts
easing: 'easeOutQuad', // Easing function name
direction: 'top', // Direction for slide animations
onComplete: () => {} // Callback function when animation ends
}
`
$3
- linear
- easeInQuad, easeOutQuad, easeInOutQuad
- easeInCubic, easeOutCubic, easeInOutCubic
- easeInExpo, easeOutExpo, easeInOutExpo
- easeInBounce, easeOutBounce, easeInOutBounce
---
`
anim8-core/
āāā src/
ā āāā core/ # Core animation utilities
ā āāā easings/ # Easing function library
ā āāā effects/ # Individual animation effects
āāā tests/ # Jest unit tests
āāā dist/ # Production builds
āāā index.js # Main entry point
āāā package.json
āāā vite.config.js # Development server config
āāā jest.config.cjs # Testing configuration
āāā babel.config.json # Babel preset configuration
`
---
š§ Creating Custom Effects
Extend the library with your own animations:
1. Create your effect file src/effects/myCustomEffect.js:
`javascript
export default function myCustomEffect(element, options = {}) {
const { duration = 1000, easing = "easeOutQuad" } = options;
// Your custom animation logic here
// Use requestAnimationFrame for smooth performance
}
`
2. Export in main index.js:
`javascript
export { default as myCustomEffect } from "./src/effects/myCustomEffect";
`
3. Use your custom effect:
`javascript
import { myCustomEffect } from "anim8-core";
myCustomEffect(element, { duration: 800 });
`
---
š Browser Support
| Browser | Support |
| --------------- | --------- |
| Chrome | ā
Latest |
| Firefox | ā
Latest |
| Safari | ā
Latest |
| Edge | ā
Latest |
| Opera | ā
Latest |
| Android Browser | ā
Latest |
| iOS Safari | ā
Latest |
_Uses modern APIs like requestAnimationFrame for optimal performance_
---
š API Reference
$3
Fades an element from transparent to opaque.
Parameters:
- element (HTMLElement) - Target element
- options (Object) - Configuration options
- duration (number) - Animation duration (default: 1000ms)
- delay (number) - Start delay (default: 0ms)
- easing (string) - Easing function (default: 'easeOutQuad')
$3
Slides an element into view from a specified direction.
Parameters:
- element (HTMLElement) - Target element
- options (Object) - Configuration options
- direction (string) - Slide direction: 'top', 'bottom', 'left', 'right'
- duration (number) - Animation duration (default: 1000ms)
- distance (string) - Slide distance (default: '100px')
---
š¤ Contributing
We welcome contributions! Please see our Contributing Guidelines for details.
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)