{"id":14961335,"url":"https://github.com/sohanemon/motion","last_synced_at":"2026-02-01T11:35:14.892Z","repository":{"id":151083431,"uuid":"479411981","full_name":"sohanemon/motion","owner":"sohanemon","description":"Framer Motion Helper","archived":false,"fork":false,"pushed_at":"2023-09-05T16:22:24.000Z","size":310,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T23:37:44.239Z","etag":null,"topics":["animation","framer","framer-motion","motion","node-module","npm"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@sohanemon/motion","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sohanemon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-04-08T13:59:02.000Z","updated_at":"2024-01-31T07:49:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2a92b4e-b8a5-4288-9b24-cfdabff30d99","html_url":"https://github.com/sohanemon/motion","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"2f17e4911986a3700b074dbe9d894e75de06a24c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sohanemon/motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fmotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fmotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fmotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fmotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohanemon","download_url":"https://codeload.github.com/sohanemon/motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fmotion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28977320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T11:31:13.034Z","status":"ssl_error","status_checked_at":"2026-02-01T11:30:25.558Z","response_time":56,"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","framer","framer-motion","motion","node-module","npm"],"created_at":"2024-09-24T13:24:50.452Z","updated_at":"2026-02-01T11:35:14.877Z","avatar_url":"https://github.com/sohanemon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @sohanemon/motion - Declarative Framer Motion Helper\n\nA delightful package for [Framer Motion](https://www.framer.com/motion/) animations. 🌟\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sohanemon/motion\"\u003e\n    \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/workflow/status/sohanemon/motion/Node.js%20CI\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@sohanemon/motion\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@sohanemon/motion\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/sohanemon/motion/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/sohanemon/motion\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## 🚀 Installation\n\nGet started quickly by installing this package:\n\n```bash\nnpm install @sohanemon/motion\n```\n\nor using yarn:\n\n```bash\nyarn add @sohanemon/motion\n```\n\n## 📖 Usage\n\n### Basic Animation\n\nAnimate any component with a simple `animate` prop:\n\n```jsx\nimport Motion from '@sohanemon/motion';\n\n\u003cMotion animate='visible'\u003eYour Content Here\u003c/Motion\u003e;\n```\n\n### Variants\n\nDefine and use animation variants easily:\n\n```jsx\nimport Motion from '@sohanemon/motion';\n\n// Define your variants\nconst customVariants = {\n  custom: { scale: 1.2, rotate: 360 },\n};\n\n// Use the variant in your component\n\u003cMotion animate='custom' variants={customVariants}\u003e\n  Your Content Here\n\u003c/Motion\u003e;\n```\n\n### Scroll Animation\n\nCreate scroll-triggered animations effortlessly:\n\n```jsx\nimport Motion, { useScrollTransform } from '@sohanemon/motion';\n\n// Create a scroll-triggered animation\nconst AnimatedComponent = () =\u003e {\n  const scrollY = useScrollTransform({\n    outputRange: [0, 100],\n  });\n\n  return (\n    \u003cMotion animate={{ y: scrollY }}\u003eScroll down to see the animation\u003c/Motion\u003e\n  );\n};\n```\n\n### Default Variant\n\nSome default variants are added for simplicity.\n\n```tsx\nexport const defaultVariants: Variants = {\n  left: { x: -300, opacity: 0 },\n  right: { x: 300, opacity: 0 },\n  top: { y: -300, opacity: 0 },\n  bottom: { y: 100, opacity: 0 },\n  hidden: { opacity: 0 },\n  visible: { x: 0, y: 0, opacity: 1, scale: 1 },\n  scale1: { opacity: 1, scale: 1 },\n  scale0: { opacity: 0, scale: 0.1 },\n  height0: { height: 0 },\n  height1: { height: '100%' },\n};\n```\n\n```jsx\nimport Motion from '@sohanemon/motion';\n\n\u003cMotion initial='top'\u003eYour Content Here\u003c/Motion\u003e;\n```\n\n\u003e `whileInView` will be auto triggered. More than Simple.\n\n## 🎨 Features\n\n- **SSR**: Works with [Next.js](https://github.com/vercel/next.js) server components.\n- **Scroll Animation**: Craft scroll-triggered animations effortlessly.\n- **Custom Hook**: Additional custom hooks.\n- **Full Framer Motion**: All [Framer Motion](https://github.com/framer/motion) properties are available (re-exported).\n- **Variants**: Easily define and apply animation variants.\n\n## 📚 Documentation\n\nFor comprehensive usage instructions and more examples, visit the [documentation](https://github.com/sohanemon/motion#readme).\n\n## 🙌 Contributions\n\nWe welcome contributions! Feel free to open issues and pull requests on [GitHub](https://github.com/sohanemon/motion).\n\n## 📄 License\n\nThis package is released under the [ISC License](https://github.com/sohanemon/motion/blob/main/LICENSE).\n\n## 🚀 Connect with Us\n\n- [GitHub Repository](https://github.com/sohanemon/motion)\n- [Report Issues](https://github.com/sohanemon/motion/issues)\n\nLet's bring your web animations to life together! 🌟🚀\n\n---\n\nCrafted with ❤️ by [@sohanemon](https://github.com/sohanemon)\n\n✨ Happy Animating! ✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fmotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohanemon%2Fmotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fmotion/lists"}