{"id":13400147,"url":"https://github.com/mojs/mojs","last_synced_at":"2025-05-12T16:30:22.856Z","repository":{"id":18142528,"uuid":"21234201","full_name":"mojs/mojs","owner":"mojs","description":"The motion graphics toolbelt for the web","archived":false,"fork":false,"pushed_at":"2025-02-05T15:27:53.000Z","size":140976,"stargazers_count":18623,"open_issues_count":37,"forks_count":889,"subscribers_count":392,"default_branch":"main","last_synced_at":"2025-05-05T11:49:02.174Z","etag":null,"topics":["animation","burst","design","es6","graphics","javascript","library","mo-js","modern","mojs","motion","motion-graphics","shape","svg","swirl","timeline","toolbelt","web","webpack"],"latest_commit_sha":null,"homepage":"https://mojs.github.io","language":"CoffeeScript","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/mojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","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},"funding":{"github":"xavierfoucrier"}},"created_at":"2014-06-26T08:49:14.000Z","updated_at":"2025-05-04T20:14:13.000Z","dependencies_parsed_at":"2023-10-01T09:02:53.563Z","dependency_job_id":"48a36421-c817-4cc0-b254-f3e4cabe8a7b","html_url":"https://github.com/mojs/mojs","commit_stats":{"total_commits":1860,"total_committers":23,"mean_commits":80.8695652173913,"dds":"0.38494623655913973","last_synced_commit":"51ed2454b0ef9f573b3f176c059d7eab72eebe7a"},"previous_names":["legomushroom/mojs"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojs%2Fmojs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojs%2Fmojs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojs%2Fmojs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mojs%2Fmojs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mojs","download_url":"https://codeload.github.com/mojs/mojs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252504171,"owners_count":21758654,"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","burst","design","es6","graphics","javascript","library","mo-js","modern","mojs","motion","motion-graphics","shape","svg","swirl","timeline","toolbelt","web","webpack"],"created_at":"2024-07-30T19:00:48.967Z","updated_at":"2025-05-05T12:58:38.455Z","avatar_url":"https://github.com/mojs.png","language":"CoffeeScript","readme":"# mo · js – [![npm](https://img.shields.io/npm/v/@mojs/core.svg)](https://www.npmjs.com/package/@mojs/core) [![ci](https://img.shields.io/github/actions/workflow/status/mojs/mojs/ci.yml?branch=main)](https://github.com/mojs/mojs/actions?query=workflow:\"CI\") [![Coverage Status](https://coveralls.io/repos/mojs/mojs/badge.svg?branch=main)](https://coveralls.io/r/mojs/mojs?branch=main) [![Slack](https://img.shields.io/badge/style-join-ff69b4.svg?label=slack)](https://join.slack.com/t/mojs/shared_invite/zt-dlyxhupt-VR7eV2uwCnvu3Cx~Yc_L9Q)\n\nThe motion graphics toolbelt for the web.\n\n[![mo · js](logo.svg \"mo · js\")](https://mojs.github.io/)\n\n## Intro\n**mo · js** is a javascript motion graphics library that is a **fast, retina ready, modular and open source**. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.\n\nThe library provides **built-in components** to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create **delightful animations** precisely.\n\n## Install\n### Use with a bundler\n\nMojs is published on the **NPM registry**, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the library if you are comfortable with **javascript bundlers** like `webpack` or `rollup`.\n\n```sh\n# npm\nnpm install @mojs/core\n\n# yarn\nyarn add @mojs/core\n```\n\nThen **import it like any other module** inside your build:\n\n```js\nimport mojs from '@mojs/core';\n\nnew mojs.Html({\n  // ...\n});\n```\n\n\u003e Using a bundler has **many advantages** like output compression, code splitting, tree shaking, etc., so we encourage you to use this kind of tool with mojs.\n\n### Use with a CDN\n\nTo rapidly **include the minified production file** in your web page, load the latest build from your favorite CDN using a generic script markup:\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/@mojs/core\"\u003e\u003c/script\u003e\n\n\u003c!-- jsdelivr --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@mojs/core\"\u003e\u003c/script\u003e\n```\n\nThen instanciate using:\n\n```html\n\u003cscript\u003e\n  new mojs.Html({\n    // ...\n  });\n\u003c/script\u003e\n```\n\n\u003e By default, if no one is specified, the CDN will automatically target the **@latest** version of mojs and load the **UMD build** from `dist/mo.umd.js`.\n\n## User guide\nThe base documentation you need to get started with mojs.\n- [Get started](https://mojs.github.io/tutorials/getting-started.html)\n- [@mojs/player](https://github.com/mojs/mojs-player/)\n- [@mojs/curve-editor](https://github.com/mojs/mojs-curve-editor/)\n- [@mojs/timeline-editor](https://github.com/mojs/mojs-timeline-editor/)\n\n## Learn\nDiscover the amazing things that mojs can do!\n- [Shape \u0026 Swirl](https://mojs.github.io/tutorials/shape-swirl/) _(Tutorial)_\n- [Burst](https://mojs.github.io/tutorials/burst/) _(Tutorial)_\n- [Icon animations powered by mo.js](https://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/) _(Codrops tutorial)_\n- [An Introduction to mo.js](https://css-tricks.com/introduction-mo-js/) _(CSS tricks tutorial)_\n- [Playing with @mojs/player and @mojs/curve-editor](https://vimeo.com/185587462) _(Vimeo video)_\n- [Web animations and mo.js](https://www.youtube.com/watch?v=yRxWa8lXasI) _(Youtube video)_\n\n## Developer\nGet technical informations, open an issue/pull request or join the (amazing) community!\n- [API documentation](https://mojs.github.io/api/)\n- [Github](https://github.com/mojs/mojs/)\n- [Slack workspace](https://mojs.slack.com) _(Not in the workspace yet? Use the [invite link](https://join.slack.com/t/mojs/shared_invite/zt-dlyxhupt-VR7eV2uwCnvu3Cx~Yc_L9Q) 🔓)_\n\n## Showcase\n- [Motion Graphics for the Web](https://codepen.io/sol0mka/full/ogOYJj/)\n- [Bubble Layout](https://codepen.io/sol0mka/full/yNOage/)\n- [Sleepy Mole](https://codepen.io/sol0mka/full/OyzBXR/)\n- [Animocons](https://tympanus.net/Development/Animocons/)\n- [Love or Hate Modal](https://codepen.io/sol0mka/full/812699ce32c9a7aeb70c9384b32a533a/)\n- [Mograph](https://codepen.io/sol0mka/full/39427561a8a0b15d7896480a7d96d3d1/)\n- [Word Reveal](https://codepen.io/sol0mka/full/c94452fb65dbf676b0ae8a12d4267473/)\n- [Jump and Squash](https://codepen.io/sol0mka/full/pEagoL/)\n- [Physical Balls](https://codepen.io/sol0mka/full/7315f4364360ec87a6655d33782702fe/)\n- [Dust Trail](https://codepen.io/sol0mka/full/633e6aa52d40691cca2f2cda91650bae/)\n- [Bubble Modal](https://codepen.io/sol0mka/full/3c49de2d7d0ca3e92bf5db5bf7a2687d/)\n- [Bubbles](https://codepen.io/sol0mka/full/2ef10ed42ff535182c31cd1dbb81e453/)\n- [Blast](https://codepen.io/sol0mka/full/699cfc8716a13e0e1c15105af2b6fb95/) _(click to see)_\n- [Simple Burst](https://codepen.io/sol0mka/full/6caf96461207a5caa9226fbd2631569d/) _(click to see)_\n- [Dusty Burst](https://codepen.io/sol0mka/full/03e9d8f2fbf886aa1505c61c81d782a0/) _(click to see)_\n- [Twitter Fav](https://codepen.io/sol0mka/full/wWdRLk/) _(click to see)_\n- [Twitter Fav (stars)](https://codepen.io/sol0mka/full/PzmAym/) _(click to see)_\n- [Twitter Fav Firework](https://codepen.io/sol0mka/full/xOAKKA/) _(click to see)_\n- [Simple Ripple](https://codepen.io/sol0mka/full/XKdWJg/) _(click to see)_\n\n## Browser support\n- Chrome 49+\n- Firefox 70+\n- Opera 36+\n- Safari 8+\n- Edge 79+\n\n\u003e Many other browsers may work, but are not extensively tested.\n\n## Maintainers\nSince 2019, mojs ecosystem is **maintained and developed** by:\n- [Xavier Foucrier](https://github.com/xavierfoucrier)\n- [Jonas Sandstedt](https://github.com/Sandstedt)\n\n## Contribute\nIf you want to report a bug or request a new feature/improvement, please **read the project [contributors guidelines](.github/CONTRIBUTING.md) before**. Thanks for taking time to contribute.\n","funding_links":["https://github.com/sponsors/xavierfoucrier"],"categories":["CoffeeScript","Images","前端开发框架及项目","Common","Repository","UI Components / UI Tools"],"sub_categories":["Save","其他_文本生成、文本对话","Animation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmojs%2Fmojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmojs%2Fmojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmojs%2Fmojs/lists"}