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