{"id":13815847,"url":"https://github.com/rossning92/movy","last_synced_at":"2025-05-15T18:05:59.879Z","repository":{"id":43054918,"uuid":"330815232","full_name":"rossning92/movy","owner":"rossning92","description":"movy.js is a client-side JS animation engine for creating explanatory videos.","archived":false,"fork":false,"pushed_at":"2023-04-01T18:56:57.000Z","size":18355,"stargazers_count":1327,"open_issues_count":16,"forks_count":154,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-01T03:33:19.395Z","etag":null,"topics":["animation","animation-engine","animations","movy"],"latest_commit_sha":null,"homepage":"https://rossning92.github.io/movy/","language":"TypeScript","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/rossning92.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,"publiccode":null,"codemeta":null}},"created_at":"2021-01-18T23:54:21.000Z","updated_at":"2025-03-30T16:38:52.000Z","dependencies_parsed_at":"2024-08-04T04:09:20.555Z","dependency_job_id":"39bcc16b-1724-4de2-9264-72186f460bee","html_url":"https://github.com/rossning92/movy","commit_stats":{"total_commits":423,"total_committers":3,"mean_commits":141.0,"dds":0.08274231678486998,"last_synced_commit":"fa82d6f00ed1ec05df1b2492b2cddb92b01fb1f3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossning92%2Fmovy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossning92%2Fmovy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossning92%2Fmovy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossning92%2Fmovy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rossning92","download_url":"https://codeload.github.com/rossning92/movy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773719,"owners_count":20993639,"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","animation-engine","animations","movy"],"created_at":"2024-08-04T04:04:14.141Z","updated_at":"2025-04-08T04:11:37.329Z","avatar_url":"https://github.com/rossning92.png","language":"TypeScript","readme":"![logo](img/logo.png)\n\n**movy.js** is an intuitive animation engine for creating explanatory videos.\n\n![gallery](img/gallery.png)\n\n## Getting Started\n\n\u003e Make sure you have [node.js (version \u003e= 12)](https://nodejs.org/en/download/) installed on your computer.\n\n1. Install **movy.js** by: `npm i movy@latest -g`\n2. Run `movy` to open a list of examples (example animations are located in the `movy/examples` folder):\n\n![examples](img/examples.png)\n\n3. To create a new animation, simply run `movy hello.js`. It will automatically create a new animation file `hello.js` (if the file does not exist):\n\n```js\nimport * as mo from \"movy\";\n\nmo.addText(\"Hello, Movy!\", {\n  scale: 0.8,\n  color: \"yellow\",\n}).grow();\n```\n\n\u003e Note: Modifying the source code will automatically refresh the browser.\n\n4. Click \"Render\" button to render the animation to a video file: `xxx.webm`\n\n![](img/click-render-button.png)\n\n## Add objects into the scene\n\nTo add new objects, you can use `mo.add___()`. For example:\n\n| Method             | Comment        | Preview                   |\n| ------------------ | -------------- | ------------------------- |\n| `mo.addCircle()`   | Add a circle   | ![](img/add-circle.png)   |\n| `mo.addRect()`     | Add a rect     | ![](img/add-rect.png)     |\n| `mo.addTriangle()` | Add a triangle | ![](img/add-triangle.png) |\n| ...                | ...            | ...                       |\n\n### Customize objects\n\nAll methods above can take **extra** named arguments for customization. For example, to set the object color and scale, you can use\n\n\u003cimg align=\n\"right\" src=\"img/add-yellow-triangle.png\" /\u003e\n\n```\nmo.addTriangle({ color: \"yellow\", scale: 0.5 });\n```\n\nThis will create a half-sized yellow triangle.\n\nFurthermore, you can pass\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eMethods\u003c/th\u003e\n\u003cth\u003eComment\u003c/th\u003e\n\u003cth\u003ePreview\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addCircle({\n  x: 0.5, \n  y: 0.2\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eSet X and Y coordinates to be \u003ccode\u003e(0.5, 0.2)\u003c/code\u003e. Note that movy.js uses Cartesian coordinates for 2D objects (y-axis pointing upwards).\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/set-pos.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addCircle({ \n  position: [0.1, 0.2, 0] \n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eposition\u003c/code\u003e specifies the circle coordinates similar to \u003ccode\u003ex\u003c/code\u003e, \u003ccode\u003ey\u003c/code\u003e, \u003ccode\u003ez\u003c/code\u003e parameters. However it takes an array of numbers.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/set-pos.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addRect({\n  rz: 0.25 * Math.PI,\n});\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eRotate the rect along the Z axis by π/4.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/rotated-rect.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addRect({\n  rx: 0.5,\n  ry: 1\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eNote that movy.js internally uses 3D coordinates. You can also rotate any 2D object along X and Y axis by \u003ccode\u003erx\u003c/code\u003e and \u003ccode\u003ery\u003c/code\u003e parameters.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/rotated-rect-2.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addCircle({\n  scale: 0.5,\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eScale the circle by \u003ccode\u003e0.5\u003c/code\u003e (half size).\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/half-size-circle.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addCircle({\n  sx: 1.5,\n  sy: 0.5\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eCreate an ellipse by scaling along X and Y axis differently.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/ellipse.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addCircle({\n  color: \"#3498db\"\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eYou can pass hex code, e.g. \u003ccode\u003e\"#3498db\"\u003c/code\u003e to specify object color. Alternatively, you can use X11 color name, e.g. \u003ccode\u003e\"blue\"\u003c/code\u003e.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/blue-circle.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### More shapes\n\nBesides, you can use `mo.add___Outline()` methods to create outlined shapes. For example:\n\n| Method                    | Comment               | Preview                       |\n| ------------------------- | --------------------- | ----------------------------- |\n| `mo.addCircleOutline()`   | Add circle outline.   | ![](img/circle-outline.png)   |\n| `mo.addRectOutline()`     | Add rect outline.     | ![](img/rect-outline.png)     |\n| `mo.addTriangleOutline()` | Add triangle outline. | ![](img/triangle-outline.png) |\n| ...                       | ...                   | ...                           |\n\nAll named arguments mentioned in the previous section still works for these outlined shapes. Moreover, you can pass\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eMethods\u003c/th\u003e\n\u003cth\u003eComment\u003c/th\u003e\n\u003cth\u003ePreview\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addCircleOutline({\n  lineWidth: 0.3,\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eSet the line width of the circle outline to \u003ccode\u003e0.3\u003c/code\u003e.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/set-circle-line-width.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003emo.addRectOutline({\n  width: 1.5,\n  height: 1,\n})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eInstead of \u003ccode\u003esx\u003c/code\u003e and \u003ccode\u003esy\u003c/code\u003e to scale a shape, you can alternatively use \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e to specify the size of a shape. This method will not scale the line strokes unevenly.\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/set-rect-width.png\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Add animations\n\nFor each added scene object, you can call, e.g. `obj.fadeIn()`, `obj.reveal()`, `obj.grow()`, etc. to add different animations.\n\n```\nconst rect = mo.addRect();\n\nrect.grow();  // This will add grow animation to the circle object.\n```\n\nThe following table lists the common animations supported by `movy.js`.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.fadeIn()\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/fade-in.gif\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.wipeIn()\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/wipe-in.gif\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.grow()\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/grow.gif\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.rotateIn()\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/rotate-in.gif\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.reveal()\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/reveal.gif\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.shake2D()\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/shake-2d.gif\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Customize animations\n\nAll animations can take following parameters for customization.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.fadeIn({t: 1})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003et\u003c/code\u003e parameter specifies when the animation should be started. For example, \u003ccode\u003et: 1\u003c/code\u003e specifies that the animation should start at 1 second. \u003ccode\u003et: '\u003c'\u003c/code\u003e specifies that the animation should begin at the same time of the previous animation. \u003ccode\u003et: '+=1'\u003c/code\u003e specifies that the animation should starts 1 second after all previous animations finish. \u003cbr/\u003e\u003ccode\u003emovy.js\u003c/code\u003e internally uses \u003ccode\u003egsap\u003c/code\u003e. For more information, please refer to \u003ca href=\"https://greensock.com/position-parameter/\"\u003eUnderstanding the Position Parameter\u003c/a\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.fadeIn({duration: 2})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003eSet the animation duration to \u003ccode\u003e2\u003c/code\u003e seconds.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cpre\u003e\u003ccode\u003erect.fadeIn({ease: 'linear'})\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eease\u003c/code\u003e parameter specifies the easing curve used for the animation. Different animations are pre-configured with different default easing functions. However, you can overwrite this to completely change the nature of your animation. For more information, please refer to \u003ca href=\"https://greensock.com/docs/v3/Eases\"\u003egsap / Eases\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nNote that some animation can take **extra parameters**. For example, you can pass `{ direction: 'down' }` in `obj.reveal()` to specify the direction from which the object reveals.\n\n#### Combining animations\n\n\u003cimg align=\n\"right\" src=\"img/combined-animation.gif\" /\u003e\n\nBy combining existing animations with some parameter tweaking, we can derive more complicated and beautiful animations.\n\n```\nmo.addRectOutline()\n  .reveal()\n  .moveTo({ rz: Math.PI * 4, duration: 2 })\n  .fadeOut();\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frossning92%2Fmovy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frossning92%2Fmovy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frossning92%2Fmovy/lists"}