https://github.com/mohammad-mghn/nextjs-animate-on-scroll

NPM Package for Next.js framework to animate components on scroll easily.
https://github.com/mohammad-mghn/nextjs-animate-on-scroll

create-react-library eslint framer-motion npm-package prettier react webpack

Last synced: 3 months ago
JSON representation

NPM Package for Next.js framework to animate components on scroll easily.

• Host: GitHub
• URL: https://github.com/mohammad-mghn/nextjs-animate-on-scroll
• Owner: mohammad-mghn
• License: gpl-3.0
• Created: 2022-08-10T15:59:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-11T11:10:11.000Z (over 2 years ago)
• Last Synced: 2024-10-10T06:29:08.876Z (3 months ago)
• Topics: create-react-library, eslint, framer-motion, npm-package, prettier, react, webpack
• Language: JavaScript
• Homepage:
• Size: 13.1 MB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        
# nextjs-animate-on-scroll

NPM Package for Next.js framework to animate components on scroll easily created by [vito.mohagheghian](https://vito.vercel.app).

##  Demo

![Preview](/preview/preview.gif)

> [Live Demo](https://google/com)

##  Installation

```bash

# npm 

npm install nextjs-animate-on-scroll 

# yarn 

yarn add nextjs-animate-on-scroll

```

##  Usage

```jsx

import React from 'react'

import Animator, { AnimateProvider } from 'nextjs-animate-on-scroll'

const App = () => {

  return (

    

      


        

          {/* your component */}

        

      

    

  )

}


export default App

```

### AnimateProvider

> For using AnimateProvider in the app you have put it in a way that Animator be its child, no matter using that in _app, or other components.

### Animator

> For using Animator in the app you have to wrap elements that want to become animated.

### Animator Props

| Name                | Type       | Default Value | Required? | Description                                            |

| ------------------- | ---------- | ------------- | --------- | ------------------------------------------------------ |

| initial           | `Obejsct`  | `undefined`   | Yes | Initial styles of wrapped component                      |

| onScreen               | `Object`   | `undefined`    | Yes | Styles of component when becomed in view |

| UNKey          | -  | 1         | Yes | like key prop                      |

| amountDisplay       | `Number` | 0.25     | No | The amount of element should become in view to run animation                       |

| bounce | `Number` | 0.5     | No | the amount bounce from 0 to 1                                   |

##  License

MIT © [vito-mohagheghian](https://github.com/vito-mohagheghian)