GSAP Animations with TailwindCSS

Welcome to the GSAP Animations project! This repository contains various HTML files showcasing different animations created using GSAP (GreenSock Animation Platform) and styled with TailwindCSS.

Table of Contents

• Introduction
• Features
• Getting Started
• Usage
• File Structure
• Contributing
• License

Introduction

This project demonstrates the power and flexibility of GSAP for creating animations, combined with the utility-first CSS framework, TailwindCSS. Each HTML file in this repository contains unique animations that can be easily viewed by opening the files in any modern web browser that supports JavaScript.

Features

• GSAP Animations: Smooth, high-performance animations using GSAP.
• TailwindCSS Styling: Utility-first CSS framework for rapid UI development.
• Easy to Use: Simply open the HTML files in your browser to see the animations in action.

Getting Started

To get started with this project, follow these simple steps:

1. Clone the repository:

   git clone https://github.com/rocknub/gsap-animations.git

2. Navigate to the project directory:

   cd gsap-animations

Usage

To view the animations, open any of the HTML files in your preferred web browser. For example:

1. Open your file explorer and navigate to the project directory.
2. Double-click on any HTML file (e.g., 1-basicHover.html) to open it in your default web browser.

Alternatively, you can open the HTML files directly from your browser:

1. Open your web browser.
2. Use the File > Open menu option to navigate to the project directory and select an HTML file.

File Structure

The repository is organized as follows:

• HTML Files:
  • 1-basicHover.html
  • 2-movingBox.html
  • 3-loadingBar.html
  • 4-rotatingElement.html
  • 5-rotationElementwithRainbow.html
  • animatedLadingPage.html
  • basicControllingTimeline.html
  • basicTimeline.html
  • boucingBall.html
  • cardShadowRGB.html
  • fromTo.html
  • labelsPositioningTweens.html
  • loopingAnimation.html
  • sequenceElements.html
  • sideMenuSlidIn.html
  • staggeredListEntrance.html
  • tweening.html

Each HTML file contains a unique animation.

Contributing

Contributions are welcome! If you have any ideas for new animations or improvements, feel free to fork the repository and submit a pull request. Please ensure that your contributions adhere to the following guidelines:

• Follow the existing code style.
• Test your changes thoroughly.
• Provide clear and concise commit messages.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

---

Thank you for checking out the GSAP Animations project! Enjoy exploring the animations and feel free to contribute your own.