https://github.com/utkarsh5026/mayonation

smol animation engine in TS 😎
https://github.com/utkarsh5026/mayonation

animation animation-library library nodejs typescript

Last synced: 1 day ago
JSON representation

smol animation engine in TS 😎

• Host: GitHub
• URL: https://github.com/utkarsh5026/mayonation
• Owner: utkarsh5026
• License: mit
• Created: 2025-01-11T17:19:01.000Z (15 days ago)
• Default Branch: main
• Last Pushed: 2025-01-21T20:23:20.000Z (4 days ago)
• Last Synced: 2025-01-21T21:25:56.724Z (4 days ago)
• Topics: animation, animation-library, library, nodejs, typescript
• Language: TypeScript
• Homepage: https://utkarsh5026.github.io/mayosite/
• Size: 279 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# 🎨 Mayonation

A lightweight and performant animation library for the web

[![Tests](https://github.com/utkarsh5026/mayonation/actions/workflows/test.yml/badge.svg)](https://github.com/utkarsh5026/mayonation/actions)

[![npm version](https://badge.fury.io/js/mayonation.svg)](https://www.npmjs.com/package/mayonation)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[Demo](https://utkarsh5026.github.io/mayosite/) • [Documentation](#-api-reference) • [Examples](#-examples)



## ✨ Features

- 🪶 **Lightweight** - Tiny footprint (<5kb gzipped)

- 🎯 **Simple API** - Intuitive chainable methods

- 🚀 **High Performance** - Optimized for 60fps animations

- 🎮 **Timeline Control** - Create complex animation sequences

- 🎨 **Flexible** - Animate CSS & SVG elements

- 📦 **TypeScript Ready** - Full type support included

## 📦 Installation

```bash

npm install mayonation

# or

yarn add mayonation

# or

pnpm add mayonation

```

## 🚀 Quick Start

### Timeline Animation

```typescript

import { timeline, animate } from 'mayonation'

// Sequential animations

timeline({ loop: true, precision: 1 })

  .add(animate({

    target: '.box1',

    translateX: 100,

    duration: 1000

  }))

  .add(animate({

    target: '.box2',

    scale: 2

  }), '+=500')  // Starts 500ms after previous

  .add(animate({

    target: '.box3',

    opacity: 0

  }), 2000)     // Starts at 2000ms

  .play()

```

### SVG Drawing Animation

```typescript

import { draw, trace } from 'mayonation'

// Draw SVG path

timeline()

  .add(draw({

    target: '#my-path',

    duration: 1000

  }))

  .play()

// Trace SVG path

timeline()

  .add(trace({

    target: '#my-path',

    duration: 1000

  }))

  .play()

```

## 🌟 Examples

### Basic Timeline

```typescript

timeline()

  .add(animate({

    target: '.element',

    translateX: 100,

    duration: 1000

  }))

  .play()

```

### SVG Animation

```typescript

timeline()

  .add(draw({

    target: '#svg-path',

    duration: 2000

  }))

  .add(trace({

    target: '#svg-path',

    duration: 1000

  }), '+=500')

  .play()

```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

## 📄 License

MIT © [Utkarsh Priyadarshi](https://github.com/utkarsh5026)

---



  Built with ❤️ by Utkarsh Priyadarshi