{"id":13425190,"url":"https://github.com/abhiprojectz/motionia","last_synced_at":"2025-08-01T11:04:24.661Z","repository":{"id":37463276,"uuid":"267598187","full_name":"abhiprojectz/motionia","owner":"abhiprojectz","description":"The Ultimate \u0026 smart JS animation library! Simple fast , flexible \u0026 easy to integrate.","archived":false,"fork":false,"pushed_at":"2024-03-05T17:35:10.000Z","size":7456,"stargazers_count":329,"open_issues_count":0,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-07T10:32:34.185Z","etag":null,"topics":["animation","generator","python","solana","tool","trading-bot","usdc"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abhiprojectz.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":"2020-05-28T13:31:22.000Z","updated_at":"2025-03-07T12:58:55.000Z","dependencies_parsed_at":"2024-09-23T02:01:51.192Z","dependency_job_id":null,"html_url":"https://github.com/abhiprojectz/motionia","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"3f02f797dbac33199bab6c35f1f984a8b5be13b6"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/abhiprojectz/motionia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhiprojectz%2Fmotionia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhiprojectz%2Fmotionia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhiprojectz%2Fmotionia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhiprojectz%2Fmotionia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhiprojectz","download_url":"https://codeload.github.com/abhiprojectz/motionia/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhiprojectz%2Fmotionia/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268213825,"owners_count":24214351,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","generator","python","solana","tool","trading-bot","usdc"],"created_at":"2024-07-31T00:01:06.961Z","updated_at":"2025-08-01T11:04:24.200Z","avatar_url":"https://github.com/abhiprojectz.png","language":"Python","funding_links":[],"categories":["HTML","Python"],"sub_categories":[],"readme":"\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3bfrcyaaf6vbbq913zyu.png)\n---\n\u003cp align='center'\u003e The  Ultimate \u0026 smart JS animation library! \u003cbr\u003e\u003ca href=\"https://github.com/abhiprojectz/motionia/stargazers\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/abhiprojectz/motionia?style=for-the-badge\"\u003e\u003c/a\u003e   \u003ca href=\"https://github.com/abhiprojectz/motionia/blob/master/LICENSE\"\u003e\u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/abhiprojectz/motionia?style=for-the-badge\"\u003e\u003c/a\u003e \u003c/p\u003e\n\n---\n[![](https://img.shields.io/twitter/follow/abhiprojectz.svg?style=social)](https://twitter.com/abhiprojectz)\n\n\u003e Simple fast , flexible  \u0026 easy to integrate.\n\u003e No need to write page long CSS Keyframes that consumes a lot of time and no need to waste a lot on their customizations.\n\n# Introduction \n\nMotionia.js is a advanced JS library built with the aim of simplicity and customisablilty.\n\n**Rich Api** for all your animation needs in pure javascript , forget traditional method of writing page long css keyframes to animate elements, use the **new way the motionia way!**\n\nhead towards the **Docs:** [https://motionia.netlify.app](https://motionia.netlify.app) for more details.\n\nNo need of using any kind of **Scroll** library, motionia is independent =\u003e No dependencies.\n\nThe library is built with best code practices resulting in slow load , **loads in 1.3 seconds only!** \n\n**Alright, so explain me in 30 secs what it is actually?**\n\nWanna  save time? then just animate elements by  adding `data attributes`.\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n```html\n\u003cdiv data-motionia='fadeIn'\u003e hi!, i am a fading in text! :)\n \u003c/div\u003e\n```\nWith a tons of customizations to elements such as delay , duration , repeat , easing , direction etc parameters.\n\nall by using `data attributes` to html parametric elements itself.\n\nNeed to animate elements using js for some reasons?\nthen just use like:\n\n```js\nvar myAnim = new motionia() \n// initialize motionia.js\n\nmyAnim.mo({\ntargets: '#div',\nanim: 'rollLeft'\nduration: '5s'\n})\n// targets can be any html parametric element and \n// then customize according to your needs!\n// using simple JSON like structure.\n```\n\n# Where to get?\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qhgghdtuxxxtvl9axbrr.png)\n\n[Motionia on github](https://github.com/abhiprojectz/motionia)\n\n\n[Experiment with it here](https://abhiprojectz.github.io/motionia/try/)\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n# Documentation\n\n**Docs:** [https://motionia.netlify.app](https://motionia.netlify.app)\n\nGo through the docs to get to know everything about the library.\n\n\n# Examples \n\nVisit my codepen for motionia.js examples and demos and to grasp easily what motionia can actually do.\n\n +  [Abhiprojectz on Codepen](https://codepen.io/abhiprojectz)\n\n + [Motionia.js - animating the door](https://codepen.io/abhiprojectz/pen/BajyQPq)\n\n + [Animating backgrounds](https://codepen.io/abhiprojectz/pen/OJMPWbG)\n\n  + [Animating lists](https://codepen.io/abhiprojectz/pen/KKVwoNp)\n\n + [Animating Loaders](https://codepen.io/abhiprojectz/pen/MWKYVMo)\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n# Installations \n\nJust add a script path of motionia via **JSDELIVR** into the head of your project\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/abhiprojectz/motionia@latest/dist/motionia.js\" defer\u003e\u003c/script\u003e\n```\n# Usage\n\nWe have a svg with id as `mysvg` now we wanna animate it such that animations triggers when it appears in viewport.\n\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nrt1kdmskno8r8ajemu7.png)\n\nadd a rolling effect from left `rollleft`\n\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n\n##  Set a delay of 5s \n\nThis is just a small example.\n\nThe animation will be triggered as soon as the element appers inside the viewport.\n\n\u003e Note: if you want to trigger element using js then refer the section below.\n\n```html\n\u003cdiv data-mationia='rollLeft' data-delay='5s'\u003e rolling from\n left \u003c/div\u003e\n```\n\nThe supported animation property is a shorthand property which can be accessed for:\n\n+ Animation-name\n+ Animation-duration\n+ Animation-timing-function\n+ Animation-delay\n+ Animation-iteration-count\n+ Animation-direction\n+ Animation-fill-mode\n+ Animation-play-state\n\nRefer documentations  for more details.\n\n## Sliding a element right by 200px\n\n\u003e No keyframes straight forward text parameters.\n\nuse anim name **slide** as `data-motionia='slide'` then specify amount that is `data-right='200px'` \u0026 over!\n\n```html\n\u003cdiv data-motionia='slide' data-right='200px'\u003ei slide by 200px right\u003c/div\u003e\n```\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n# Using js syntax for advanced usage.\n\nYou can also trigger animation inside a function like `onclick` , `ontouch` etc or maybe as a result of a function.\n\nPre-built anims , which uses simple syntax makes it easy to decorate our project easily \u0026 without any dependencies.\n\nFirst of all initialize `motionia.js`a\n\n```js\nvar myAnim = new motionia() \n// initialize motionia.js\n```\n\nNow you can create a object and pass parameters in it to customize the anim.\n\nuse `.mo` method to pass parameters \n\n```js\nmyAnim.mo({\ntargets: '#div',\nanim: 'rollLeft'\nduration: '5s'\n})\n```\n\nYou can also **overrides** targets on every object no need to initialize motionia more than once.\n\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n\n# Ideas\n\nMany other animation library doesn't provide us built animations but `motionia.js` do.\n\nTrigger it when elements visible in viewport or trigger on a click using easy JS setup.\n\nThe `.mo({})` method quite works as a timeline feature.\n\nSo, keep going animating by a line.\n\nFor brief explanation refer docs.\n\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n\n# Documentation\n\ngrab the docs here: [docs of motionia](https://anicode.in/motionia/docs)\n\n# BONUS!\n\nNow comes the **MAIN** part!\n\nThe best thing of motionia.js is **mixing up of anims**.\n\nSo , it totally depends on your creativity of how you mix the animations.\n\nTo rotate \u0026 then make a element bigger in size use:\n\n**data-motionia='rotateScaleIn'** we just mixed the animations name.\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n\n# Features at a glance\n\n + 30+ base animations.\n + Animation property customizations.\n + Easy Scroll builtin animation triggering.\n + Mixing Of animations increases the no. of built-in animations thus, makes it lightweight.\n + JSON structure customization.\n + NO dependencies \n + Tested on all major browsers.\n\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n\n\n# Contribute\n\n**Docs:** [https://motionia.netlify.app](https://motionia.netlify.app)\n\nThis is very important do fork it right now and come up with your ideas!\n\n[![Stargazers repo roster for @abhiprojectz/motionia](https://reporoster.com/stars/abhiprojectz/motionia)](https://github.com/abhiprojectz/motionia/stargazers)\n\n[![Forkers repo roster for @abhiprojectz/motionia](https://reporoster.com/forks/abhiprojectz/motionia)](https://github.com/abhiprojectz/motionia/network/members)\n\n![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4ym5lke7w6imat5h7fe.JPG)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhiprojectz%2Fmotionia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhiprojectz%2Fmotionia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhiprojectz%2Fmotionia/lists"}