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
  • Table of Contents
  • 01_basic
  • 02_timeline
  • 03_nav
  • 04_scrollTrigger
  • 05_pin
  • 06_svgAnimation
  • 07_customCursor
  • 08_customImgCursor
  • 09_navBarAnimation
  • 10_textAnimation
  • 11_timelineAnimation
  • 12_practiceOnEcommerce
  • 13_gsapInReact
  • How to Use
  • Technologies Used
  • Contributions
  • 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:

   npm install gsap @gsap/react tailwindcss postcss autoprefixer

2. Run the project:

   npm run dev

---

---

How to Use

1. Clone the repository:

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

2. Navigate to the desired folder:

   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.