{"id":26249485,"url":"https://github.com/randomgamingdev/animatorjs","last_synced_at":"2026-04-13T07:07:48.040Z","repository":{"id":186791940,"uuid":"675773670","full_name":"RandomGamingDev/AnimatorJs","owner":"RandomGamingDev","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js","archived":false,"fork":false,"pushed_at":"2024-04-08T05:16:05.000Z","size":226,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-08T06:26:55.380Z","etag":null,"topics":["animation","animations","animator","code","code-based","easy","editor","efficient","javascript","js","library","simple","small"],"latest_commit_sha":null,"homepage":"https://randomgamingdev.github.io/AnimatorJs/","language":"JavaScript","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/RandomGamingDev.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}},"created_at":"2023-08-07T17:30:08.000Z","updated_at":"2023-10-31T22:02:00.000Z","dependencies_parsed_at":"2024-02-07T06:45:23.741Z","dependency_job_id":null,"html_url":"https://github.com/RandomGamingDev/AnimatorJs","commit_stats":null,"previous_names":["randomgamingdev/animatorjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomGamingDev%2FAnimatorJs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomGamingDev%2FAnimatorJs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomGamingDev%2FAnimatorJs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomGamingDev%2FAnimatorJs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RandomGamingDev","download_url":"https://codeload.github.com/RandomGamingDev/AnimatorJs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243436370,"owners_count":20290780,"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","animations","animator","code","code-based","easy","editor","efficient","javascript","js","library","simple","small"],"created_at":"2025-03-13T15:37:57.779Z","updated_at":"2025-12-30T10:26:00.278Z","avatar_url":"https://github.com/RandomGamingDev.png","language":"JavaScript","readme":"# AnimatorJs\nA javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code.\n\n\u003cimg src=\"AnimatorJs.png\" width=\"512\" /\u003e\n\n(This differs from projects like Motion Canvas since it's meant for smaller lightweight animations that are to be rendered in real time like in games or web applications)\n\nYou can use the editor here: https://randomgamingdev.github.io/AnimatorJs/\n\nIf you want to modify it, for instance to by default add your own library, simply fork this repo, add it into [index.html](https://github.com/RandomGamingDev/AnimatorJs/blob/main/index.html) and then set up Github Pages.\n\nThis editor runs entirely without a backend and is a completely static site, which means that all computations and assets are on the client side.\n\nEven though the library's primarily designed for p5.js, you can still upload libraries in the form of javascript files to load them into the animator.\nTo use your animation simply follow the template and extend the Animation class in [animator.js](https://github.com/RandomGamingDev/AnimatorJs/blob/main/animation.js). Once you're done creating your animation, you can simply take the file and the `Animation` class from [animator.js](https://github.com/RandomGamingDev/AnimatorJs/blob/main/animation.js) and drop it into your project or include it from https://cdn.jsdelivr.net/gh/RandomGamingDev/AnimatorJs/animator.js and make `disp` point at the canvas that you want to draw on in order to use it within your own project.\n\nExport to Webm by pressing the download button! \n(There are however several limitations due to the restrictions placed by the browser, number 1, webm isn't exactly interactable so any of that stuff will be lost, as well as the loss of things like audio since we can't record that. Everything else works though)\nSomething nice however is that webm will export at the desired fps even if the rendering is resource intensive.\nAlthough you do have to keep the tab and browser open for it to continue rendering since p5.js doesn't call `draw` unless both of those are true. I could probably use Web Workers to get it working even when the tab's closed, but tbh I don't feel like if. If you'd like to add that feature however, I'll be happy to add your pull request!\n\nWrite the actual code for the animation in the `animationFrame()` function of your class.\n\nAnimation settings:\n- Animator.disp is the display/canvas\n- Animator.playing is whether or not the animation's playing\n- Animator.progress is how much the animation's progressed\n- Animator.step is the maximum change in values between animations and is based on progress with the \"stepped progress\" being obtained via `stepProgress()`\n- Animator.speed is how fast the animation progresses per second, for instance `0.1` would progress at `0.1` per second\n- Animator.loop is whether or not the animation loops\n\nEditor settings\n- Animator.smooth is whether or not the editor should smooth the resulting image\n- Animator.framerate is the frame rate that the editor should run at (which shouldn't matter since deltaTime is being used)\n\nThere's an example animation in [animation.js](https://github.com/RandomGamingDev/AnimatorJs/blob/main/animation.js)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomgamingdev%2Fanimatorjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frandomgamingdev%2Fanimatorjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomgamingdev%2Fanimatorjs/lists"}