🖥️ Animated Products Catalog Page

An example of component animations and page transitions on a products catalog using NextJS, Styled Components and Framer Motion.

📄 Overview

This project was made using NextJS framework for React and my goal with it was to learn about the Static Site Generation resource provided by Vercel, and general animations with Framer Motion lib, which I also never tested.

Main dependencies used:

• NextJS
• Typescript
• Framer Motion
• Styled Components
• JSON Server

📀 Setup

Wanna see this humble project by yourself? Sure 😁 just do the following steps:

1. Make sure you have a package manager like npm or Yarn installed in your machine.

2. Download this repository into a directory of your preferrence either by clicking on the download button in this repo or by cloning this repo using the GIT CLI:

$ git clone https://github.com/100f/animated-products-page-example.git

3. To install it, immediately throw the following commands in your terminal (at the root folder directory)

• npm

  $ npm install

• Yarn

  $ yarn

4. To actually test it, after making sure you're in the directory's root folder, throw the following command in your terminal to run in dev mode:

• npm

  $ npm run dev

• Yarn

  $ yarn dev

5. Just run the project in your 🌐 browser! It runs at port 3000, so just access http://localhost:3000 and give it a try. Cheers!

---

Made by Caio Enrique - Oct, 2020. 👓