ab-nextjs-animations

IMPORTANT: This is a work in progress and subject to major changes until version 1.0.

💫 This is a lightweight collection of React animations created by Abraham Ukachi, and optimized for Next.js applications 😎.

Getting Started

Installation

npm

npm i ab-nextjs-animations

pnpm

pnpm install ab-nextjs-animations

Tailwind Animations

A list of all the supported tailwind animations and their current status:

| No. | Name | File | Status | |:----|:-----|:-----|:-------| | 1 | popIn | pop-in/index.ts | Done | | 2 | fadeIn | fade-in/index.ts | Done | | 3 | fadeOut | fade-out/index.ts | Done | | 4 | slideFromDown | slide-from-down/index.ts | Done | | 5 | slideFromUp | slide-from-up/index.ts | Done | | 6 | slideLeft | slide-left/index.ts | Done | | 7 | slideFromLeft | slide-from-left/index.ts | Done | | 8 | slideRight | slide-right/index.ts | Done | | 9 | slideFromRight | slide-from-right/index.ts | Done | | 10 | slideDown | slide-down/index.ts | Done | | 11 | slideUp | slide-up/index.ts | Done | | 12 | loop | loop/index.ts | Done |

NOTE:

CSS Animations

A list of all the supported css animations and their current status:

| No. | Name | File | Status | |:----|:-----|:-----|:------- | 1 | popIn | pop-in/styles.css | Done | | 2 | fadeIn | fade-in/styles.css | Done | | 3 | fadeOut | fade-out/styles.css | Done | | 4 | slideFromDown | slide-from-down/styles.css | Done | | 5 | slideFromUp | slide-from-up/styles.css | Done | | 6 | slideLeft | slide-left/styles.css | Done | | 7 | slideFromLeft | slide-from-left/styles.css | Done | | 8 | slideRight | slide-right/styles.css | Done | | 9 | slideFromRight | slide-from-right/styles.css | Done | | 10 | slideDown | slide-down/styles.css | Done | | 11 | slideUp | slide-up/styles.css | Done | | 12 | loop | loop/styles.css | Done |

NOTE:

TODOs

• [ ] Optimize all .ts animation files
• [ ] Optimize all .css animation files
• [ ] Update README.md of all animations

Learn More abElements

To learn more about abElements, take a look at the following resources:

• abElements Documentation - learn about abElements features and API.
• abElements Animations - learn about animations in abElements.
• abElements Core - learn about core in abElements.
• abElements Theme - learn about theme in abElements.
• abElements Icons - learn about icons in abElements.
• abElements Components - learn about components in abElements.
• abElements Fonts - learn about fonts in abElements.
• abElements Hooks - learn about hooks in abElements.

You can check out the abElements GitHub repository for more details.

License

This ab-nextjs-animations project is MIT Licensed ;)