https://github.com/aritra69/card-animation

Staggered card animation using framer motion library
https://github.com/aritra69/card-animation

animation featured framer-motion nextjs tailwindcss

Last synced: 1 day ago
JSON representation

Staggered card animation using framer motion library

• Host: GitHub
• URL: https://github.com/aritra69/card-animation
• Owner: ARITRA69
• Created: 2023-11-21T11:03:32.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-22T06:03:13.000Z (about 1 year ago)
• Last Synced: 2024-11-05T15:04:02.612Z (about 2 months ago)
• Topics: animation, featured, framer-motion, nextjs, tailwindcss
• Language: TypeScript
• Homepage: https://card-animation-framer-motion.vercel.app
• Size: 124 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Card Stager Animation

This project demonstrates a card stagger animation using Framer Motion and Lenis React within a Next.js, React, Tailwind CSS, and TypeScript environment.

## Technologies Used

- **Next.js:** Utilized as the foundational framework for building the project.

- **React:** Employed for creating interactive UI components.

- **Tailwind CSS:** Used for styling and UI design.

- **TypeScript:** Ensuring type safety and improved development experience.

- **Framer Motion:** Integrated for creating smooth animations.

- **React Lenis:** Utilized for specific animation tasks or enhancements.

## Live Demo

Check out the live demo [here](https://card-animation-framer-motion.vercel.app/)

## Getting Started

To get a local copy up and running, follow these simple steps:

1. **Clone the repository:**

```bash

git clone https://github.com/ARITRA69/card-animation.git

```

2. Go to the directory and run locally

```

cd card-animation

npm install

# or

yarn install

```

3. **Run the development server**

   ```bash

   npm run dev

  ```

   or

  ```bash

   yarn dev

```