Tecnologias Utilizadas

• HTML5,

• CSS3

• JavaScript (ES6+)

• GSAP (GreenSock Animation Platform) para animações avançadas

• ScrollTrigger (com integração ao GSAP para animações baseadas no scroll)

Objetivo do Projeto

O projeto Digital Marbles foi desenvolvido com o intuito de proporcionar uma experiência digital imersiva, destacando a interatividade, fluidez e o design inovador da interface. O foco principal é conduzir o usuário por uma jornada sensorial através de transições suaves e efeitos visuais dinâmicos, elevando o padrão de usabilidade e percepção estética. Voltado para um público que valoriza o design e a tecnologia, o site atua como uma vitrine interativa, ideal para portfólios criativos, experiências conceituais e apresentações visuais envolventes.

Desafios Técnicos

🎬 Transições Suaves e Navegação Imersiva com GSAP

O maior desafio do projeto foi criar uma experiência sensorial com transições suaves entre seções, sem recorrer a frameworks ou bibliotecas pesadas. Isso envolveu:

• Animações de entrada e saída coordenadas entre páginas/seções;

• Manipulação do DOM com JavaScript puro para controle preciso do fluxo de navegação;

• Otimização das animações para garantir desempenho em dispositivos com menor capacidade de processamento.

📜 Scroll Animations com ScrollTrigger

• Utilização estratégica do ScrollTrigger para animar elementos com base na posição de rolagem do usuário;

• Criação de efeitos de revelação de conteúdo, parallax suave e interações visuais sensíveis ao scroll;

• Animações adaptáveis para diferentes tamanhos de tela, mantendo a responsividade sem comprometer a experiência

Destaques Técnicos

• Efeitos de entrada e saída entre seções que intensificam a imersão visual;

• Design responsivo, com layouts otimizados para mobile e desktop;

• Animações baseadas em scroll para apresentação de conteúdo de forma progressiva e envolvente;

• Implementação 100% em JavaScript Vanilla, sem dependência de frameworks;

• Código limpo e modularizado, favorecendo a manutenção e escalabilidade visual do projeto.

Resultados Alcançados

O Digital Marbles entregou uma experiência visual marcante, com ótima recepção por parte de usuários e stakeholders. As animações e transições bem executadas aumentaram o tempo de permanência no site e transmitiram profissionalismo e atenção aos detalhes. O projeto se destaca como um exemplo de como é possível alcançar uma experiência premium usando apenas tecnologias nativas da web e bibliotecas de animação leves como o GSAP.