{
"name": "@bitty/animate",
"version": "1.1.0",
"description": "Create and manage animation functions with AnimationFrame API.",
"cdn": "dist/animate.umd.js",
"main": "dist/animate.js",
"types": "types/animate.d.ts",
"unpkg": "dist/animate.umd.js",
"module": "dist/animate.esm.js",
"jsdelivr": "dist/animate.umd.js",
"umd:main": "dist/animate.umd.js",
"files": [
"dist/",
"types/"
],
"repository": {
"type": "git",
"url": "git+https://github.com/VitorLuizC/animate.git"
},
"keywords": [
"animation",
"requestanimationframe",
"game-loop",
"gameloop",
"loop",
"interval",
"timeout"
],
"author": {
"url": "https://vitorluizc.github.io/",
"name": "Vitor Luiz Cavalcanti",
"email": "vitorluizc@outlook.com"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/VitorLuizC/animate/issues"
},
"homepage": "https://github.com/VitorLuizC/animate#readme",
"devDependencies": {
"ava": "^4.0.1",
"prettier": "^2.5.1",
"rollup": "^2.63.0",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.5.4"
},
"scripts": {
"lint": "prettier --check \"{src,test}/**/*.ts\"",
"lint:fix": "prettier --write \"{src,test}/**/*.ts\"",
"test": "pnpm run test:transpile && ava",
"test:transpile": "tsc --project ./tsconfig.test.json",
"build": "pnpm run build:transpile && pnpm run build:bundle",
"build:transpile": "tsc -p ./tsconfig.build.json",
"build:bundle": "rollup --config rollup.config.js"
},
"readme": "# `@bitty/animate`\n\n\n[](https://bundlephobia.com/result?p=@bitty/animate)\n[](https://bundlephobia.com/result?p=@bitty/animate)\n\n[](https://codepen.io/VitorLuizC/full/WLddER)\n\nCreate and manage animation functions with AnimationFrame API.\n\n- :zap: Dependency free and smaller than **170B** (ESM minified + gzipped);\n- :label: Type definitions to TS developers and IDE/Editors intellisense;\n- :package: CommonJS, ESM and UMD distributions (_CDN uses UMD as default_);\n\n#### See bubbles example at [Codepen](https://codepen.io/VitorLuizC/full/WLddER)\n\n## Installation\n\nThis library is published in the NPM registry and can be installed using any compatible package manager.\n\n```sh\nnpm install @vitorluizc/animate --save\n\n# For Yarn, use the command below.\nyarn add @vitorluizc/animate\n```\n\n### Installation from CDN\n\nThis module has an UMD bundle available through JSDelivr and Unpkg CDNs.\n\n```html\n\n\n\n```\n\n## Usage\n\nCall `animate`, the default exported function, with your callback and use returned object to manage your animation.\n\n```js\nimport animate from '@bitty/animate';\n\nconst canvas = document.querySelector('canvas');\nconst context = canvas.getContext('2d');\nconst position = { x: 0, y: 0 };\n\nconst animation = animate(() => {\n context.clearRect(0, 0, canvas.width, canvas.height);\n context.beginPath();\n context.arc(position.x, position.y, 100 / 2, 0, 2 * Math.PI);\n context.fillStyle = '#000000';\n context.fill();\n context.closePath();\n});\n\nwindow.addEventListener('mousemove', (event) => {\n position.x = event.clientX;\n position.y = event.clientY;\n});\n\nanimation.start();\n```\n\n> See this example on [Codepen](https://codepen.io/VitorLuizC/pen/jXRzVp).\n\n## API\n\n- **`animate`**\n\n The default exported function, which receives `callback` as argument and returns an **`Animation`**.\n\n - `callback` is a **synchronous function** running into a AnimationFrame recursion.\n\n ```js\n let count = 0;\n\n const animation = animate(() => {\n context.clearRect(0, 0, element.width, element.height);\n context.font = '4rem monospace';\n context.textAlign = 'center';\n context.fillText(count, element.width / 2, element.height / 2);\n\n count++;\n });\n\n animation.start();\n ```\n\n > See this example on [Codepen](https://codepen.io/VitorLuizC/pen/yGrvzP).\n\n \n TypeScript type definitions.
\n\n
\n\n ```ts\n export default function animate(callback: () => void): Animation;\n ```\n\n \n\n- **`Animation`**\n\n An object returned by **`animate`** function to manage your animations. It can start, stop and check if animation is running.\n\n - **`running`**: A getter property that indicates if animation is running.\n\n - **`start()`**: A method to start the animation.\n\n - **`stop()`**: A method to stop the animation.\n\n ```js\n const animation = animate(() => { ... });\n\n animation.start();\n\n // Stops the animation after 10s\n setTimeout(() => animation.stop(), 10 * 1000);\n\n if (animation.running)\n console.log('The animation is running...');\n ```\n\n \n TypeScript type definitions.
\n\n
\n\n ```ts\n export interface Animation {\n readonly running: boolean;\n stop: () => void;\n start: () => void;\n }\n ```\n\n \n\n## License\n\nReleased under [MIT License](./LICENSE).\n"
}