https://github.com/tmhsdigital/gsap-tmhs
GSAP info & demos
https://github.com/tmhsdigital/gsap-tmhs
Last synced: 11 months ago
JSON representation
GSAP info & demos
- Host: GitHub
- URL: https://github.com/tmhsdigital/gsap-tmhs
- Owner: TMHSDigital
- License: mit
- Created: 2024-08-17T16:12:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-29T18:56:08.000Z (over 1 year ago)
- Last Synced: 2025-01-06T07:27:56.899Z (about 1 year ago)
- Language: CSS
- Homepage: https://tmhsdigital.github.io/GSAP-TMHS/
- Size: 103 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GSAP-TMHS
Welcome to **GSAP-TMHS**, a project that showcases the powerful capabilities of GSAP (GreenSock Animation Platform) through engaging demos and detailed explanations. This project is designed to help developers learn how to create stunning, interactive animations using GSAP, with a focus on practical, real-world applications.
## Table of Contents
- [About the Project](#about-the-project)
- [Features](#features)
- [Getting Started](#getting-started)
- [File Structure](#file-structure)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Contact Us](#contact-us)
## About the Project
**GSAP-TMHS** is a fully interactive site showcasing the various features and functionalities of GSAP, including basic animations, ScrollTrigger, draggable elements, inertia, and smooth scrolling. The project is structured to be easy to navigate and modify, making it a valuable resource for developers of all skill levels.
## Features
- **Basic GSAP Animations**: Learn the fundamentals of GSAP animations.
- **ScrollTrigger**: Create animations that respond to scroll events.
- **Draggable and Inertia**: Implement natural, physics-based motion in your web projects.
- **Smooth Scrolling**: Enhance user experience with smooth scroll effects.
- **Responsive Design**: Fully responsive, optimized for desktop and mobile devices.
## Getting Started
To get a local copy of this project up and running, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://github.com/TMHSDigital/GSAP-TMHS.git
```
2. **Navigate to the Project Directory**:
```bash
cd GSAP-TMHS
```
3. **Open `index.html` in Your Browser**:
Simply open the `index.html` file in your preferred web browser to explore the demos and features.
## File Structure
```
GSAP-TMHS/
│
├── animations.css # Styles for animations
├── animations.js # JavaScript for GSAP animations
├── cdn-libs.js # CDN links for GSAP and other libraries
├── global.css # Global styling for the site
├── index.html # Main entry point of the site
├── LICENSE # License file
└── README.md # Project documentation
```
## Usage
### Animations
The project includes several examples of GSAP animations:
- **Basic Animation**: Animates a box moving and rotating.
- **ScrollTrigger**: Animates elements based on scroll position.
- **Inertia**: Adds physics-based motion to draggable elements.
- **Smooth Scroll**: Adds smooth scrolling behavior to navigation links.
### Customization
- **Animations**: Modify the `animations.js` file to customize or add new animations.
- **Styles**: Update `animations.css` and `global.css` to change the appearance of elements.
- **Libraries**: Add or update libraries in the `cdn-libs.js` file as needed.
## Contributing
Contributions are welcome! If you have suggestions, ideas, or want to contribute code, feel free to submit a pull request. Please ensure your changes are consistent with the project's coding standards.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License. See the `LICENSE` file for details.
## Contact Us
Want someone to build you an **AWESOME** site? **Contact us today!**
---