{"id":18930422,"url":"https://github.com/richawo/framer-motion-cheatsheet","last_synced_at":"2025-04-15T15:31:25.048Z","repository":{"id":195269810,"uuid":"692585959","full_name":"richawo/framer-motion-cheatsheet","owner":"richawo","description":"This Framer Motion Cheatsheet is a Next.js project that demonstrates the usage of Framer Motion for creating animations. Framer Motion is a powerful library for creating smooth and interactive animations in React applications.","archived":false,"fork":false,"pushed_at":"2023-09-28T12:45:27.000Z","size":142,"stargazers_count":45,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T22:51:15.266Z","etag":null,"topics":["animations","framer-motion","nextjs","react"],"latest_commit_sha":null,"homepage":"https://framer-motion-nextjs-five.vercel.app","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/richawo.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}},"created_at":"2023-09-17T00:03:03.000Z","updated_at":"2025-03-03T10:30:09.000Z","dependencies_parsed_at":"2023-09-23T20:35:18.655Z","dependency_job_id":null,"html_url":"https://github.com/richawo/framer-motion-cheatsheet","commit_stats":null,"previous_names":["richawo/framer-motion-nextjs","richawo/framer-motion-cheatsheet"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richawo%2Fframer-motion-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richawo%2Fframer-motion-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richawo%2Fframer-motion-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richawo%2Fframer-motion-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richawo","download_url":"https://codeload.github.com/richawo/framer-motion-cheatsheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249097967,"owners_count":21212389,"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":["animations","framer-motion","nextjs","react"],"created_at":"2024-11-08T11:37:37.949Z","updated_at":"2025-04-15T15:31:24.599Z","avatar_url":"https://github.com/richawo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Framer Motion Cheatsheet\n\nThis is a [Next.js](https://nextjs.org/) project that demonstrates using [Framer Motion](https://www.framer.com/motion/) to create animations in React. \n\nFramer Motion is a production-ready motion library that helps developers craft immersive user experiences by adding gestures, transitions, and animations to their web apps.\n\nThis project contains examples of Framer Motion animations like page transitions, drag gestures, scroll-based animations, animated SVG morphing, and more.  It aims to showcase the capabilities of Framer Motion in a Next.js codebase and serve as a cheatsheet for Framer Motion usage.\n\nThe project uses:\n\n- React for building UI components\n- Next.js as the React framework\n- Framer Motion for animations\n- Tailwind CSS for styling\n\nTo learn more about the implementations, view the source code in the `pages/` and `components/` directories which contain examples of:\n\n- `motion` components for animating divs \n- Layout animations\n- Drag gestures with `drag` prop\n- Keyframe-based animations\n- SVG Path animations\n\nYou can also consult the official Framer Motion and Next.js documentation for more insights.\n\nThis demo app is a great starting point for adding motion to your Next.js projects and experimenting with the animation capabilities of Framer Motion.\n\n## Live Demo\n\nYou can see a live demo of this project here: https://framer-motion-nextjs-five.vercel.app/\n\n## Getting Started\n\nTo get started with this project, follow these steps:\n\n1. Clone the repository to your local machine:\n\n    ```bash\n    git clone https://github.com/richawo/framer-motion-nextjs.git\n    ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd framer-motion-nextjs\n   ```\n\n3. Install the project dependencies:\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n4. Run the development server:\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   # or\n   pnpm dev\n   ```\n\n5. Open [http://localhost:3000](http://localhost:3000) in your web browser to see the animations in action.\n\nYou can start exploring and experimenting with different drag animations and constraints in this project.\n\n## Learn More\n\nTo learn more about Framer Motion, take a look at the official documentation:\n\n- [Framer Motion Documentation](https://www.framer.com/api/motion/) - explore the capabilities and features of Framer Motion.\n\nTo learn more about Next.js, consider the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can also check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) for additional insights and contribute to the project.\n\n## Deploy on Vercel\n\nIf you plan to deploy your Next.js app, the easiest way is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js. Vercel offers seamless deployment and hosting for your applications.\n\nFor more information on deploying Next.js apps, consult the official deployment documentation:\n\n- [Next.js Deployment Documentation](https://nextjs.org/docs/deployment)\n\nFeel free to experiment with Framer Motion and enhance your Next.js application with captivating animations.\n\nHappy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichawo%2Fframer-motion-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichawo%2Fframer-motion-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichawo%2Fframer-motion-cheatsheet/lists"}