next-motion

A library for using Framer Motion with Next.js without the need for 'use client'.

Installation

npm install next-motion
# or
yarn add next-motion

Usage

Using next-motion is straightforward and similar to using Framer Motion directly. The only difference is that you import the component you want to animate from next-motion instead of framer-motion.

Example

1. Import the component you want to animate from next-motion:

import { Motion } from "next-motion";

2. Use the imported component as you would with Framer Motion, applying the desired animations:

<Motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
  className="max-w-sm rounded relative w-full"
>
  {/* Your content goes here */}
</Motion.div>

In the example above, we import Motion.div from next-motion and apply the initial, animate, and transition props to control the animation, just like you would with motion.div from framer-motion.

The available components in next-motion are:

• Motion.div
• Motion.h1
• Motion.h2
• Motion.h3
• Motion.h4
• Motion.h5
• Motion.h6
• Motion.p
• Motion.span
• Motion.button
• Motion.input
• Motion.textarea
• Motion.form
• Motion.label
• Motion.img
• Motion.a
• Motion.nav
• Motion.section
• Motion.article
• Motion.header
• Motion.footer
• Motion.aside
• Motion.main
• Motion.ul
• Motion.ol
• Motion.li
• Motion.dl
• Motion.dt
• Motion.dd
• Motion.table
• Motion.tr
• Motion.td
• Motion.th
• Motion.tbody
• Motion.thead
• Motion.tfoot
• Motion.caption

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT