https://github.com/rifatparadoxical/gsap-practice
This repository contains my learning and experimentation with GSAP (GreenSock Animation Platform). It showcases animations, techniques, and features I explored while mastering GSAP for creative and engaging web development projects from Sheriyans Coding School.
https://github.com/rifatparadoxical/gsap-practice
animated-website animation animation-js animations gsap gsap-animation gsap-library gsap-scrolltrigger gsap-timeline sheriyans sheriyanscodingschool
Last synced: 3 months ago
JSON representation
This repository contains my learning and experimentation with GSAP (GreenSock Animation Platform). It showcases animations, techniques, and features I explored while mastering GSAP for creative and engaging web development projects from Sheriyans Coding School.
- Host: GitHub
- URL: https://github.com/rifatparadoxical/gsap-practice
- Owner: RifatParadoxical
- License: cc0-1.0
- Created: 2025-01-05T07:56:12.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-13T17:41:11.000Z (5 months ago)
- Last Synced: 2025-01-13T18:44:51.377Z (5 months ago)
- Topics: animated-website, animation, animation-js, animations, gsap, gsap-animation, gsap-library, gsap-scrolltrigger, gsap-timeline, sheriyans, sheriyanscodingschool
- Language: HTML
- Homepage: https://rifatparadoxical.github.io/gsap-practice/
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GSAP Practice
This repository contains my learning and experimentation with **GSAP (GreenSock Animation Platform)**. It showcases animations, techniques, and features I explored while mastering GSAP for creative and engaging web development projects from Sheriyans Coding School.
---
## 🌟 Features
- **Core GSAP Concepts**: Covers animations, tweens, and timelines.
- **Advanced Techniques**: Includes easing, ScrollTrigger, and element-specific animations.
- **Custom Animations**: Unique implementations and personalized experiments with GSAP.
- **Reusable Components**: Well-structured code for modular and scalable animations.
---
## 🛠️ Technologies Used
- **HTML5**: For structuring the web pages.
- **CSS3**: For styling and layout adjustments.
- **JavaScript**: Core logic and animation integration.
- **GSAP**: Main animation library used in this project.
---
## 📂 Project Structure
```plaintext
├── index.html # Main file to render the animations
├── style.css # CSS file for styling
├── scripts.js # JavaScript file (GSAP implementations)
├── arrow-right-line.svg # Media files (images, etc.)
├── package-lock.json # package file
└── README.md # Documentation
```
---
## 🚀 How to Use
1. Clone this repository:
```bash
git clone https://github.com/RifatParadoxical/gsap-practice.git
```
2. Open the project directory:
```bash
cd gsap-practice
```
3. Launch the project:
- Open `index.html` in your browser.
- Or use a live server for the best development experience.
---
## 📖 What I Learned
1. How to create smooth animations with **GSAP**.
2. Using **GSAP Timelines** to chain animations.
3. Incorporating **ScrollTrigger** for scroll-based animations.
4. Exploring easing functions for fine-tuned animations.
5. How to optimize animations for performance.
---
## 🌐 Live Demo
Check out the project in action: [GSAP Practice Live Demo](https://rifatparadoxical.github.io/gsap-practice/)
---
## 🤝 Contributions
This project is primarily for personal learning, but feel free to open an issue or suggest improvements if you'd like to contribute.
---
## 📜 License
This project is licensed under the Creative Commons LICENSE.
See the [LICENSE](LICENSE) file for more details.
---
### 📧 Contact
If you have any questions or want to collaborate, feel free to reach out to me:
**Rifat Paradoxical**
- [GitHub](https://github.com/RifatParadoxical)