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 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:

{
   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