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.
- 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.
- 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.
├── 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
- Clone this repository:
git clone https://github.com/RifatParadoxical/gsap-practice.git
- Open the project directory:
cd gsap-practice - Launch the project:
- Open
index.htmlin your browser. - Or use a live server for the best development experience.
- Open
- How to create smooth animations with GSAP.
- Using GSAP Timelines to chain animations.
- Incorporating ScrollTrigger for scroll-based animations.
- Exploring easing functions for fine-tuned animations.
- How to optimize animations for performance.
Check out the project in action: GSAP Practice Live Demo
This project is primarily for personal learning, but feel free to open an issue or suggest improvements if you'd like to contribute.
This project is licensed under the Creative Commons LICENSE.
See the LICENSE file for more details.
If you have any questions or want to collaborate, feel free to reach out to me:
Rifat Paradoxical