GSAP Workshop (Starter)

 
📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 🚀 Quick Start

 
✨ Introduction

Simple GSAP workshop showcasing various primary animations. GSAP (GreenSock Animation Platform) is a framework-agnostic JavaScript animation library used to create fluid and engaging animations.

 
⚙️ Tech Stack

• React is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain.

• GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It excels in animating HTML elements with smoothness and precision, making it ideal for enhancing user interfaces and web experiences. GSAP's robust API allows developers to create complex animations easily, leveraging timelines and plugins for advanced control and customization. Its efficient rendering engine ensures animations run smoothly across different browsers and devices, providing a seamless user experience.

• Vite is a modern frontend build tool known for fast ES Module imports, efficient bundling, and quick development server startup times. It supports frameworks like Vue.js and React, optimizing workflow and performance compared to traditional bundlers.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/JavaScript-Mastery-Pro/gsap-cc-starter.git
cd gsap-cc-starter

Installation

Let's install the project dependencies, from your terminal, run:

npm install

Running the Project

Installation will take a minute or two, but once that's done, you should be able to run the following command:

npm run dev

Open http://localhost:5173 in your browser to view the project.