{"id":16453808,"url":"https://github.com/ritmillio/next-reveal","last_synced_at":"2025-03-16T17:37:04.596Z","repository":{"id":59506731,"uuid":"536659956","full_name":"ritmillio/next-reveal","owner":"ritmillio","description":"The easiest way to animate your Next.js project. Scrollreveal.js helper package.","archived":false,"fork":false,"pushed_at":"2023-08-30T20:09:59.000Z","size":249,"stargazers_count":51,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-20T13:16:02.234Z","etag":null,"topics":["animation","animation-plugin","css","nextjs","reveal","scrollreveal","scrollreveal-js"],"latest_commit_sha":null,"homepage":"https://next-reveal-site-ritmillio.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ritmillio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-14T16:08:51.000Z","updated_at":"2024-09-05T22:25:23.000Z","dependencies_parsed_at":"2024-06-18T22:40:29.477Z","dependency_job_id":"b0674b60-fd0d-4cd0-b448-4caecdfc074c","html_url":"https://github.com/ritmillio/next-reveal","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":"0.15000000000000002","last_synced_commit":"ff471aae9aa1b8065c381c10ff34f6dcc9da33d0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritmillio%2Fnext-reveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritmillio%2Fnext-reveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritmillio%2Fnext-reveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritmillio%2Fnext-reveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ritmillio","download_url":"https://codeload.github.com/ritmillio/next-reveal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219861662,"owners_count":16555988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-plugin","css","nextjs","reveal","scrollreveal","scrollreveal-js"],"created_at":"2024-10-11T10:16:53.578Z","updated_at":"2024-10-11T10:16:54.215Z","avatar_url":"https://github.com/ritmillio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ch1 align=\"center\"\u003enext-reveal\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eThe easiest way to animate your Next.js app\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://next-reveal.vercel.app/\" align=\"center\"\u003eDemo\u003c/a\u003e\u003c/p\u003e\n\n# Introduction\n\u003cstrong\u003enext-reveal makes it easy to add awesome scroll animations to your Next.js project.\u003c/strong\u003e\n### If you want to learn more about Scrollreveal.js the full documentation can be found at [https://scrollrevealjs.org](https://scrollrevealjs.org)\n- 🐧 ⭐ If you like this project give me a Star ⭐ 🐧\n# Installation\n```bash\nnpm i next-reveal\n```\nor\n```bash\nyarn add next-reveal\n```\n# Usage\n\n### RevealWrapper\nYou can animate single elements with RevealWrapper, just wrap your component inside RevealWrapper and base animate will be applied.\n\nBase usage\n```js\nimport { RevealWrapper } from  'next-reveal'\n```\n```html\n\u003cRevealWrapper\u003e\n\t\u003ch1  className={styles.title}\u003e\n\t\tWelcome to \u003ca  href=\"https://nextjs.org\"\u003eNext.js!\u003c/a\u003e\n\t\u003c/h1\u003e\n\u003c/RevealWrapper\u003e\n```\nCustum animation\n```html\n\u003cRevealWrapper 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}}\u003e\n\t\u003ch1  className='text-blue-700 text-6xl leading-5 mt-36'\u003eWelcome to \u003ca  className='focus:underline active:underline hover:underline'  href=\"https://github.com/ritmillio/next-reveal\"\u003enext-reveal!\u003c/a\u003e\u003c/h1\u003e\n\t\u003cp  className='text-sm mt-5 ml-2'\u003eA package based on ScrollReveal\u003c/p\u003e\n\u003c/RevealWrapper\u003e\n```\n### RevealList\nYou can animate multiple elements which will result a sequence animation.\n\nBasic usage\n*Note that in RevealList you need to specify at least the delay and interval*\n```js\n'use client'\n\nimport { RevealList } from  'next-reveal'\n```\n```html\n\u003cRevealList interval={60} delay={500}  className='flex flex-wrap items-center justify-center'\u003e\n\t\u003cdiv className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\t\u003cdiv className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\t\u003cdiv className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\t\u003cdiv className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\u003c/RevealList\u003e\n```\n*See live demo [next-reveal-site](https://next-reveal.vercel.app/)*\n\n---\n### Options/Animations\n\n| Option                           | Type                    | Description                                                                                                                                                                          |\n| ---------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `delay`                    | number                  | `delay` is the time before reveal animations begin.                                                                               |\n| `distance`                            | string                  | `distance` controls how far elements move when revealed.                                                                                                                                                       |\n| `duration`                     | number                  | `duration` controls how long animations take to complete.                                                               |\n| `easing`                          | string | `easing` controls how animations transition between their start and end values.                                                                                                                    |\n| `interval`                         | number | `interval` is the time between each reveal.                                                                                                                  |\n| `opacity`                      | `number | null`                  | `opacity` specifies the opacity they have prior to being revealed.                                                                                                       |\n| `origin`                      | string                  | `origin` specifies what direction elements come from when revealed.                                                                                                                                                        |\n| `rotate`                      | object                  | `rotate` specifies the rotation elements have prior to being revealed.                                                                                                                                                        |\n| `scale`                      | number                  | `scale` specifies the size of elements have prior to being revealed.                                                                                                                                                        |\n| `desktop`                      | boolean                  | `desktop`  enables/disables animations on desktop browsers.                                                                                                                                                        |\n| `mobile`                      | boolean                  | `mobile` enables/disables animations on mobile browsers.                                                                                                                                                        |\n| `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.                                                                                                                                                        |\n| `useDelay`                      | string                  | `useDelay` specifies when values assigned to options.delay are used.                                                                                                                                                        |\n| `viewFactor`                      | number                  | `viewFactor` specifies what portion of an element must be within the viewport for it to be considered visible.                                                                                                                                                        |\n| `viewOffset`                      | object                  | `viewOffset` expands/contracts the active boundaries of the viewport when calculating element visibility.                                                                                                                                                        |\n\n### Defaults\n```js\nconst defaultRevealOptions  = {\ndelay:  350,\ndistance:  '50px',\nduration:  650,\neasing:  'cubic-bezier(0.5, 0, 0, 1)',\nopacity:  0,\norigin:  'top',\nrotate: {\n\tx:  0,\n\ty:  0,\n\tz:  0,\n},\nscale:  1,\ncleanup:  false,\ndesktop:  true,\nmobile:  true,\nreset:  false,\nuseDelay:  'always',\nviewFactor:  0.0,\nviewOffset: {\n\t\ttop:  0,\n\t\tright:  0,\n\t\tbottom:  0,\n\t\tleft:  0,\n\t},\n}\n```\n\n### Prevent Flickering\nIf you experience Flickering you can create helper ```css``` class to make ```RevealWrapper``` element or ```RevealList``` items ```visibility:hidden``` which will prevent flickering.\n\n#### Step 1: \nCreate 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\n\n```js\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx:any) {\n    const initialProps = await Document.getInitialProps(ctx)\n    return { ...initialProps }\n  }\n\n  render() {\n    return (\n      \u003cHtml lang='en' className='sr'\u003e\n        \u003cHead\u003e\u003c/Head\u003e\n        \u003cbody\u003e\n          \u003cMain /\u003e\n          \u003cNextScript /\u003e\n        \u003c/body\u003e\n      \u003c/Html\u003e\n    )\n  }\n}\n\nexport default MyDocument\n```\n#### Step 2:\nAdd helper classes to your ```global.css``` file\n ```css\nhtml.sr .load-hidden {\n  visibility: hidden;\n}\n```\n#### Step 3:\nAdd your ```load-hidden``` class to your elements where you use RevealWrapper or RevealList\n\n```js\n\u003cRevealWrapper 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}}\u003e\n\t\u003ch1 className='text-blue-700 text-6xl leading-5 mt-36'\u003e\n\t\tWelcome to \u003ca className='focus:underline active:underline hover:underline' href=\"https://github.com/ritmillio/next-reveal\"\u003enext-reveal!\u003c/a\u003e\n\t\u003c/h1\u003e\n\t\u003cp className='text-sm mt-5 ml-2'\u003eA package based on ScrollReveal\u003c/p\u003e\n\u003c/RevealWrapper\u003e\n```\n\n```js\n\u003cRevealList interval={60} delay={500} className='flex flex-wrap items-center justify-center'\u003e\n\t\u003cdiv className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\t\u003cdiv className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\t\u003cdiv className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\t\u003cdiv className='load-hidden bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'\u003e\u003c/div\u003e\n\u003c/RevealList\u003e\n```\n\n# License\n\nSince this package is using Scrollreveal.js, in case of commercial use check out their [Commercial License](https://scrollrevealjs.org/pricing/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritmillio%2Fnext-reveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fritmillio%2Fnext-reveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritmillio%2Fnext-reveal/lists"}