https://github.com/tmhsdigital/animation-demo-1
https://github.com/tmhsdigital/animation-demo-1
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tmhsdigital/animation-demo-1
- Owner: TMHSDigital
- License: mit
- Created: 2024-09-13T19:54:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-13T21:00:30.000Z (over 1 year ago)
- Last Synced: 2025-01-06T07:27:55.755Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://tmhsdigital.github.io/animation-demo-1/
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎨 Unique GSAP Animation Demo
[](https://opensource.org/licenses/Apache-2.0)
[](https://github.com/TMHSDigital/animation-demo-1/stargazers)
[](https://github.com/TMHSDigital/animation-demo-1/network)
[](https://github.com/TMHSDigital/animation-demo-1/issues)
[](https://github.com/TMHSDigital/animation-demo-1/commits/main)
[](https://github.com/TMHSDigital/animation-demo-1/graphs/commit-activity)
[](https://github.com/TMHSDigital)
An interactive and visually stunning animation demo showcasing the power of GSAP (GreenSock Animation Platform) combined with SVG animations and audio visualization.
## 🌟 Features
- 🤖 Animated SVG character with eye-tracking
- 🎵 Audio player with real-time frequency visualization
- 🌈 Dynamic theme switching (Default, Dark, Neon)
- 📜 Parallax scrolling effect
- 🎛️ Interactive animation controls (Play/Pause, Reverse, Speed)
- 📱 Responsive design for various screen sizes
## 🚀 Live Demo
Experience the magic: [Unique GSAP Animation Demo](https://tmhsdigital.github.io/animation-demo-1/)
## 🛠️ Technologies Used
- HTML5
- CSS3
- JavaScript (ES6+)
- [GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)
- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
- [ScrollTrigger](https://greensock.com/scrolltrigger/)
## 🏁 Getting Started
### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Basic knowledge of HTML, CSS, and JavaScript
- Familiarity with SVG is a plus
### Installation
1. Clone the repository:
```sh
git clone https://github.com/TMHSDigital/animation-demo-1.git
```
2. Navigate to the project directory:
```sh
cd animation-demo-1
```
3. Open `index.html` in your web browser.
## 🎨 Customization
### Modifying the Character
Edit the `character.svg` file to change the appearance of the animated character. Make sure to maintain the existing IDs for seamless integration with the JavaScript animations.
### Changing Themes
Modify the CSS variables in the `:root` selector of `styles.css` to create new themes or adjust existing ones.
### Adding New Animations
Extend the GSAP timeline in `scripts.js` to add new animations to the character or other elements.
## 📊 Project Stats
- [](https://github.com/TMHSDigital/animation-demo-1)
- [](https://github.com/TMHSDigital/animation-demo-1)
- [](https://github.com/TMHSDigital/animation-demo-1/graphs/contributors)
- [](https://github.com/TMHSDigital/animation-demo-1/graphs/commit-activity)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check [issues page](https://github.com/TMHSDigital/animation-demo-1/issues).
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
Distributed under the MIT License. See `LICENSE` for more information.
## 📞 Contact
TMHSDigital - [@TMHSDigital](https://twitter.com/TMHSDigital) - contact@tmhsdigital.com
Project Link: [https://github.com/TMHSDigital/animation-demo-1](https://github.com/TMHSDigital/animation-demo-1)
## 🙏 Acknowledgements
- [GSAP](https://greensock.com/gsap/)
- [Google Fonts](https://fonts.google.com/)
- [Font Awesome](https://fontawesome.com)
- [Shields.io](https://shields.io)
---
Made with ❤️ by TMHSDigital