Thomas-Vance-clone-

Scroll Animations Grid

This project is inspired by the scroll animations grid example from tympanus.net. It showcases a grid of images with scroll-triggered animations using GSAP and Lenis for smooth scrolling.

Features

• Grid Layout: A responsive grid layout using Tailwind CSS.
• Scroll Animations: Smooth scroll animations using GSAP and ScrollTrigger.
• Custom Scrollbars: Styled scrollbars using OverlayScrollbars.

Technologies Used

• HTML: Structure of the webpage.
• CSS: Styling using Tailwind CSS and custom styles.
• JavaScript: Scroll animations and custom scrollbar integration.
• GSAP: Animation library.
• Lenis: Smooth scrolling library.
• OverlayScrollbars: Custom scrollbar library.

Setup

1. Clone the repository:

   git clone https://github.com/kor1998/Thomas-Vance-clone-.git
   cd scroll-animations-grid

2. Install dependencies:

   npm install

3. Run the project: Open index.html in your browser.

File Structure

• index.html: Main HTML file.
• style.css: Custom CSS styles.
• script.js: JavaScript for scroll animations and custom scrollbars.

Usage

• The grid layout is defined in index.html with Tailwind CSS classes.
• Custom styles for the grid and scrollbars are in style.css.
• Scroll animations and custom scrollbar initialization are in script.js.

License

This project is licensed under the MIT License.

Acknowledgements

• Inspired by tympanus.net.
• Thanks to the creators of GSAP, Lenis, and OverlayScrollbars for their amazing libraries.