Skip to content

Latest commit

 

History

History
175 lines (156 loc) · 9.13 KB

README.md

File metadata and controls

175 lines (156 loc) · 9.13 KB
Raw

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