Checkout abElements →

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 ;)