Framer Motion Cheatsheet

This is a Next.js project that demonstrates using Framer 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:

   git clone https://github.com/richawo/framer-motion-nextjs.git

2. Navigate to the project directory:

   cd framer-motion-nextjs

3. Install the project dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

4. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open 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 - explore the capabilities and features of Framer Motion.

To learn more about Next.js, consider the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can also check out the Next.js GitHub repository 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 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

Feel free to experiment with Framer Motion and enhance your Next.js application with captivating animations.

Happy coding!