🔧 Frontend Challenge v24.07.24: Glam Up My Markup: Recreation What I Built

I created an interactive website for the New York Recreational Cricket League that features:

Horizontal Scrolling Sections: Utilized GSAP and ScrollTrigger to create a smooth horizontal scrolling effect.
3D Scene: Integrated a 3D cricket ball model using React Three Fiber to add dynamic visual appeal.
Interactive Design: Implemented a responsive layout to ensure a seamless experience across different devices.
The goal was to combine interactive animations and modern 3D graphics to create a visually engaging experience for users interested in the cricket league.

Demo
Check out the live demo of the project here: Live Demo
Check out the live demo of the project here: Live Demo
Alternatively, view the code on GitHub: GitHub Repository

Design & Planning:

Defined the project requirements and sketched out the layout and interactions.
Chose GSAP for horizontal scrolling animations and React Three Fiber for the 3D scene.

Implementation:

Set up the project with Next.js and Tailwind CSS.
Created horizontal scrolling sections using GSAP and ScrollTrigger.
Added a 3D cricket ball model that rotates and scales based on scroll progress.
Ensured responsive design and smooth performance across different devices.
Challenges & Solutions:

Challenge: Synchronizing the 3D scene with the scroll progress.

Solution: Calculated the ball's position and scale based on scroll position, using a curved path for smooth motion.
Challenge: Ensuring smooth horizontal scrolling with different screen sizes.

Solution: Used flexible sizing and scroll triggers to adapt to various viewport dimensions.
Learnings:

Improved my skills in integrating GSAP with React for animations.
Gained hands-on experience with 3D rendering using React Three Fiber.
Learned how to handle complex animations and interactions in a responsive design.
Next Steps:

Enhance the 3D scene with additional interactive elements.
Optimize performance for even smoother scrolling and animations.
Add more content and features to further engage users.
Team Members

This project was developed by: banerjeeprodipta