{"id":26924397,"url":"https://github.com/abdulrahmans0414/gsap","last_synced_at":"2026-05-08T07:31:08.328Z","repository":{"id":282351353,"uuid":"948300914","full_name":"abdulrahmans0414/gsap","owner":"abdulrahmans0414","description":"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.","archived":false,"fork":false,"pushed_at":"2025-03-18T12:23:17.000Z","size":66,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-30T17:49:06.898Z","etag":null,"topics":["animation","css","fontend","gsap","gsapanimation","html","javascript","javascript-library","responsive","scrolltrigger","webdesign"],"latest_commit_sha":null,"homepage":"https://gsap-4jvw-abdul-rahmans-projects-336f2b32.vercel.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abdulrahmans0414.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-14T04:48:26.000Z","updated_at":"2025-03-18T12:23:21.000Z","dependencies_parsed_at":"2025-08-23T20:28:35.560Z","dependency_job_id":"3b02bb0a-b7e4-40e3-91f8-334e02476446","html_url":"https://github.com/abdulrahmans0414/gsap","commit_stats":null,"previous_names":["abdulrahmans0414/gsap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abdulrahmans0414/gsap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulrahmans0414%2Fgsap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulrahmans0414%2Fgsap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulrahmans0414%2Fgsap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulrahmans0414%2Fgsap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abdulrahmans0414","download_url":"https://codeload.github.com/abdulrahmans0414/gsap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulrahmans0414%2Fgsap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32770971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","fontend","gsap","gsapanimation","html","javascript","javascript-library","responsive","scrolltrigger","webdesign"],"created_at":"2025-04-02T01:54:04.600Z","updated_at":"2026-05-08T07:31:08.323Z","avatar_url":"https://github.com/abdulrahmans0414.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GSAP Learning Repository\n\nThis 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.\n\n---\n\n## Table of Contents\n\n- [GSAP Learning Repository](#gsap-learning-repository)\n  - [Table of Contents](#table-of-contents)\n  - [01\\_basic](#01_basic)\n  - [02\\_timeline](#02_timeline)\n  - [03\\_nav](#03_nav)\n  - [04\\_scrollTrigger](#04_scrolltrigger)\n  - [05\\_pin](#05_pin)\n  - [06\\_svgAnimation](#06_svganimation)\n  - [07\\_customCursor](#07_customcursor)\n  - [08\\_customImgCursor](#08_customimgcursor)\n  - [09\\_navBarAnimation](#09_navbaranimation)\n  - [10\\_textAnimation](#10_textanimation)\n  - [11\\_timelineAnimation](#11_timelineanimation)\n  - [12\\_practiceOnEcommerce](#12_practiceonecommerce)\n  - [13\\_gsapInReact](#13_gsapinreact)\n  - [How to Use](#how-to-use)\n  - [Technologies Used](#technologies-used)\n  - [Contributions](#contributions)\n  - [License](#license)\n\n---\n\n## 01_basic\n\n- **Description**: Basic GSAP animations for elements like boxes and text.\n- **Features**:\n  - Simple animations using `gsap.to()` and `gsap.from()`.\n  - Movement, rotation, scaling, and color changes.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 02_timeline\n\n- **Description**: Introduction to GSAP timelines for sequencing animations.\n- **Features**:\n  - Chaining animations using `gsap.timeline()`.\n  - Sequential animations for multiple elements.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 03_nav\n\n- **Description**: Animations for navigation bars and headings.\n- **Features**:\n  - GSAP animations for navigation links and headings.\n  - Staggered animations for multiple elements.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 04_scrollTrigger\n\n- **Description**: Scroll-based animations using GSAP ScrollTrigger.\n- **Features**:\n  - Animations triggered by scrolling.\n  - Scroll-triggered movement, opacity, and scaling effects.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 05_pin\n\n- **Description**: Pin elements during scroll using GSAP ScrollTrigger.\n- **Features**:\n  - Pinning elements while scrolling.\n  - Scroll-triggered animations with pinning.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 06_svgAnimation\n\n- **Description**: Animations for SVG paths using GSAP.\n- **Features**:\n  - Dynamic SVG path animations on mouse interaction.\n  - Smooth transitions using GSAP.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 07_customCursor\n\n- **Description**: Custom cursor animations using GSAP.\n- **Features**:\n  - Custom cursor that follows mouse movement.\n  - Smooth transitions and easing effects.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 08_customImgCursor\n\n- **Description**: Custom cursor with image hover effects.\n- **Features**:\n  - Custom cursor changes on image hover.\n  - Text and scale animations on hover.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 09_navBarAnimation\n\n- **Description**: Animated navigation bar with GSAP.\n- **Features**:\n  - Animated navigation menu toggle.\n  - Staggered animations for menu items.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 10_textAnimation\n\n- **Description**: Text animations using GSAP.\n- **Features**:\n  - Split text animations.\n  - Staggered animations for text characters.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 11_timelineAnimation\n\n- **Description**: Advanced timeline animations for a digital agency website.\n- **Features**:\n  - Hero section animations.\n  - Scroll-triggered animations for services and testimonials.\n  - Reusable animation functions for consistency.\n- **Files**:\n  - `index.html`\n  - `style.css`\n  - `script.js`\n\n---\n\n## 12_practiceOnEcommerce\n\n- **Description**: Multi-page e-commerce website with GSAP animations.\n- **Features**:\n  - GSAP animations for navigation, hero sections, and cards.\n  - ScrollTrigger for scroll-based animations.\n  - Responsive design with mobile-friendly navigation.\n  - Contact form and interactive elements.\n- **Files**:\n  - `index.html` (Home)\n  - `about.html` (About)\n  - `services.html` (Services)\n  - `contact.html` (Contact)\n  - `style.css`\n  - `script.js`\n  - \n## 13_gsapInReact\n\n- **Description**: Using GSAP in a React environment to create dynamic and performant animations.\n- **Features**:\n  - GSAP animations integrated with React components.\n  - Use of useGSAP hook for React-safe animations.\n  - Examples of rotation, scaling, and movement animations.\n  - Responsive design with Tailwind CSS.\n- **Files**:\n  - `App.jsx` \n  - `components/` (React components for animations)\n  - `pages/` (React pages for different examples)\n  - `tailwind.config.js` (Tailwind CSS configuration)\n\n- Setup:\n\n1. Install dependencies:\n\n    ```bash\n    npm install gsap @gsap/react tailwindcss postcss autoprefixer\n    ```\n2. Run the project:\n\n    ```bash\n    npm run dev\n    ```\n\n\n---\n---\n\n## How to Use\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/abdulrahmans0414/gsap.git\n\n2. Navigate to the desired folder:\n\n   ```bash\n   cd gsap/01_basic\n   ```\n3. Open `index.html` in your browser to view the animations.\n\n## Technologies Used\n- HTML: Structure of the web pages.\n\n- CSS: Styling and layout.\n\n- JavaScript: Logic and interactivity.\n\n- GSAP: Animation library for smooth and performant animations.\n\n- ScrollTrigger: GSAP plugin for scroll-based animations.\n- React: JavaScript library for building user interfaces.\n- Tailwind CSS: Utility-first CSS framework for responsive design.\n\n## Contributions\nFeel free to contribute by adding more examples, improving existing code, or suggesting new features. Open an issue or submit a pull request!\n\n## License\nThis project is open-source and available under the MIT License.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulrahmans0414%2Fgsap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdulrahmans0414%2Fgsap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulrahmans0414%2Fgsap/lists"}