{"id":24599858,"url":"https://github.com/utkarsh5026/mayonation","last_synced_at":"2025-07-02T07:33:13.694Z","repository":{"id":272450966,"uuid":"915373657","full_name":"utkarsh5026/mayonation","owner":"utkarsh5026","description":"smol animation engine built with TS from scratch 😎","archived":false,"fork":false,"pushed_at":"2025-01-23T23:33:09.000Z","size":345,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T18:43:59.659Z","etag":null,"topics":["animation","animation-library","library","nodejs","typescript"],"latest_commit_sha":null,"homepage":"https://utkarsh5026.github.io/mayosite/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/utkarsh5026.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-11T17:19:01.000Z","updated_at":"2025-03-21T19:55:04.000Z","dependencies_parsed_at":"2025-01-14T14:50:30.401Z","dependency_job_id":"0b2bb719-db6b-4d7e-9d0f-2463b571ae09","html_url":"https://github.com/utkarsh5026/mayonation","commit_stats":null,"previous_names":["utkarsh5026/mayonation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarsh5026%2Fmayonation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarsh5026%2Fmayonation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarsh5026%2Fmayonation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarsh5026%2Fmayonation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/utkarsh5026","download_url":"https://codeload.github.com/utkarsh5026/mayonation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251759002,"owners_count":21639152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-library","library","nodejs","typescript"],"created_at":"2025-01-24T13:17:55.625Z","updated_at":"2025-04-30T18:23:56.388Z","avatar_url":"https://github.com/utkarsh5026.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🎨 Mayonation\n\nA lightweight and performant animation library for the web\n\n[![Tests](https://github.com/utkarsh5026/mayonation/actions/workflows/test.yml/badge.svg)](https://github.com/utkarsh5026/mayonation/actions)\n[![npm version](https://badge.fury.io/js/mayonation.svg)](https://www.npmjs.com/package/mayonation)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n[Demo](https://utkarsh5026.github.io/mayosite/) • [Documentation](#-api-reference) • [Examples](#-examples)\n\n\u003c/div\u003e\n\n## ✨ Features\n\n- 🪶 **Lightweight** - Tiny footprint (\u003c5kb gzipped)\n- 🎯 **Simple API** - Intuitive chainable methods\n- 🚀 **High Performance** - Optimized for 60fps animations\n- 🎮 **Timeline Control** - Create complex animation sequences\n- 🎨 **Flexible** - Animate CSS \u0026 SVG elements\n- 📦 **TypeScript Ready** - Full type support included\n\n## 📦 Installation\n\n```bash\nnpm install mayonation\n# or\nyarn add mayonation\n# or\npnpm add mayonation\n```\n\n## 🚀 Quick Start\n\n### Timeline Animation\n\n```typescript\nimport { timeline, animate } from 'mayonation'\n\n// Sequential animations\ntimeline({ loop: true, precision: 1 })\n  .add(animate({\n    target: '.box1',\n    translateX: 100,\n    duration: 1000\n  }))\n  .add(animate({\n    target: '.box2',\n    scale: 2\n  }), '+=500')  // Starts 500ms after previous\n  .add(animate({\n    target: '.box3',\n    opacity: 0\n  }), 2000)     // Starts at 2000ms\n  .play()\n```\n\n### SVG Drawing Animation\n\n```typescript\nimport { draw, trace } from 'mayonation'\n\n// Draw SVG path\ntimeline()\n  .add(draw({\n    target: '#my-path',\n    duration: 1000\n  }))\n  .play()\n\n// Trace SVG path\ntimeline()\n  .add(trace({\n    target: '#my-path',\n    duration: 1000\n  }))\n  .play()\n```\n\n## 🌟 Examples\n\n### Basic Timeline\n\n```typescript\ntimeline()\n  .add(animate({\n    target: '.element',\n    translateX: 100,\n    duration: 1000\n  }))\n  .play()\n```\n\n### SVG Animation\n\n```typescript\ntimeline()\n  .add(draw({\n    target: '#svg-path',\n    duration: 2000\n  }))\n  .add(trace({\n    target: '#svg-path',\n    duration: 1000\n  }), '+=500')\n  .play()\n```\n\n## 🤝 Contributing\n\nContributions 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.\n\n## 📄 License\n\nMIT © [Utkarsh Priyadarshi](https://github.com/utkarsh5026)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤️ by \u003ca href=\"https://github.com/utkarsh5026\"\u003eUtkarsh Priyadarshi\u003c/a\u003e\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futkarsh5026%2Fmayonation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Futkarsh5026%2Fmayonation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futkarsh5026%2Fmayonation/lists"}