3.2.1 • Published 7 months ago
anime-ts v3.2.1
🎨 Animation Controller By JS/TS
A lightweight and powerful TypeScript library for creating smooth, controlled CSS transitions with minimal overhead.
Proper for pure JS/TS, React, next project and all others libraries and frameworks.
✨ Features
- 🚀 Lightweight & Fast: Pure TypeScript implementation with zero dependencies
- 🎯 Type-Safe: Full TypeScript support for better development experience
- 🎯 React | TS | JS and ...: Full support for all libraries and frameworks
- 🎮 Fine Control: Precise control over transitions with start, run, and end hooks
- ⚡ Performance Focused: Uses native CSS transitions for optimal performance
- 🛠️ Flexible API: Simple yet powerful interface for complex animations
- 🎭 Multiple Properties: Animate multiple CSS properties simultaneously
- ⏱️ Timing Control: Custom duration, easing, and delay for each property
📦 Installation
npm install anime-ts
# or
yarn add anime-ts
# or
pnpm add anime-ts
🚀 Quick Start
import { An } from 'anime-ts';
// Create a simple fade-out animation
new An(
'#myElement',
{
opacity: '0',
transform: 'translateY(20px)',
},
'0.5s',
'ease-out'
);
// Create a simple fade-out animation in React
new An(
elementRef.current,
{
opacity: '0',
transform: 'translateY(20px)',
},
'0.5s',
'ease-out'
);
// Create a complex animation with different timings
new An('#myElement', {
opacity: {
from: '1',
to: '0',
time: '0.5s',
ease: 'ease-in-out',
},
transform: {
from: 'translateY(0)',
to: 'translateY(20px)',
time: '0.8s',
delay: '0.2s',
},
});
📖 API Reference
Constructor
new An(
target: string | HTMLElement,
attributes: AttributeT,
time?: string,
ease?: string,
delay?: string
)
target
: CSS selector string or HTMLElementattributes
: Object containing CSS properties to animatetime
: Default animation duration (optional)ease
: Default easing function (optional)delay
: Default animation delay (optional)
Animation Properties
Each property in the attributes
object can be either:
- A string value (uses default timing)
- An object with detailed configuration:
{
from?: string; // Starting value
to: string; // Target value
time?: string; // Duration
ease?: string; // Easing function
delay?: string; // Delay before start
}
Lifecycle Methods
const animation = new An('#myElement', { opacity: '0' });
// Called when transition begins running
animation.onRun = () => console.log('Animation is running');
// Called when transition actively starts
animation.onStart = () => console.log('Animation has started');
// Called when transition is cancelled
animation.onCancel = () => console.log('Animation was cancelled');
// Called when transition completes
animation.onEnd = () => console.log('Animation has completed');
Control Methods
// Stop the animation immediately
animation.stop();
🎭 Examples
Fade and Move
new An('#myElement', {
opacity: {
from: '0',
to: '1',
time: '0.5s',
},
transform: {
from: 'translateY(20px)',
to: 'translateY(0)',
time: '0.8s',
ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
},
});
Multiple Properties with Different Timings
new An('#myElement', {
width: {
from: '100px',
to: '300px',
time: '1s',
ease: 'ease-out',
},
height: {
from: '100px',
to: '200px',
time: '0.8s',
delay: '0.2s',
},
background: {
from: '#ff0000',
to: '#00ff00',
time: '1.5s',
},
});
🤝 Contributing
"Contributions are welcome! Please feel free to submit a Pull Request. For major hanges, please open an issue first to discuss what you would like to change.
📄 License
"This project is licensed under the MIT License - see the LICENSE.md file or details.
Made with ❤️ using TypeScript