https://github.com/akdevv/awwwards
Visually captivating website inspired by Zentry. Smooth animations using GSAP and TailwindCSS.
https://github.com/akdevv/awwwards
gsap react tailwindcss
Last synced: about 2 months ago
JSON representation
Visually captivating website inspired by Zentry. Smooth animations using GSAP and TailwindCSS.
- Host: GitHub
- URL: https://github.com/akdevv/awwwards
- Owner: akdevv
- Created: 2025-01-23T10:31:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-24T08:59:46.000Z (over 1 year ago)
- Last Synced: 2025-06-10T07:43:59.697Z (about 1 year ago)
- Topics: gsap, react, tailwindcss
- Language: JavaScript
- Homepage: https://awwwards-gsap.vercel.app
- Size: 49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Awwwards
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
## ⚠️ Disclaimer
This a tutorial project from **[JavaScript Mastery](https://www.youtube.com/watch?v=zA9r5zTllx4)**.
All design credits goes to **[Zentry](https://zentry.com/)**.
Build a visually captivating website inspired by **[Zentry](https://zentry.com/)**, featuring scroll-triggered animations, geometric transitions, and engaging video storytelling. Learn how to deliver a luxurious, modern feel, focusing on engaging UI/UX and smooth responsiveness, capturing the essence of what makes an Awwwards winner.
- GSAP
- React.js
- Tailwind CSS
## 🔋 Features
👉 **Scroll-Based Animations**: Dynamic animations triggered by scrolling for a more engaging user experience.
👉 **Clip Path Shaped Animations**: Unique geometric transitions using CSS clip-paths to create visually stunning effects.
👉 **3D Hover Effects**: Interactive 3D transformations that respond to user interactions for a modern feel.
👉 **Video Transitions**: Seamlessly integrated video elements to enhance storytelling and flow.
👉 **Smooth UI/UX**: Polished interfaces with buttery-smooth interactions for an intuitive user journey.
👉 **Completely Responsive**: Flawless adaptation across all devices, ensuring a consistent experience.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/akdevv/awwards.git
cd awwards
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.