https://github.com/mastrangelis/gsap-animations-react

https://github.com/mastrangelis/gsap-animations-react

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/mastrangelis/gsap-animations-react
• Owner: Mastrangelis
• Created: 2024-06-18T10:19:13.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-20T11:44:22.000Z (5 months ago)
• Last Synced: 2024-06-21T02:40:01.359Z (5 months ago)
• Language: JavaScript
• Homepage: https://gsap-animations-react.vercel.app
• Size: 86.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


  


    

    

    

    

  


  
GSAP Animations with React and Tailwind CSS



## 📋 Table of Contents

1. 🤖 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 🔨[Deployment](#deployment)

5. 🤸 [Quick Start](#quick-start)

## 🤖 Introduction

Playground for experimenting with gsap animations in react and tailwind css

## ⚙️ Tech Stack

- Vite

- React.js

- Tailwind CSS

- GSAP

## 🔋 Features

👉 **GSAP to**: How to animate elements from their current state to a new state.

👉 **GSAP From**: How animate elements from a new state to their current state.

👉 **GSAP FromTo**: How to animate elements from a new state to a new state.

👉 **GSAP Timeline**: How to create a timeline instance that can be used to manage multiple animations.

👉 **GSAP Stagger**: How to apply animations with a staggered delay to a group of elements.

👉 **GSAP ScrollTrigger**: How to create animations that are triggered by the scroll position of the page.

👉 **GSAP Text**: How to animate text such as titles and paragraphs.

## 🛠️ Deployment Playground

You can visit the deployed version [here](https://gsap-animations-react.vercel.app/)

## 🤸 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](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/Mastrangelis/gsap-animations-react.git

cd gsap-animations-react

```

**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.