Skip to content

Latest commit

 

History

History
81 lines (44 loc) · 1.96 KB

README.md

File metadata and controls

81 lines (44 loc) · 1.96 KB

Animated Card Component

This repository contains the code for the Animated Card Component, a small project built using React, Next.js, and GSAP.

Description

The Animated Card Component is a small interactive component that consists of a front and a back side. When the user clicks on the card, it smoothly flips from the front side to the back side, and vice versa. The front side displays basic information, such as a title, a short description, and a button to view more details. The back side displays additional details about the card.

Sample

You can use any sample data for card.

Here is a sample of what card should look like.

Animated.Card.mov

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Next.js: A framework for building React applications with server-side rendering, static generation, and more.
  • GSAP (GreenSock Animation Platform): A JavaScript library for creating high-performance animations.

Installation

To run the Animated Card Component project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/your-username/animated-card-component.git

  2. Change into the project directory:

    cd animated-card-component

  3. Install the dependencies using npm or yarn:

    npm install

    Or

    yarn install

  4. Start the development server:

    npm run dev

    Or

    yarn run dev

  5. Open your browser and visit http://localhost:3000 to see the project in action.

Feel free to explore the code and make any modifications as needed.

Contributions

Contributions to the Animated Card Component project are welcome! If you find any issues or have ideas for improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.