Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/abdulrahmans0414/gsap

This repository is dedicated to learning and experimenting with GSAP (GreenSock Animation Platform), a powerful JavaScript library for creating high-performance animations. The project includes examples, tutorials, and practice exercises using HTML, CSS, and JavaScript to demonstrate the capabilities of GSAP.
https://github.com/abdulrahmans0414/gsap

animation css fontend gsap gsapanimation html javascript javascript-library responsive scrolltrigger webdesign

Last synced: 23 days ago
JSON representation

This repository is dedicated to learning and experimenting with GSAP (GreenSock Animation Platform), a powerful JavaScript library for creating high-performance animations. The project includes examples, tutorials, and practice exercises using HTML, CSS, and JavaScript to demonstrate the capabilities of GSAP.

Awesome Lists containing this project

README 

          
# GSAP Learning Repository



This repository is dedicated to learning and experimenting with **GSAP (GreenSock Animation Platform)**, a powerful JavaScript library for creating high-performance animations. Each folder contains examples, tutorials, and practice exercises using **HTML**, **CSS**, and **JavaScript** to demonstrate the capabilities of GSAP.



---



## Table of Contents



- [GSAP Learning Repository](#gsap-learning-repository)

  - [Table of Contents](#table-of-contents)

  - [01\_basic](#01_basic)

  - [02\_timeline](#02_timeline)

  - [03\_nav](#03_nav)

  - [04\_scrollTrigger](#04_scrolltrigger)

  - [05\_pin](#05_pin)

  - [06\_svgAnimation](#06_svganimation)

  - [07\_customCursor](#07_customcursor)

  - [08\_customImgCursor](#08_customimgcursor)

  - [09\_navBarAnimation](#09_navbaranimation)

  - [10\_textAnimation](#10_textanimation)

  - [11\_timelineAnimation](#11_timelineanimation)

  - [12\_practiceOnEcommerce](#12_practiceonecommerce)

  - [13\_gsapInReact](#13_gsapinreact)

  - [How to Use](#how-to-use)

  - [Technologies Used](#technologies-used)

  - [Contributions](#contributions)

  - [License](#license)



---



## 01_basic



- **Description**: Basic GSAP animations for elements like boxes and text.

- **Features**:

  - Simple animations using `gsap.to()` and `gsap.from()`.

  - Movement, rotation, scaling, and color changes.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 02_timeline



- **Description**: Introduction to GSAP timelines for sequencing animations.

- **Features**:

  - Chaining animations using `gsap.timeline()`.

  - Sequential animations for multiple elements.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 03_nav



- **Description**: Animations for navigation bars and headings.

- **Features**:

  - GSAP animations for navigation links and headings.

  - Staggered animations for multiple elements.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 04_scrollTrigger



- **Description**: Scroll-based animations using GSAP ScrollTrigger.

- **Features**:

  - Animations triggered by scrolling.

  - Scroll-triggered movement, opacity, and scaling effects.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 05_pin



- **Description**: Pin elements during scroll using GSAP ScrollTrigger.

- **Features**:

  - Pinning elements while scrolling.

  - Scroll-triggered animations with pinning.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 06_svgAnimation



- **Description**: Animations for SVG paths using GSAP.

- **Features**:

  - Dynamic SVG path animations on mouse interaction.

  - Smooth transitions using GSAP.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 07_customCursor



- **Description**: Custom cursor animations using GSAP.

- **Features**:

  - Custom cursor that follows mouse movement.

  - Smooth transitions and easing effects.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 08_customImgCursor



- **Description**: Custom cursor with image hover effects.

- **Features**:

  - Custom cursor changes on image hover.

  - Text and scale animations on hover.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 09_navBarAnimation



- **Description**: Animated navigation bar with GSAP.

- **Features**:

  - Animated navigation menu toggle.

  - Staggered animations for menu items.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 10_textAnimation



- **Description**: Text animations using GSAP.

- **Features**:

  - Split text animations.

  - Staggered animations for text characters.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 11_timelineAnimation



- **Description**: Advanced timeline animations for a digital agency website.

- **Features**:

  - Hero section animations.

  - Scroll-triggered animations for services and testimonials.

  - Reusable animation functions for consistency.

- **Files**:

  - `index.html`

  - `style.css`

  - `script.js`



---



## 12_practiceOnEcommerce



- **Description**: Multi-page e-commerce website with GSAP animations.

- **Features**:

  - GSAP animations for navigation, hero sections, and cards.

  - ScrollTrigger for scroll-based animations.

  - Responsive design with mobile-friendly navigation.

  - Contact form and interactive elements.

- **Files**:

  - `index.html` (Home)

  - `about.html` (About)

  - `services.html` (Services)

  - `contact.html` (Contact)

  - `style.css`

  - `script.js`

  - 

## 13_gsapInReact



- **Description**: Using GSAP in a React environment to create dynamic and performant animations.

- **Features**:

  - GSAP animations integrated with React components.

  - Use of useGSAP hook for React-safe animations.

  - Examples of rotation, scaling, and movement animations.

  - Responsive design with Tailwind CSS.

- **Files**:

  - `App.jsx` 

  - `components/` (React components for animations)

  - `pages/` (React pages for different examples)

  - `tailwind.config.js` (Tailwind CSS configuration)



- Setup:



1. Install dependencies:



    ```bash

    npm install gsap @gsap/react tailwindcss postcss autoprefixer

    ```

2. Run the project:



    ```bash

    npm run dev

    ```



---

---



## How to Use



1. Clone the repository:

   ```bash

   git clone https://github.com/abdulrahmans0414/gsap.git



2. Navigate to the desired folder:



   ```bash

   cd gsap/01_basic

   ```

3. Open `index.html` in your browser to view the animations.



## Technologies Used

- HTML: Structure of the web pages.



- CSS: Styling and layout.



- JavaScript: Logic and interactivity.



- GSAP: Animation library for smooth and performant animations.



- ScrollTrigger: GSAP plugin for scroll-based animations.

- React: JavaScript library for building user interfaces.

- Tailwind CSS: Utility-first CSS framework for responsive design.



## Contributions

Feel free to contribute by adding more examples, improving existing code, or suggesting new features. Open an issue or submit a pull request!



## License

This project is open-source and available under the MIT License.