Eu criei um site interativo para a Liga Recreativa de Críquete de Nova York que apresenta:

Seções de rolagem horizontal: Utilizou GSAP e ScrollTrigger para criar um efeito de rolagem horizontal suave.
Cena 3D: integrou um modelo de bola de críquete 3D usando React Three Fiber para adicionar apelo visual dinâmico.
Design interativo: Implementou um layout responsivo para garantir uma experiência perfeita em diferentes dispositivos.
O objetivo era combinar animações interativas e gráficos 3D modernos para criar uma experiência visualmente envolvente para usuários interessados ​​na liga de críquete.

Demonstração
Confira a demonstração ao vivo do projeto aqui: Live Demo
Confira a demonstração ao vivo do projeto aqui: Live Demo
Como alternativa, visualize o código no GitHub: Repositório GitHub

Design e planejamento:

Definiu os requisitos do projeto e esboçou o layout e as interações.
Escolha GSAP para animações de rolagem horizontal e React Three Fiber para a cena 3D.

Implementação:

Configure o projeto com Next.js e Tailwind CSS.
Criou seções de rolagem horizontal usando GSAP e ScrollTrigger.
Adicionado um modelo de bola de críquete 3D que gira e escala com base no progresso da rolagem.
Design responsivo garantido e desempenho suave em diferentes dispositivos.
Desafios e soluções:

Desafio: Sincronizar a cena 3D com o progresso da rolagem.

Solução: calculou a posição e a escala da bola com base na posição de rolagem, usando um caminho curvo para movimento suave.
Desafio: Garantir uma rolagem horizontal suave com diferentes tamanhos de tela.

Solução: Usou dimensionamento flexível e gatilhos de rolagem para se adaptar a várias dimensões da janela de visualização.
Aprendizados:

Melhorei minhas habilidades na integração de GSAP com React para animações.
Adquiriu experiência prática com renderização 3D usando React Three Fiber.
Aprendeu como lidar com animações e interações complexas em um design responsivo.
Próximos passos:

Aprimore a cena 3D com elementos interativos adicionais.
Otimize o desempenho para rolagem e animações ainda mais suaves.
Adicione mais conteúdo e recursos para envolver ainda mais os usuários.
Membros do time

Este projeto foi desenvolvido por: banerjeeprodipta