Next-reveal NPM

Introduction

next-reveal makes it easy to add awesome scroll animations to your Next.js project.

If you want to learn more about Scrollreveal.js the full documentation can be found at https://scrollrevealjs.org

🐧 ⭐ If you like this project give me a Star ⭐ 🐧

Installation

npm i next-reveal

yarn add next-reveal

Usage

RevealWrapper

You can animate single elements with RevealWrapper, just wrap your component inside RevealWrapper and base animate will be applied.

Base usage

import RevealWrapper from  'next-reveal'

<RevealWrapper>
	<h1  className={styles.title}>
		Welcome to <a  href="https://nextjs.org">Next.js!</a>
	</h1>
</RevealWrapper>

Custum animation

<RevealWrapper rotate={{x:  12,y:40,z:0}} origin='left' delay={200} duration={1000} distance='500px' reset={true} viewOffset={{top:  25,  right:0,  bottom:  10,  left:5}}>
	<h1  className='text-blue-700 text-6xl leading-5 mt-36'>Welcome to <a  className='focus:underline active:underline hover:underline'  href="https://github.com/ritmillio/next-reveal">next-reveal!</a></h1>
	<p  className='text-sm mt-5 ml-2'>A package based on ScrollReveal</p>
</RevealWrapper>

RevealList

You can animate multiple elements which will result a sequence animation.

Basic usage Note that in RevealList you need to specify at least the delay and interval

import RevealList from  'next-reveal'

<RevealList interval={60} delay={500}  className='flex flex-wrap items-center justify-center'>
	<div className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
	<div className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
	<div className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
	<div className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
</RevealList>

See live demo next-reveal-site

Options/Animations

Option	Type	Description
`delay`	number	`delay` is the time before reveal animations begin.
`distance`	string	`distance` controls how far elements move when revealed.
`duration`	number	`duration` controls how long animations take to complete.
`easing`	string	`easing` controls how animations transition between their start and end values.
`interval`	number	`interval` is the time between each reveal.
`opacity`	`number \| null`	`opacity` specifies the opacity they have prior to being revealed.
`origin`	string	`origin` specifies what direction elements come from when revealed.
`rotate`	object	`rotate` specifies the rotation elements have prior to being revealed.
`scale`	number	`scale` specifies the size of elements have prior to being revealed.
`desktop`	boolean	`desktop` enables/disables animations on desktop browsers.
`mobile`	boolean	`mobile` enables/disables animations on mobile browsers.
`reset`	boolean	`reset` enables/disables elements returning to their initialized position when they leave the viewport. When `true` elements reveal each time they enter the viewport instead of once.
`useDelay`	string	`useDelay` specifies when values assigned to options.delay are used.
`viewFactor`	number	`viewFactor` specifies what portion of an element must be within the viewport for it to be considered visible.
`viewOffset`	object	`viewOffset` expands/contracts the active boundaries of the viewport when calculating element visibility.

Defaults

const defaultRevealOptions  = {
delay:  350,
distance:  '50px',
duration:  650,
easing:  'cubic-bezier(0.5, 0, 0, 1)',
opacity:  0,
origin:  'top',
rotate: {
	x:  0,
	y:  0,
	z:  0,
},
scale:  1,
cleanup:  false,
desktop:  true,
mobile:  true,
reset:  false,
useDelay:  'always',
viewFactor:  0.0,
viewOffset: {
		top:  0,
		right:  0,
		bottom:  0,
		left:  0,
	},
}

Prevent Flickering

If you experience Flickering you can create helper css class to make RevealWrapper element or RevealList items visibility:hidden which will prevent flickering.

Step 1:

Create a _document.tsx file in your pages directory if you don't have one. Inside your _document.tsx file you need to add sr class to the Html tag

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx:any) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html lang='en' className='sr'>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Step 2:

Add helper classes to your global.css file

html.sr .load-hidden {
 visibility: hidden;
}

Step 3:

Add your load-hidden class to your elements where you use RevealWrapper or RevealList

<RevealWrapper className="load-hidden" rotate={{x: 12,y:40,z:0}} origin='left' delay={200} duration={1000} distance='500px' reset={true} viewOffset={{top: 25, right:0, bottom: 10, left:5}}>
	<h1 className='text-blue-700 text-6xl leading-5 mt-36'>
		Welcome to <a className='focus:underline active:underline hover:underline' href="https://github.com/ritmillio/next-reveal">next-reveal!</a>
	</h1>
	<p className='text-sm mt-5 ml-2'>A package based on ScrollReveal</p>
</RevealWrapper>

<RevealList interval={60} delay={500} className='flex flex-wrap items-center justify-center'>
	<div className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
	<div className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
	<div className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
	<div className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></div>
</RevealList>