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: 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.
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.
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.
This project was developed by: banerjeeprodipta
Top comments (0)