vito-mohagheghian / nextjs-animate-on-scroll

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

nextjs-animate-on-scroll

NPM Package for Next.js framework to animate components on scroll easily created by vito.mohagheghian.

Demo

Live Demo

Installation

# npm 
npm install nextjs-animate-on-scroll 

# yarn 
yarn add nextjs-animate-on-scroll

Usage

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

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