anime-ts/README.md

A lightweight and flexible JS/TS animation library that provides smooth animation with precise control. Features include customizable durations, timing functions, delays, and lifecycle hooks. Perfect for creating performant web animations with minimal ove

## 🎨 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

```bash
npm install anime-ts
# or
yarn add anime-ts
# or
pnpm add anime-ts
```

### 🚀 Quick Start

```typescript
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

```typescript
new An(
target: string | HTMLElement,
attributes: AttributeT,
time?: string,
ease?: string,
delay?: string
)
```

-  `target`: CSS selector string or HTMLElement
-  `attributes`: Object containing CSS properties to animate
-  `time`: 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:

```typescript
{
   from?: string;    // Starting value
   to: string;       // Target value
   time?: string;    // Duration
   ease?: string;    // Easing function
   delay?: string;   // Delay before start
}
```

### Lifecycle Methods

```typescript
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

```typescript
// Stop the animation immediately
animation.stop();
```

### 🎭 Examples

#### Fade and Move

```typescript
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

```typescript
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](LICENSE.md) file or details.

---


Made with ❤️ using TypeScript