nextjs-animate-on-scroll v1.0.1

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

License

MIT © vito-mohagheghian