https://github.com/richawo/framer-motion-cheatsheet
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.
https://github.com/richawo/framer-motion-cheatsheet
animations framer-motion nextjs react
Last synced: about 1 year ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/richawo/framer-motion-cheatsheet
- Owner: richawo
- Created: 2023-09-17T00:03:03.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T12:45:27.000Z (almost 3 years ago)
- Last Synced: 2025-03-28T22:51:15.266Z (over 1 year ago)
- Topics: animations, framer-motion, nextjs, react
- Language: TypeScript
- Homepage: https://framer-motion-nextjs-five.vercel.app
- Size: 139 KB
- Stars: 45
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framer Motion Cheatsheet
This is a [Next.js](https://nextjs.org/) project that demonstrates using [Framer Motion](https://www.framer.com/motion/) to create animations in React.
Framer Motion is a production-ready motion library that helps developers craft immersive user experiences by adding gestures, transitions, and animations to their web apps.
This 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.
The project uses:
- React for building UI components
- Next.js as the React framework
- Framer Motion for animations
- Tailwind CSS for styling
To learn more about the implementations, view the source code in the `pages/` and `components/` directories which contain examples of:
- `motion` components for animating divs
- Layout animations
- Drag gestures with `drag` prop
- Keyframe-based animations
- SVG Path animations
You can also consult the official Framer Motion and Next.js documentation for more insights.
This demo app is a great starting point for adding motion to your Next.js projects and experimenting with the animation capabilities of Framer Motion.
## Live Demo
You can see a live demo of this project here: https://framer-motion-nextjs-five.vercel.app/
## Getting Started
To get started with this project, follow these steps:
1. Clone the repository to your local machine:
```bash
git clone https://github.com/richawo/framer-motion-nextjs.git
```
2. Navigate to the project directory:
```bash
cd framer-motion-nextjs
```
3. Install the project dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
```
4. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your web browser to see the animations in action.
You can start exploring and experimenting with different drag animations and constraints in this project.
## Learn More
To learn more about Framer Motion, take a look at the official documentation:
- [Framer Motion Documentation](https://www.framer.com/api/motion/) - explore the capabilities and features of Framer Motion.
To learn more about Next.js, consider the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can also check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) for additional insights and contribute to the project.
## Deploy on Vercel
If 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&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Vercel offers seamless deployment and hosting for your applications.
For more information on deploying Next.js apps, consult the official deployment documentation:
- [Next.js Deployment Documentation](https://nextjs.org/docs/deployment)
Feel free to experiment with Framer Motion and enhance your Next.js application with captivating animations.
Happy coding!