Smooth Scrolling Animated Website

This project showcases a smooth-scrolling animated website built using GSAP, ScrollTrigger, and Lenis. The site features scale-down images with horizontal movement and seamless transitions.

🚀 Demo

Check out the live version of the project deployed on Vercel: [Vercel Deployment Link]

📸 Preview

🔧 Technologies Used

• HTML: Basic structure and layout
• Tailwind CSS: For styling and responsive design
• JavaScript: Core functionality
• GSAP: For animations
• ScrollTrigger: To trigger animations based on scroll position
• Lenis: For smooth scrolling behavior

✨ Features

• Image Scaling: Images dynamically scale down as the user scrolls.
• Horizontal Animation: Elements move horizontally while scrolling.
• Smooth Scrolling: Powered by Lenis to provide a polished and smooth user experience.

💡 Key Takeaways

• GSAP combined with ScrollTrigger makes complex animations easier to manage and control.
• Lenis adds a smooth, fluid scrolling experience.
• Using these tools helps create a modern, responsive, and interactive web experience.

🛠️ Installation

1. Clone the repository:

   git clone https://github.com/Visnusah/smooth_scroll_animation.git

2. Navigate to the project directory:

   cd smooth_scroll_animation

3. Open the project in your browser by running a local server or directly opening index.html.

📸 Media

• Add a short video or GIF showing the animations and smooth scrolling in action.
• Or include a high-quality screenshot of the website displaying both the scaled-down image and horizontal animation.

🤝 Contributing

Feel free to submit issues or pull requests to contribute to this project! 💯

📄 License

This project is licensed under the MIT License.