next-reveal

The easiest way to animate your Next.js app

Demo

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

or

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

'use client'

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`
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>

License

Since this package is using Scrollreveal.js, in case of commercial use check out their Commercial License