NextJS and Motion UI: Creating Engaging Animations

How to integrate Motion UI in NextJS applications to create visually appealing and engaging animations.

nextjs-and-motion-ui-creating-engaging-animations

What is Motion UI?

Motion UI is a Sass library for quickly creating CSS transitions and animations. It comes with a handful of transition and animation classes that you can apply directly in your Markup, and plenty more you can create with Sass.


Sass is a preprocessor that allows you to use features that do not exist in CSS yet like variables, nesting, mixins, inheritance and more. It also helps to keep things organized and allows you to create style sheets faster.


Creating Animations with Motion UI

Creating animations with Motion UI is pretty straightforward. The first thing you need to do is to install Motion UI as well as Sass, if you haven't installed them yet.


```ssh

npm install motion-ui


npm install sass


```

Once you've installed these packages, you can start creating animations. Below is an example of how you can apply a fade-in animation effect using Motion UI classes.


```html
```

It's as simple as that! You can check Motion UI's documentation for more pre-built animation and transition classes.


Integrating Motion UI in NextJS Apps

NextJS, out of the box, doesn't know how to handle Sass. But with the help of a NextJS configuration file (next.config.js) and a few packages, we can easily add Sass support to NextJS.


First, install the required packages:


```ssh

npm install @zeit/next-sass node-sass


```

Then, create a next.config.js file in your project root, if you haven't created one yet, and add the following:


```javascript

const withSass = require('@zeit/next-sass')


module.exports = withSass({


/* config options here */ }) ```

Once you've added Sass support, you can now utilize Motion UI by importing it in your Sass files.


```scss @import '~motion-ui/src/motion-ui'; @include motion-ui-transitions; @include motion-ui-animations; ```

Now, you're all set to use Motion UI in your NextJS app. Create engaging animations and make your web app more visually appealing.


Lastly, if you are looking for a ready-to-use NextJS boilerplate to start building your web application, check out PullTheCode. It's a NextJS boilerplate designed specifically for startups and developers looking to build and deploy their MVPs quickly and efficiently.


PullTheCode comes with features such as SEO & Blog integration, Stripe payments, SQL with Prisma, SSO with PassportJS, Google Analytics and more. It also offers weekly updates. Learn more about PullTheCode [here](https://www.pullthecode.com/).


Own your own Software!

Join PullTheCode and start building your own SaaS in minutes on a platform you own!

Get PullTheCode