NPM Package for Next.js framework to animate components on scroll easily created by vito.mohagheghian.
# npm npm install nextjs-animate-on-scroll # yarn yarn add nextjs-animate-on-scroll
import React from 'react' import Animator, { AnimateProvider } from 'nextjs-animate-on-scroll' const App = () => { return ( <AnimateProvider> <div style={{ height: '800vh', display: 'grid', placeItems: 'center', backgroundColor: '#2E2E2E' }} > <Animator amountDisplay={0.5} UNKey={'example'} initial={{ scale: 1.2, opacity: 0 }} onScreen={{ scale: 1, opacity: 1 }} > {/* your component */} </Animator> </div> </AnimateProvider> ) } export default App
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.
For using Animator in the app you have to wrap elements that want to become animated.
| 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 |
MIT © vito-mohagheghian