{"id":24719173,"url":"https://github.com/geminate/frame-animate-js","last_synced_at":"2026-05-08T08:12:19.192Z","repository":{"id":57241341,"uuid":"148761793","full_name":"geminate/frame-animate-js","owner":"geminate","description":"A javascript lib to create frame-by-frame animation.","archived":false,"fork":false,"pushed_at":"2018-12-27T06:06:22.000Z","size":157,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-20T22:35:55.486Z","etag":null,"topics":["animation","framebyframe","javascript","javascript-library"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/geminate.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}},"created_at":"2018-09-14T08:47:52.000Z","updated_at":"2022-05-23T17:06:41.000Z","dependencies_parsed_at":"2022-09-08T00:40:51.305Z","dependency_job_id":null,"html_url":"https://github.com/geminate/frame-animate-js","commit_stats":null,"previous_names":["geminate/frame-animate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/geminate/frame-animate-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fframe-animate-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fframe-animate-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fframe-animate-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fframe-animate-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geminate","download_url":"https://codeload.github.com/geminate/frame-animate-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fframe-animate-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32772170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: 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","framebyframe","javascript","javascript-library"],"created_at":"2025-01-27T11:16:55.310Z","updated_at":"2026-05-08T08:12:19.154Z","avatar_url":"https://github.com/geminate.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction\n\nA javascript lib to create frame-by-frame animation.\n\n## Install\n\nYou can install frame-animate by npm.\n\n```javascript\n$ npm install frame-animate-js\n```\n\nor use script label\n\n```html\n\u003cscript src=\"../dist/index.js\"\u003e\u003c/script\u003e\n```\n\n## Config\n\n| config      |  instruction                 |  example\n| --------    | -----                        |  -----\n| dom         | animate container            |  document.querySelector(\"#test\")\n| frameNumber | total number of frames       |  16\n| delay       | interval between two frames  |  70\n| imgPath     | source image path            |  './app-download.png'\n| imgWidth    | source image width           |  1280\n\n## Api\n\n#### 1. playForward(start, end)\n\nStart animate and play forward from one frame to another.\n\n#### 2. playBack(start, end)\n\nStart animate and play back from one frame to another.\n\n#### 3. reset()\n\nReset animate, stop animate and move to first frame.\n\n#### 4. pause()\n\nPause animate.\n\n#### 5. addFrameCallBack(frameNumber, func)\n\nCall the function when the animation is playing to the specified frame.\n\n#### 6. removeFrameCallBack(callback)\n\nRemove a callback.\n\n#### 7. getCurrentFrame()\n\nReturn current frame number.\n\n## Example\n\nAll the following examples use this picture as material.(from bilibili.com)\n\n![image](https://raw.githubusercontent.com/geminate/frame-animate-js/master/blob/app-download.png)\n\n### Basic\n\n![image](https://raw.githubusercontent.com/geminate/frame-animate-js/master/blob/basic.gif)\n\n```javascript\nimport FrameAnimate from 'frame-animate-js';\n\nconst config = {\n    dom: document.querySelector(\"#test\"),\n    frameNumber: 16,\n    delay: 70,\n    imgPath: './app-download.png',\n    imgWidth: 1280\n};\nconst frame = new FrameAnimate(config);\nframe.playForward();\n```\n\n### Loop playback\n\n![image](https://raw.githubusercontent.com/geminate/frame-animate-js/master/blob/loop.gif)\n\n```javascript\nimport FrameAnimate from 'frame-animate-js';\n\nconst config = {\n    dom: document.querySelector(\"#test\"),\n    frameNumber: 16,\n    delay: 70,\n    imgPath: './app-download.png',\n    imgWidth: 1280\n};\nconst frame = new FrameAnimate(config);\nframe.playForward();\n\nframe.addFrameCallBack(0, function () {\n    frame.pause();\n    frame.playForward();\n});\n\nframe.addFrameCallBack(15, function () {\n    frame.pause();\n    frame.playBack();\n});\n```\n\n### Complex\n\n![image](https://raw.githubusercontent.com/geminate/frame-animate-js/master/blob/complex.gif)\n\n```javascript\nimport FrameAnimate from 'frame-animate-js';\n\nconst config = {\n    dom: document.querySelector(\"#test\"),\n    frameNumber: 16,\n    delay: 70,\n    imgPath: './app-download.png',\n    imgWidth: 1280\n};\nconst frame = new FrameAnimate(config);\n\nlet callback15, callback9;\n\ndocument.querySelector(\"#test\").addEventListener(\"mouseenter\", function () {\n\n    callback9 = frame.addFrameCallBack(9, function () {\n        frame.pause();\n        frame.playForward(9, 15);\n    });\n\n    callback15 = frame.addFrameCallBack(15, function () {\n        frame.pause();\n        frame.playBack(15, 0);\n    });\n\n    frame.pause();\n    frame.playForward(frame.getCurrentFrame());\n});\n\ndocument.querySelector(\"#test\").addEventListener(\"mouseleave\", function () {\n    frame.removeFrameCallBack(callback9);\n    frame.removeFrameCallBack(callback15);\n    frame.pause();\n    frame.playBack(frame.getCurrentFrame(), 0);\n});\n```\n\n### Use in vue\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv ref=\"imgContainer\"\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```javascript\nimport FrameAnimate from 'frame-animate-js';\nimport Img from './app-download.png';\n\nexport default {\n  mounted() {\n    const config = {\n      dom: this.$refs.imgContainer,\n      frameNumber: 16,\n      delay: 70,d\n      imgPath: Img,\n      imgWidth: 1280\n    };\n    const frame = new FrameAnimate(config);\n    frame.playForward()\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeminate%2Fframe-animate-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeminate%2Fframe-animate-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeminate%2Fframe-animate-js/lists"}