Fame Estate Scroll Animation

A modern, premium scroll animation built for a luxury real estate concept. This project uses smooth scrolling and complex scroll-linked animations to deliver an effortless digital experience, drawing inspiration from timeless spaces.

🚀 Technologies Used

• HTML5 & CSS3 for structural layout and styling.
• JavaScript (ES6+) for animation logic.
• Vite as the frontend build tool for a fast and optimized development experience.
• GSAP (GreenSock Animation Platform) & ScrollTrigger for powerful, performant animations.
• Lenis for a smooth, buttery scrolling experience.

✨ Features

• Smooth Scrolling: Integrated Lenis to ensure fluid scrolling across all modern browsers.
• Scroll-Linked Animations: Leverages GSAP ScrollTrigger to pin sections, scale images, animate clip-paths, and reveal content dynamically as the user scrolls.
• Modern Luxury Aesthetic: Clean typography (using DM Sans) and a minimalist color palette, delivering a high-end feel.
• Responsive Design: Optimized for different screen sizes ensuring consistent experiences on both desktop and mobile.

📁 Project Structure

├── public/
│   ├── assets/       # Contains images (hero backgrounds, content images)
│   └── fonts/        # Contains local font files (DM Sans)
├── index.html        # Main HTML structure
├── script.js         # JavaScript file containing GSAP and Lenis logic
├── styles.css        # Vanilla CSS styles and variables
├── package.json      # Project metadata and dependencies
└── vite.config.js    # (Optional) Vite configuration

🛠️ Installation & Setup

1. Clone the repository:

   git clone https://github.com/Thakuma07/FameEstate-ScrollAnimation.git
   cd FameEstate-ScrollAnimation
   

2. Install Dependencies: Make sure you have Node.js installed, then run:

   npm install
   

3. Run the Development Server:

   npm run dev
   

   Open the provided local URL (typically http://localhost:5173) in your browser to view the project.

4. Build for Production:

   npm run build
   

   This will generate a dist folder with optimized and minified assets.

🙌 Inspiration

This project took inspiration from the website Fame Estate. Website link: https://fame-estate.com/