Prerequired Dependencies

Get started by installing the next.js.

npx create-next-app@latest

Then continue with installing the dependencies.

npm i motion lodash clsx tailwind-merge

Note: Motion Provider requires latest version of React, TypeScript 5.0+ and latest version of Tailwindcss for optimal functionality.

Add tailwind config

Create tailwind config cn function inside
@lib/utils.ts
directory if not exist.
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Installation

Install the core API.

Manual Installation
This component is powered by Motion Provider.
22 Step Left.

After installation your project directory should look like this:

MotionProvider/
├── motion-container.tsx
├── motion-image-queue.tsx
├── motion-image.tsx
├── motion-queue.tsx
├── hooks/
│   ├── use-animation-mixer.tsx
│   └── use-animation.tsx
├── lib/
│   ├── animate.lib.ts
│   └── transitions.lib.ts
├── types/
│   └── index.ts
└── utils/
    └── calculateDelay.ts

Basic Usage

Wrap your components with the ViewAnimationContainer to enable animations. The component provides sensible defaults while offering extensive customization options.

import MotionContainer from "@/components/MotionProvider/motion-container";
import { FC } from "react";

export const Experiment: FC = () => {
  return (
    <MotionContainer
      mode="fadeUp"
      elementType="div"
      configView={{ once: false, amount: 0.5 }}
      transition="smooth"
      delay={0.2}
    >
      <h1>Animated Content</h1>
    </MotionContainer>
  );
}
mode

Defines the animation type (supports single or multiple animations)

elementType

Creates the DOM as animation container. Accepts valid HTML elements such as (div, span, section, etc)

transition

Predefined easing functions for smooth animations

delay

Delays the animation in seconds default to 0

configView

A configuration object for the animation. Takes two key-value

configView.once

If true the animation will play only once when the component entered on the viewport.if it is false the animation will repeat recursively once the element or component entered the viewport.

configView.amount

The threshold amount of the viewport to trigger the animation. Check the API from official motion docs