Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ritmillio/next-reveal
The easiest way to animate your Next.js project. Scrollreveal.js helper package.
https://github.com/ritmillio/next-reveal
animation animation-plugin css nextjs reveal scrollreveal scrollreveal-js
Last synced: 12 days ago
JSON representation
The easiest way to animate your Next.js project. Scrollreveal.js helper package.
- Host: GitHub
- URL: https://github.com/ritmillio/next-reveal
- Owner: ritmillio
- Created: 2022-09-14T16:08:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-30T20:09:59.000Z (about 1 year ago)
- Last Synced: 2024-09-20T13:16:02.234Z (about 2 months ago)
- Topics: animation, animation-plugin, css, nextjs, reveal, scrollreveal, scrollreveal-js
- Language: TypeScript
- Homepage: https://next-reveal-site-ritmillio.vercel.app/
- Size: 243 KB
- Stars: 51
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
next-reveal
The easiest way to animate your Next.js app
# 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](https://scrollrevealjs.org)
- 🐧 ⭐ If you like this project give me a Star ⭐ 🐧
# Installation
```bash
npm i next-reveal
```
or
```bash
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
```js
import { RevealWrapper } from 'next-reveal'
```
```html
Welcome to Next.js!
```
Custum animation
```html
Welcome to next-reveal!
A package based on ScrollReveal
```
### 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*
```js
'use client'
import { RevealList } from 'next-reveal'
```
```html
```
*See live demo [next-reveal-site](https://next-reveal.vercel.app/)*
---
### 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
```js
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
```js
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 (
)
}
}
export default MyDocument
```
#### Step 2:
Add helper classes to your ```global.css``` file
```css
html.sr .load-hidden {
visibility: hidden;
}
```
#### Step 3:
Add your ```load-hidden``` class to your elements where you use RevealWrapper or RevealList
```js
Welcome to next-reveal!
A package based on ScrollReveal
```
```js
```
# License
Since this package is using Scrollreveal.js, in case of commercial use check out their [Commercial License](https://scrollrevealjs.org/pricing/)