{"id":20806725,"url":"https://github.com/animatable-js/animatable_js","last_synced_at":"2026-01-31T19:01:20.387Z","repository":{"id":219465666,"uuid":"749123167","full_name":"animatable-js/animatable_js","owner":"animatable-js","description":"This package allows easy and light implementation of linear or curved animation in javascript environment.","archived":false,"fork":false,"pushed_at":"2024-11-26T21:07:17.000Z","size":203,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-19T23:37:55.031Z","etag":null,"topics":["animation","animation-library","client-side","frontend","js","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/animatable-js?activeTab=readme","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/animatable-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"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,"zenodo":null}},"created_at":"2024-01-27T16:43:25.000Z","updated_at":"2024-11-26T21:07:20.000Z","dependencies_parsed_at":"2024-02-22T03:25:40.367Z","dependency_job_id":"86938546-ead7-4086-84ac-c702162be59c","html_url":"https://github.com/animatable-js/animatable_js","commit_stats":null,"previous_names":["mttankkeo/js_animatable","animatable-js/animatable_js"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/animatable-js/animatable_js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animatable-js%2Fanimatable_js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animatable-js%2Fanimatable_js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animatable-js%2Fanimatable_js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animatable-js%2Fanimatable_js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animatable-js","download_url":"https://codeload.github.com/animatable-js/animatable_js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animatable-js%2Fanimatable_js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28950279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T18:30:42.805Z","status":"ssl_error","status_checked_at":"2026-01-31T18:30:19.593Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","client-side","frontend","js","web"],"created_at":"2024-11-17T19:24:56.407Z","updated_at":"2026-01-31T19:01:20.371Z","avatar_url":"https://github.com/animatable-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/9910fab8-ea17-4cce-ad58-2d5ccf149bc9\"\u003e\n    \u003ch1 align=\"center\"\u003eAnimatable JS Package\u003c/h1\u003e\n    \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eVersion\u003c/th\u003e\n            \u003cth\u003ev1.3.0\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n    If you want to use this package in JSX? please refer to \u003ca href=\"https://www.npmjs.com/package/animatable-jsx\"\u003eanimatable-jsx\u003c/a\u003e for details.\n\u003c/div\u003e\n\n# Introduction\nThis package allows easy and light implementation of linear or curved animation in javascript. `Especially suitable in a development environment on web components or canvas`\n\n\u003e The resource of this package amounts to `3kb` when compressed with gzip under the assumption of using all features.\n\n\u003e This is package mainly used when using canvas element, which is controlled using js, an environment where css is not available.\n\u003e And by default, This package does not work in `IE` browser environments.\n\n## High Performance\n`100,000` countless animations can be implemented in a runtime environment.\n\n![ezgif-6-ddcf0f5b58](https://github.com/MTtankkeo/js_animatable/assets/122026021/297f5d05-4d30-4ef4-99f3-947350e05d0b)\n\n## Install by npm\nTo install this package in your project, enter the following command.\n\n\u003e When you want to update this package, enter `npm update animatable-js --save` in the terminal to run it.\n\n```\nnpm install animatable-js\n```\n\n## How to make an animation?\nThe code below shows how to use the most commonly used class, a `Animation` object.\n\n```js\nimport { Animation, AnimationStatus } from \"animable-js\";\n\nconst animation = new Animation(duration, curve?, initialValue?);\nanimation.addListener(value =\u003e {\n    // A current animation value.\n    console.log(value);\n\n    // This controller is raw animation controller that\n    // the [Animation] object dependence on.\n    const parent = animation.parent;\n\n    // Relative value are always returned from 0 to 1.\n    console.log(parent.relValue);\n\n    // Progress value are always returned from 0 to 1, and no subtraction.\n    // This always means that the value increases from 0 to 1.\n    console.log(parent.progressValue)\n});\nanimation.addStatusListener(status =\u003e {\n   if (status == AniamtionStatus.FORWARDED) console.log(\"is forwarded\");\n   if (status == AnimationStatus.BACKWARDED) console.log(\"is backwarded\");\n});\n\n// This animation value will smoothly transition from 0 to 1.\nanimation.animateTo(1);\n\n// This animation value will smoothly transition from 1 to 2.\n// (e.g. If the current animation value is 1 and the factor\n// value is given as 1, it is animated from 1 to 2.)\nanimation.animateBy(1);\n\n// This animation value will repeating smoothly transition from 0 to 1.\nanimation.repeat(0, 1);\n```\n\n## Constants of Animation Status\nrefer to animatable.ts/AnimationStatus for detail.\n\n| Name | Value\n| ------ | ------\n| NONE | \"none\"\n| FORWARD | \"forward\"\n| FORWARDED | \"forwarded\"\n| BACKWARD | \"backward\"\n| BACKWARDED | \"backwarded\"\n\n## How to make curve-animation?\n```js\nconst a = new Animation(duration, Curve.Ease);\nconst b = new Cubic(x1, y1, x2, y2).createAnimation(duration);\nconst c = Curve.Ease.createAnimation(duration);\n```\n\n## What is a curve?\nIn this package, the curve means an instance of a cubic object.\n\n\u003e Can use the Cubic instances that are provided by default in Curve of cubic.ts\n\n```js\n// ... cubic.js\nexport const Curve = {\n    Linear:         new Cubic(0, 0, 1, 1),\n    Ease:           new Cubic(0.25, 0.1, 0.25, 1),\n    EaseIn:         new Cubic(0.42, 0, 1, 1),\n    EaseOut:        new Cubic(0, 0, 0.58, 1),\n    EaseInOut:      new Cubic(0.42, 0, 0.58, 1),\n    EaseInSine:     new Cubic(0.12, 0, 0.39, 0),\n    EaseOutSine:    new Cubic(0.61, 1, 0.88, 1),\n    EaseInQuad:     new Cubic(0.11, 0, 0.5, 0),\n    EaseOutQuad:    new Cubic(0.5, 1, 0.89, 1),\n    EaseInOutQuad:  new Cubic(0.45, 0, 0.55, 1),\n    EaseInOutSine:  new Cubic(0.37, 0, 0.63, 1),\n    EaseInCubic:    new Cubic(0.32, 0, 0.67, 0),\n    EaseOutCubic:   new Cubic(0.33, 1, 0.68, 1),\n    EaseInOutCubic: new Cubic(0.65, 0, 0.35, 1),\n    EaseInQuart:    new Cubic(0.5, 0, 0.75, 0),\n    EaseOutQuart:   new Cubic(0.25, 1, 0.5, 1),\n    EaseInOutQuart: new Cubic(0.76, 0, 0.24, 1),\n    EaseInQuint:    new Cubic(0.64, 0, 0.78, 0),\n    EaseOutQuint:   new Cubic(0.22, 1, 0.36, 1),\n    EaseInOutQuint: new Cubic(0.83, 0, 0.17, 1),\n    EaseInExpo:     new Cubic(0.7, 0, 0.84, 0),\n    EaseOutExpo:    new Cubic(0.16, 1, 0.3, 1),\n    EaseInOutExpo:  new Cubic(0.87, 0, 0.13, 1),\n    EaseInCirc:     new Cubic(0.55, 0, 1, 0.45),\n    EaseOutCirc:    new Cubic(0, 0.55, 0.45, 1),\n    EaseInOutCirc:  new Cubic(0.85, 0, 0.15, 1),\n    EaseInBack:     new Cubic(0.36, 0, 0.66, -0.56),\n    EaseOutBack:    new Cubic(0.34, 1.56, 0.64, 1),\n    EaseInOutBack:  new Cubic(0.68, -0.6, 0.32, 1.6),\n}\n```\n\n### What is a cubic? (cubic-bezier)\nThe cubic animation provides a feature where the rate of change in animation values is not constant, but accelerates or decelerates over time.\n\n\u003e refer to [Wikipedia](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) for detail.\n\n### How to make cubic object?\n```js\nconst curve = new Cubic(x1, y1, x2, y2, start?, end?);\n\nconst curve = Cubic.var(\"--variable-name\", scope?);\nconst curve = Cubic.parse(\"cubic-bezier(x1,y1,x2,y2)\");\n// ... skip\n```\n![curve](https://github.com/MTtankkeo/js_animatable/assets/122026021/1c22b58c-481f-47f2-a8e4-cc7b03672f86)\n\n\u003e going to [cubic-bezier.com](https://cubic-bezier.com) for making.\n\n### How to flip cubic?\n```js\nconst easeFlipped = Curve.Ease.flipped;\n```\n\n## How to make color tween animation?\nPlease utilize the `Color` and `ColorTween` class!\n\n```js\n// or new Color.parse(\"#FF0000\"); (is skipable prefix #)\nconst red  = new Color(255, 0, 0, alpha?);\nconst blue = new Color.var(\"--blue\", scope?);\n\n// new ColorTween(start, end);\nconst colorTween = new ColorTween(red, blue);\n\nanimation.addListener(value =\u003e {\n  const color = colorTween.transform(value);\n  // ... skip\n});\n```\n\n## How to use raw-animation?\nThe code below shows how to use the class `AnimationController`, which is the base and foundation for implementing the animation.\n\n\u003e I decided to say this is a raw animation-controller.\n\n```js\nconst controller = new AnimationController(\n    duration, // Milliseconds\n    lowerValue = 0,\n    upperValue = 1,\n    initialValue?\n);\n\ncontroller.addListener(value =\u003e ...);\ncontroller.addStatusListener(status =\u003e ...);\n\nconsole.log(controller.value);\nconsole.log(controller.relValue);\nconsole.log(controller.progressValue);\n```\n\n## What is Ticker?\nProvides the ability to perform want tasks when the frame is updated, and measures the time interval between frames and is used to make smooth animation.\n\n\u003e Used to define a elapsed duration between a previous frame and the current frame when a frame updated.\n\n```js\n// The elapsed between the previous frame and the current frame is given.\nconst activeTicker = new Ticker(deltaElpased =\u003e {\n  console.log(deltaElpased);\n});\n\n// Dispose or clean up all relevant tasks and instances on memory.\nactiveTicker.dispose();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimatable-js%2Fanimatable_js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimatable-js%2Fanimatable_js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimatable-js%2Fanimatable_js/lists"}