{"_id":"@avatijs/animation","name":"@avatijs/animation","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@avatijs/animation","version":"0.2.0","description":"Animation package part of Avati project","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","browser":"./dist/umd/index.js","unpkg":"./dist/umd/index.min.js","jsdelivr":"./dist/umd/index.min.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js","default":"./dist/umd/index.js"},"./package.json":"./package.json"},"sideEffects":false,"engines":{"node":">=18.20.5"},"bundlesize":[{"path":"./dist/esm/index.js","maxSize":"3 kB","compression":"brotli"},{"path":"./dist/cjs/index.js","maxSize":"3 kB","compression":"brotli"},{"path":"./dist/umd/*.js","maxSize":"3 kB","compression":"brotli"}],"scripts":{"build":"npm run clean && npm run build:types && npm run build:prod","build:dev":"webpack --mode development --progress","build:prod":"webpack --mode production","build:types":"tsc --emitDeclarationOnly","watch":"webpack --mode=development --watch","watch:silent":"webpack --mode=development --watch --silent","clean":"rimraf dist","prepublishOnly":"npm run build","test":"jest --config jest.config.js","typecheck":"tsc --noEmit","size":"webpack --mode production --json > stats.json && webpack-bundle-analyzer stats.json","analyze:deps":"madge --circular --extensions ts ./src/index.ts","size:check":"bundlesize","size:watch":"bundlesize --watch","size:compression":"bundlesize --compression","check-deps":"depcheck --config .depcheckrc","analyze":"npm run analyze:size && npm run analyze:deps && npm run analyze:duplicates","analyze:size":"webpack --mode production --json > stats.json && webpack-bundle-analyzer stats.json","analyze:detailed":"webpack --config webpack.analysis.config.js","analyze:duplicates":"jscpd src","analyze:why":"webpack --mode production --display-reasons","analyze:tree":"webpack --mode production --display-used-exports","analyze:modules":"webpack --mode production --display-modules","analyze:full":"webpack --mode production --stats detailed"},"author":{"name":"Khaled Sameer","email":"khaled.smq@hotmail.com","url":"https://khaled.ee/"},"homepage":"https://avati.io/","bugs":{"url":"https://github.com/KhaledSMQ/avati/issues","email":"khaled.smq@hotmail.com"},"repository":{"type":"git","url":"git+https://github.com/KhaledSMQ/avati.git","directory":"packages/animation"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["avati","animation","animator","transitions","motion","CSS animations","JavaScript animations","SVG animations","canvas","interactive","UI animations","effects","tweening","keyframes","easing","performance","smooth animations","responsive","library","framework","React animations","Vue animations","Angular animations","React Native","Three.js","web animations","parallax","scroll animations","3D animations","timeline","sequencing","choreography","interactive UI","user experience","motion design","visual effects","hardware accelerated","cross-browser","lightweight","modular","extensible","plugin","customizable","ease of use","developer-friendly","open source","documentation","examples"],"devDependencies":{"@types/jest":"^29.5.14","@types/node":"^22.9.1","@typescript-eslint/eslint-plugin":"^8.15.0","@typescript-eslint/parser":"^8.15.0","bundlesize":"^0.18.2","depcheck":"^1.4.7","dependency-cruiser":"^16.6.0","eslint":"^8.57.1","jest":"^29.7.0","jscpd":"^4.0.5","madge":"^8.0.0","rimraf":"^6.0.1","source-map-explorer":"^2.5.3","terser-webpack-plugin":"^5.3.10","ts-jest":"^29.2.5","ts-loader":"^9.5.1","typescript":"^5.6.3","webpack":"^5.96.1","webpack-bundle-analyzer":"^4.10.2","webpack-cli":"^5.1.4"},"_id":"@avatijs/animation@0.2.0","gitHead":"45902cf3fc3c657b7e7d4055600c78870d4dbabb","_nodeVersion":"20.14.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-kzIIHKWgATK7gDY6zgxbEHIbItddQryEAqmigOOFEQuib+ObygDSJpHCo3N9ITxLsXoqIzPwtUNdCe1c51gFTw==","shasum":"415c449738bb6b6f66e5caf2185bcfb3c3d9d3c2","tarball":"https://registry.npmjs.org/@avatijs/animation/-/animation-0.2.0.tgz","fileCount":24,"unpackedSize":171136,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaNwAh6Dm7WfV+nRf7AiIqM0YU8/2Pl4F6LGw1jCZb7AiBW5iNzqGInO/0CuMorhzkSOXbf/hlZJ7HSpSPdhFFLxA=="}]},"_npmUser":{"name":"khaledsqm","email":"khaled.smq@hotmail.com"},"directories":{},"maintainers":[{"name":"khaledsqm","email":"khaled.smq@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation_0.2.0_1732354203203_0.7932931618043997"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-23T09:30:03.073Z","0.2.0":"2024-11-23T09:30:03.375Z","modified":"2024-11-23T09:30:03.676Z"},"maintainers":[{"name":"khaledsqm","email":"khaled.smq@hotmail.com"}],"description":"Animation package part of Avati project","homepage":"https://avati.io/","keywords":["avati","animation","animator","transitions","motion","CSS animations","JavaScript animations","SVG animations","canvas","interactive","UI animations","effects","tweening","keyframes","easing","performance","smooth animations","responsive","library","framework","React animations","Vue animations","Angular animations","React Native","Three.js","web animations","parallax","scroll animations","3D animations","timeline","sequencing","choreography","interactive UI","user experience","motion design","visual effects","hardware accelerated","cross-browser","lightweight","modular","extensible","plugin","customizable","ease of use","developer-friendly","open source","documentation","examples"],"repository":{"type":"git","url":"git+https://github.com/KhaledSMQ/avati.git","directory":"packages/animation"},"author":{"name":"Khaled Sameer","email":"khaled.smq@hotmail.com","url":"https://khaled.ee/"},"bugs":{"url":"https://github.com/KhaledSMQ/avati/issues","email":"khaled.smq@hotmail.com"},"license":"MIT","readme":"# TypeScript Tweening Library\n\nA lightweight and flexible tweening library for TypeScript that supports various data types and easing functions. This library provides smooth animations between values with customizable easing functions and supports numbers, colors, 2D vectors, and arrays.\n\n## Features\n\n- 🎯 Strong TypeScript support with type safety\n- 🎨 Multiple data type support:\n    - Numbers\n    - Colors (hex format)\n    - 2D Vectors\n    - Arrays of numbers\n- 🌊 Built-in easing functions:\n    - Linear\n    - Cubic (In/Out/InOut)\n    - Quadratic (In/Out/InOut)\n    - Elastic\n    - Bounce\n- ⚡ Efficient animation management with RequestAnimationFrame\n- 🎮 Simple and intuitive API\n\n## Installation\n\n```bash\nnpm install @avatijs/animation\n# or\nyarn add @avatijs/animation\n```\n\n## Usage\n\n### Basic Example\n\n```typescript\nimport { Tween } from '@avatijs/animation';\n\n// Animate a number from 0 to 100\nconst numberTween = new Tween({\n    from: 0,\n    to: 100,\n    duration: 1000, // milliseconds\n    onUpdate: (value) => {\n        console.log('Current value:', value);\n    },\n    onComplete: () => {\n        console.log('Animation completed!');\n    }\n});\n\nnumberTween.start();\n```\n\n### Animating Different Types\n\n#### Color Animation\n\n```typescript\nconst colorTween = new Tween({\n    from: '#ff0000',\n    to: '#0000ff',\n    duration: 2000,\n    easing: Tween.EasingFunctions.easeInOutCubic,\n    onUpdate: (color) => {\n        element.style.backgroundColor = color;\n    }\n});\n```\n\n#### 2D Vector Animation\n\n```typescript\nconst vectorTween = new Tween({\n    from: { x: 0, y: 0 },\n    to: { x: 100, y: 200 },\n    duration: 1500,\n    onUpdate: (position) => {\n        element.style.transform = `translate(${position.x}px, ${position.y}px)`;\n    }\n});\n```\n\n#### Array Animation\n\n```typescript\nconst arrayTween = new Tween({\n    from: [0, 0, 0],\n    to: [100, 200, 300],\n    duration: 1000,\n    onUpdate: ([x, y, z]) => {\n        element.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;\n    }\n});\n```\n\n### Using Different Easing Functions\n\n```typescript\n// Available easing functions\nconst easings = Tween.EasingFunctions;\n// - linear\n// - easeInCubic\n// - easeOutCubic\n// - easeInOutCubic\n// - easeInQuad\n// - easeOutQuad\n// - easeInOutQuad\n// - easeInElastic\n// - bounce\n\nconst tween = new Tween({\n    from: 0,\n    to: 100,\n    duration: 1000,\n    easing: Tween.EasingFunctions.bounce,\n    onUpdate: (value) => {\n        // Update logic\n    }\n});\n```\n\n## Best Practices\n\n1. **Cleanup**: Always stop tweens when they're no longer needed, especially when removing elements:\n```typescript\n// Stop the tween\ntween.stop();\n```\n\n2. **Error Handling**: Wrap tween creation in try-catch blocks when dealing with user input:\n```typescript\ntry {\n    const tween = new Tween({...});\n    tween.start();\n} catch (error) {\n    console.error('Invalid tween configuration:', error);\n}\n```\n\n3. **Performance**:\n    - Avoid creating many simultaneous tweens\n    - Use appropriate duration values (typically 200-2000ms)\n    - Consider using requestAnimationFrame for smooth animations (built-in)\n\n## Common Pitfalls to Avoid\n\n- ❌ Don't create tweens in rapid succession without cleaning up old ones\n- ❌ Don't use extremely short durations (<100ms) as they may appear jerky\n- ❌ Don't forget to handle the cleanup when the component/element is destroyed\n- ❌ Don't use heavy computations in onUpdate callbacks\n- ❌ Don't create infinitely running tweens without a way to stop them\n\n## Advanced Usage\n\n### Chaining Tweens\n\n```typescript\nconst tween1 = new Tween({\n    from: 0,\n    to: 100,\n    duration: 1000,\n    onUpdate: (value) => {\n        // First animation\n    },\n    onComplete: () => {\n        // Start the next tween when this one completes\n        tween2.start();\n    }\n});\n\nconst tween2 = new Tween({\n    from: 100,\n    to: 0,\n    duration: 1000,\n    onUpdate: (value) => {\n        // Second animation\n    }\n});\n\n// Start the chain\ntween1.start();\n```\n\n\n## Changelog\n\nPlease see [CHANGELOG](./CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nI welcome contributions from developers of all experience levels. If you have an idea, found a bug, or want to improve something, I encourage you to get involved!\n\n### How to Contribute\n1. Read [Contributing Guide](https://github.com/KhaledSMQ/avati/blob/master/Contributing.md) for details on how to get started.\n2. Fork the repository and make your changes.\n3. Submit a pull request, and we’ll review it as soon as possible.\n\n## License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/KhaledSMQ/avati/blob/master/LICENSE)\n\nAvati is open-source and distributed under the [MIT License](https://github.com/KhaledSMQ/avati/blob/master/LICENSE).\n\n---\n<div align=\"center\">\n\n[![Follow on Twitter](https://img.shields.io/twitter/follow/KhaledSMQ.svg?style=social)](https://x.com/khaledsmq_)\n[![Follow on LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue.svg)](https://www.linkedin.com/in/khaledsmq/)\n[![Follow on Medium](https://img.shields.io/badge/Medium-Follow-black.svg)](https://medium.com/@khaled.smq)\n[![Made with ❤️](https://img.shields.io/badge/Made%20with-❤️-red.svg)](https://github.com/KhaledSMQ)\n[![Star on GitHub](https://img.shields.io/github/stars/KhaledSMQ/avati.svg?style=social)](https://github.com/KhaledSMQ/avati/stargazers)\n[![Follow on GitHub](https://img.shields.io/github/followers/KhaledSMQ.svg?style=social&label=Follow)](https://github.com/KhaledSMQ)\n\n</div>\n","readmeFilename":"README.md"}