Construindo uma galeria de cubos 3D baseada em rolagem em Webflow com GSAP | Codrops

Neste tutorial, construiremos uma galeria de imagens controlada por rolagem no Webflow, onde as imagens de fundo se fundem umas com as outras, os rótulos de texto deslizam para dentro e para fora com animações de texto dividido escalonadas e um cubo 3D gira pelas mesmas imagens enquanto se move ao longo de um caminho hexagonal.

O resultado final combina conteúdo baseado em CMS, interações baseadas em GSAP do Webflow, estilo personalizado CSS, transformações 3D, e alguns pequenos refinamentos de layout para criar uma interação que parece muito mais complexa do que a estrutura por trás dela realmente é.

E o melhor é que toda a configuração é reutilizável: uma vez montada a estrutura do CMS, você pode substituir as imagens e o texto pelo seu próprio conteúdo e manter a lógica da animação intacta.

1. Começando pela estrutura do CMS

O ponto de partida deste projeto é uma tela absolutamente em branco.

A única coisa preparada com antecedência é uma coleção CMS chamada  Imagens . Esta coleção é um pouco mais complexa do que uma coleção normal de galeria de imagens, porque contém vários campos que podem não fazer sentido imediato à primeira vista.

Mas isso faz parte da diversão.

Além dos campos padrão  Name  e  Slug  , a coleção inclui os seguintes campos personalizados.

Primeiro, temos o mais previsível: um campo de imagem chamado  Image . Graças à minha incrível imaginação habitual quando se trata de nomear coisas, este campo hospedará a imagem exibida tanto no fundo quanto no cubo.

Em seguida, temos um campo de texto simples chamado  Text . Este é o rótulo curto associado a cada imagem e será animado com um efeito de texto dividido escalonado durante a rolagem.

Uma recomendação rápida: se você deseja que o texto fique em uma única linha e permaneça grande, em negrito e legível, mantenha-o curto. Uma ou duas palavras geralmente funcionam melhor.

Em seguida, temos um campo numérico chamado  Order . Este é um número inteiro que define a ordem em que as imagens aparecem na galeria.

À primeira vista, isso pode parecer um simples auxiliar de classificação. Mas é mais importante do que parece, porque também o utilizaremos para gerar valores de atributos exclusivos para cada item do CMS.

Neste projeto, o valor máximo é definido como 6, porque estamos construindo um cubo giratório e um cubo tem exatamente seis faces.

Depois vem a parte misteriosa da coleção CMS.

Temos oito campos numéricos adicionais:

• Origin Left
• Origin Top
• Mover X
• Mover Y
• Mover Z
• Girar X
• Girar Y
• Girar Z

Esses campos estão diretamente conectados às propriedades de transformação que podemos encontrar no Painel de estilos do Webflow.

Se abrirmos as configurações  Transformações 2D e 3D  , podemos encontrar as propriedades de origem da transformação, incluindo  Left  e  Top . Isso já nos dá uma pista: os campos  Origin Left  e  Origin Top  serão usados ​​para controlar a origem da transformação de cada face do cubo.

Da mesma forma, os campos  Mover X ,  Move Y e  Move Z  correspondem às transformações de movimentação, enquanto  Girar X ,  Girar Y e  Girar Z  correspondem às transformações de rotação.

Portanto, antes mesmo de escrever qualquer CSS, já podemos entender a ideia: cada item do CMS se tornará uma face do cubo, e os campos do CMS dirão a essa face para onde mover, como girar e onde deve estar sua origem de transformação.

Um último detalhe importante: os campos de rotação são inteiros, enquanto os campos de movimentação são decimais. Isso é importante porque alguns valores de posicionamento do cubo exigem números fracionários.

2. Construindo a seção de rolagem

Vamos começar pelo que conhecemos muito bem: uma seção.

Crie uma seção e atribua a classe section e defina sua altura para 500vh.

Este valor é completamente arbitrário, mas controla a velocidade percebida da interação de rolagem. Quanto mais alta a seção, mais lenta parece a animação. Para este projeto, 500vh é um ponto de partida razoável.

Dentro da seção, adicione um contêiner e atribua a ele a classe main-container.

Este contêiner é um dos elementos mais importantes de toda a construção. Você pode pensar nisso como a janela através da qual vemos o conteúdo colocado dentro da seção.

Por esse motivo, é necessário preencher a viewport:

###PRE_a5b9a6a9e5ca14bf3bd9af45b98e9824###

Então, como esse contêiner é nossa janela visual, não queremos que ele role para fora. Defina sua posição como  Sticky  e seu deslocamento superior como 0.

Isso mantém o contêiner ancorado na parte superior da janela de visualização enquanto o usuário rola pela seção mais alta.

Dentro do contêiner principal, adicione um bloco div com a classe section_content-wrapper.

Defina a largura e a altura como 100%, para preencher o espaço disponível dentro do contêiner.

Este wrapper conterá duas listas CMS:

1. uma para imagens de fundo em tela cheia e texto animado;
2. um para o cubo 3D.

Vamos começar com a galeria de fundo.

3. Criando a galeria de fundo em tela cheia

Dentro de section_content-wrapper, adicione uma lista de coleção e conecte-a à  Pictures  Coleção CMS.

Dê ao Collection List Wrapper a classe pictures_list-wrapper. Defina a largura e a altura como 100%.

Em seguida, classifique a coleção pelo campo  Order  , do maior para o menor.

Isso é importante porque os itens ficarão absolutamente posicionados e empilhados uns sobre os outros. A classificação do maior para o menor garante que o item com Order = 1 apareça na parte superior no início da animação.

Em seguida, atribua à própria Lista de Coleções a classe pictures_list. Novamente, defina a largura e a altura como 100%.

Em seguida, selecione o item de coleção e atribua a classe pictures_list-item.

Como todas as imagens de fundo precisam ficar umas sobre as outras, defina a posição do item como  Absoluto  e escolha a opção  Completo  .

Neste ponto, cada item da coleção está livre para se expandir dentro do ancestral mais próximo com uma posição não estática. Nesse caso, esse ancestral é o fixo main-container.

Dentro de cada item da coleção, adicione uma imagem e dê a ela a classe pictures_image

Conjunto:

###PRE_4ca8c11b4113567ba17d59a8ac10bbb6###

Em seguida, vincule a imagem ao campo  Imagem  da coleção CMS.

Uma dica profissional rápida: neste tutorial, mantemos a configuração o mais simples possível. Mas em um projeto real, seria melhor adicionar outro campo CMS para o texto alternativo da imagem e vinculá-lo ao elemento de imagem.

4. Adicionando a sobreposição e o texto centralizado

Logo após a imagem, ainda dentro do item da coleção, adicione um bloco div com a classe pictures_overlay.

Esta sobreposição ficará no topo da imagem e adicionará um gradiente sutil para melhorar a legibilidade e a profundidade visual.

Defina-o como  Absoluto , escolha a opção  Completo  e adicione um fundo gradiente linear:

###PRE_15f61be27951921fbd6048a99f9342ed###

Em seguida, adicione um elemento de texto após a sobreposição e atribua a ele a classe pictures_text.

Defina o elemento de texto como  Absoluto .

À primeira vista, pode parecer que nada está acontecendo. Para centralizá-lo corretamente, volte para o item de coleção e altere sua exibição de  Block  para  Flex . Em seguida, alinhe o conteúdo ao centro nos eixos horizontal e vertical.

Agora o texto está perfeitamente centralizado dentro da viewport.

Vincule o elemento de texto ao campo  Text  da coleção CMS.

Como o contêiner principal não tem largura máxima, usar unidades de janela de visualização para o tamanho do texto funciona bem aqui. Neste projeto, podemos definir o tamanho da fonte para 12vw. Em seguida, defina a altura da linha como 1.

Por fim, coloque o texto em maiúscula para uma aparência visual mais forte.

A fonte usada neste projeto é  League Gothic , disponível no Google Fonts.

Neste ponto, poderíamos continuar construindo a estrutura do cubo, mas isso tornaria a configuração muito pesada para ser digerida de uma só vez.

Então vamos pausar a estrutura aqui e construir a primeira parte da animação de rolagem.

5. Planejando a animação de transição de fundo

Antes de abrir o Painel de Interações e adicionar ações às cegas, é útil parar e pensar no que queremos alcançar.

Para cada transição, queremos que três coisas aconteçam:

1. a imagem de fundo atual desaparece, revelando a próxima abaixo;
2. o texto atual desliza para baixo com uma animação escalonada;
3. o próximo texto desliza de baixo para cima com outra animação escalonada.

Isso parece complexo, mas depois de decomposto, cada transição é apenas um grupo de três ações.

E esse grupo se repete para cada transição:

• imagem 1 para imagem 2;
• imagem 2 a imagem 3;
• imagem 3 a imagem 4;
• e assim por diante.

Como toda a animação é controlada rolando pela seção, a própria seção é o gatilho natural.

Selecione a seção, vá para o Painel de configurações do elemento e adicione este atributo personalizado: data-animate="section"

Isso nos permite direcionar a seção por atributo em vez de classe, mantendo a animação mais independente das decisões de estilo.

6. Configurando a segmentação baseada em atributos

Agora precisamos encontrar uma maneira de direcionar cada item do CMS de forma independente. Selecione o item de coleção de fundo e adicione este atributo: data-background-image

Em vez de definir um valor estático, vincule o valor desse atributo ao campo  Order  .

Isso significa que cada item da coleção compartilhará o mesmo nome de atributo, mas cada um terá um valor único:

###PRE_e00338c5ff0c845fa286443966e3d8d6###

Usaremos isso para esmaecer uma imagem específica por vez. Em seguida, selecione o elemento de texto e adicione outro atributo: data-image-text

Novamente, vincule seu valor ao campo  Order  .

Agora cada elemento de texto também pode ser direcionado de forma independente.

7. Criando a interação de rolagem

Abra o Painel de Interações e crie uma nova interação de rolagem chamada Cube Rotation & Background Image.

Nas configurações do acionador, mude o alvo de  Classe  para  Atributo  e use: data-animate="section"

Como a animação deve ser controlada pelo progresso da rolagem, podemos manter o comportamento padrão do controle de rolagem. Um valor de suavização em torno de 0.8 funciona bem para esse tipo de interação.

Para os limites, queremos que a animação comece quando o topo da seção atingir o topo da janela de visualização: Start: Top / Top

E queremos que termine quando a parte inferior da seção atingir a parte inferior da janela de visualização: End: Bottom / Bottom

O intervalo de rolagem agora está pronto.

8. Construindo a primeira ação de saída de texto

Vamos construir a primeira ação: o texto da primeira imagem deslizando para fora.

Adicione uma ação animada e chame-a: (TEXT) 1 Out

Nas configurações de destino, mude de Classe para Atributo e destino: data-image-text="1"

Defina a duração para 0,4s.

Deixe o valor inicial em 0s e mantenha a atenuação linear. Como esta animação é orientada pela posição de rolagem, queremos que as ações sigam naturalmente o fluxo de rolagem.

Nas propriedades animadas, mantenha apenas  Mover Y .

Esta é uma  Para  animação, porque o texto está se movendo de sua posição atual para uma nova posição.

Defina Mover Y para 100%.

Neste ponto, o texto se move, mas não está mascarado e ainda não está escalonado.

Para corrigir isso, ative  Split Text , divida e mascare por palavra e defina o tipo de escalonamento como  Offset Time .

Em seguida, defina o intervalo de escalonamento para 0,3s.

Agora as palavras são animadas uma após a outra de maneira escalonada.

9. Compreendendo o tempo em animações orientadas por rolagem

Antes de criar a próxima ação, há um conceito importante a esclarecer.

• Em uma animação de linha do tempo normal, duração significa tempo real.
• Em uma animação guiada por rolagem , a duração se comporta de maneira diferente.

A animação é controlada pelo progresso da rolagem, portanto, um valor de duração representa uma parte de todo o intervalo de rolagem. O GSAP pega todas as durações definidas nas ações e distribui a distância de rolagem disponível entre elas.

É por isso que, se a animação contiver atualmente apenas uma ação, essa ação se estenderá por todo o intervalo de rolagem.

Depois que adicionamos mais ações, o intervalo de rolagem é distribuído por toda a linha do tempo.

É também por isso que a relação entre duração, valores iniciais e intervalos de escalonamento se torna tão importante ao construir interações de rolagem complexas.

10. Adicionando a próxima ação de texto

Agora podemos criar a ação de entrada de texto para a segunda imagem.

Duplique (TEXT) 1 Out e renomeie-o para (TEXT) 2 In.

Atualize o destino do atributo para: data-image-text="2"

Defina o valor inicial para 0,6s.

Isso cria um pequeno atraso entre a saída do primeiro texto e a entrada do segundo texto.

Desta vez, o texto deve ser animado de baixo para sua posição atual, então altere o tipo de animação de  To  to  From e mantenha Move Y definido como 100%.

Se visualizarmos a animação agora, ainda não veremos o segundo texto.

E isso não é um erro.

O segundo texto está dentro do segundo item da coleção, e o segundo item da coleção está abaixo do primeiro. Como todos os itens estão absolutamente posicionados e empilhados uns sobre os outros, o segundo texto não ficará visível até que a primeira imagem desapareça.

Então, vamos concluir a transição.

11. Desaparecendo a primeira imagem

Adicione uma nova ação de animação e chame-a de (IMAGE) 1 → 2.

Direcione o primeiro item de plano de fundo usando: data-background-image="1"

Defina a duração para 0,5s.

Defina o valor inicial para 0,4s.

A ideia é começar a esmaecer a imagem enquanto o primeiro texto ainda está deslizando para fora e terminar o esmaecimento antes que o segundo texto tenha entrado totalmente.

Nas propriedades animadas, mantenha apenas  Opacidade .

Esta é uma animação  To  e o valor de opacidade final é 0%.

Agora a primeira transição está concluída.

O primeiro texto desliza, a primeira imagem desaparece e o segundo texto desliza.

12. Repetindo o padrão de transição

O que construímos é a base de toda a primeira parte da animação.

A partir daqui, duplicamos as mesmas três ações para cada transição seguinte e atualizamos apenas duas coisas:

1. os valores dos atributos;
2. os valores iniciais.

Para a transição da imagem 2 para a imagem 3, duplique (TEXT) 1 Out e renomeie-o para (TEXT) 2 Out.

Atualize o valor do atributo de 1 para 2 e defina seu valor inicial como 1,5s.

Isso cria um pequeno intervalo entre o final da primeira transição e o início da segunda.

Em seguida, duplique (TEXT) 2 In e renomeie-o para (TEXT) 3 In.

Atualize o valor do atributo para 3.

Como o valor inicial original era 0.6s e estamos compensando esse grupo em 1.5s, o novo valor inicial se torna 2,1s.

Por fim, duplique (IMAGE) 1 → 2, renomeie-o para (IMAGE) 2 → 3.

Atualize o valor do atributo para 2 e defina o valor inicial como 1,9s.

Isso vem de: 0.4s + 1.5s

Repita a mesma lógica para as transições restantes.

13. Observando a linha do tempo da animação

Depois que todos os grupos de transição forem criados, é útil visualizar a linha do tempo fora da linha do tempo nativa do Webflow.

Por exemplo, a primeira transição termina em 1.3s, enquanto a segunda transição começa em 1.5s.

Isso significa que há uma 0.2s entre as duas transições.

Essa pequena lacuna cria um efeito de ancoragem sutil no final de cada transição. Pessoalmente, gosto disso porque dá à animação um ritmo um pouco mais intencional.

Mas se preferir um movimento completamente fluido, você pode remover a lacuna reduzindo os valores iniciais do segundo grupo em 0.2s.

Em seguida, para o terceiro grupo, você reduz os valores iniciais em 0.4s e assim por diante.

O importante não é o valor exato, mas entender a relação entre as ações.

Depois de entender a linha do tempo, você pode dobrá-la conforme sua vontade.

Agora que a imagem de fundo e as transições de texto estão funcionando, podemos passar para a segunda parte da construção: o cubo 3D.

14. Construindo a lista de coleção de cubos

Dentro de section_content-wrapper, adicione uma segunda lista de coleção e conecte-a à mesma  Imagens  Coleção CMS.

Dê ao Collection List Wrapper a classe pictures_cube-list-wrapper.

Defina sua posição como  Absoluto  e escolha a opção  Completo  .

Em seguida, defina sua exibição como  Flex  e alinhe o conteúdo ao centro em ambos os eixos.

Isso coloca a estrutura do cubo bem no centro da janela de visualização, o que facilita o gerenciamento.

Como o cubo deve ficar visualmente acima do conteúdo de fundo, mas ainda podemos querer que o usuário interaja com o texto abaixo, defina eventos de ponteiro neste wrapper como:

###PRE_9227e3c30940145b0195791a12f97c59###

Agora precisamos de uma configuração 3D muito importante: perspectiva .

Abra as configurações  Transformações 2D e 3D  e defina a distância de perspectiva dos filhos para algo em torno de 1000px.

Você pode ajustar esse valor com base na força da perspectiva desejada.

Como o cubo permanece centralizado dentro do mesmo invólucro que fornece a perspectiva, o cubo não aparecerá distorcido quando uma de suas faces estiver paralela à tela.

Em seguida, adicione este atributo ao wrapper data-animate="cube-list-wrapper".

Usaremos esse wrapper mais tarde para mover o cubo pela janela de visualização.

15. Preparando o projeto do cubo

Selecione a própria Lista de Coleções e atribua a classe pictures_cube-list.

Este elemento atua como modelo para as faces do cubo.

Primeiro, dê-lhe uma forma quadrada definindo sua proporção para Square .

Em seguida, defina sua posição como  Relative , porque os itens da coleção dentro dela serão posicionados de forma absoluta.

Agora precisamos de duas propriedades CSS personalizadas. O primeiro é:

###PRE_9f88fbeb244e5f8f22f71534f7f4579e###

Por padrão, os navegadores tendem a nivelar os elementos filhos transformados no plano de seus pais. Como estamos construindo uma estrutura 3D real feita de múltiplas faces posicionadas no espaço 3D, precisamos que o pai preserve a posição 3D de seus filhos. preserve-3d informa ao navegador para não nivelar esses filhos, permitindo que cada face do cubo mantenha sua própria posição e rotação no espaço 3D.

O segundo é:

###PRE_aa307bf047a8088e4d11d738c7528709###

A teoria por trás desta propriedade vai além do escopo deste tutorial, mas a razão prática pela qual a usamos aqui é muito específica: ela nos permite usar valores baseados em porcentagem ao mover faces ao longo do eixo Z.

Normalmente, os valores percentuais estão vinculados a dimensões como largura e altura, não a profundidade. Com esta configuração, podemos expressar algo como: “mova a face deste cubo em 50% do lado do cubo ao longo do eixo Z”.

Finalmente, defina a largura da lista de cubos para:

###PRE_3c2404ec897ec91c18bd2d7fd8006379###

Por que use min() com ###CODE_7ac7189bbbb bac663de20e83c270bf17### e vh?

Porque queremos que o cubo permaneça responsivo em diferentes tamanhos de janela de visualização e proporções de aspecto.

Em telas amplas, a altura da janela de visualização geralmente é a dimensão limite, portanto, o cubo é dimensionado com base em 30vh. Em telas verticais estreitas, a largura da janela de visualização se torna a dimensão limitante, de modo que o cubo é dimensionado com base em 30vw.

O valor 30 pode ser ajustado, mas dá um bom equilíbrio neste projeto.

Em seguida, adicione este atributo à lista de cubos data-animate="cube-list".

Usaremos este elemento para girar o cubo.

16. Criando as faces do cubo

Selecione o item da coleção dentro da lista de cubos e atribua a classe pictures_cube-item.

Defina-o como  Absoluto  e escolha a opção  Completo  . Em seguida, substitua os eventos do ponteiro de volta para:

###PRE_b6673669ba6b77dfc892e59c054543dc###

Por quê?

Como o próprio wrapper tem eventos de ponteiro desabilitados, mas ainda podemos querer que as faces individuais do cubo sejam clicáveis. Por exemplo, cada item pode ter um link para uma página de projeto, postagem de blog ou estudo de caso.

Dentro do item da coleção, adicione um bloco div com a classe pictures_cube-image-wrapper.

Defina largura e altura como 100%. Em seguida, adicione uma imagem dentro dela, vincule-a ao campo CMS  Image  e atribua a classe pictures_cube-image.

Conjunto:

###PRE_4ca8c11b4113567ba17d59a8ac10bbb6###

Opcionalmente, adicione um pequeno preenchimento ao wrapper da imagem, por exemplo:

###PRE_a6a3bf80965d6591419f7e965b9df9a3###

Isso cria um pequeno espaço entre as faces adjacentes do cubo. Neste ponto, todas as imagens ainda estão empilhadas umas sobre as outras.

O que é perfeitamente normal.

Ainda não lhes dissemos como se tornar um cubo.

17. Transformando itens CMS em faces de cubo com CSS

Para transformar a pilha plana em um cubo, usaremos CSS e os valores de transformação armazenados no CMS.

Cada item do CMS já contém os valores que precisamos:

• transform origin left;
• transformar origem no topo;
• mova X, Y e Z;
• gire X, Y e Z.

A geometria exata por trás desses valores não é o foco principal deste tutorial. Definitivamente poderíamos gastar um tutorial inteiro construindo um cubo do zero com blocos div e explicando cada etapa de transformação em detalhes.

Mas aqui, a parte importante é o sistema: o CMS armazena os valores de transformação e o CSS lê esses valores para posicionar cada item da coleção como uma face diferente do cubo.

Dentro do wrapper da imagem do cubo, adicione um elemento Embed e coloque o CSS direcionado ao item da coleção atual.

Conceitualmente, o código é assim:

###PRE_21d68b371bf51079e720d96be3678079###

No Webflow, os valores agrupados aqui como {{...}} são vinculados aos campos CMS correspondentes.

Este CSS é gerado uma vez para cada item do CMS e cada instância recebe valores diferentes do CMS.

O código tem como alvo o item da coleção de cubos e usa a pseudoclasse nth-child() com o valor CMS  Order  , para que cada snippet afete apenas o item correto.

Estamos editando duas coisas principais:

1. transform-origin, que controla o ponto de articulação da face;
2. transform, que move e gira a face para sua posição 3D correta.

Se preferir manter a mesma abordagem baseada em atributos usada na animação, você pode substituir o seletor de classe por um seletor de atributos. A parte importante é que cada item receba os valores de transformação corretos.

Salve e feche o elemento Embed e, em seguida, atribua a ele uma classe como pictures_cube-css.

Agora a pilha plana se torna um cubo.

18. Corrigindo a posição do cubo e a ordem das imagens

Neste ponto, duas coisas podem parecer erradas.

Primeiro, o cubo fica bem no centro da janela de visualização, diretamente em cima do texto. Não é exatamente a melhor escolha de design.

Segundo, a imagem visível no cubo não corresponde à imagem atualmente visível no plano de fundo.

Vamos consertar ambos.

Para afastar o cubo do texto, selecione o wrapper da lista de cubos e aplique uma transformação de movimento no eixo X:

###PRE_64e2a273b43d25f61b95a8af429acdce###

Este valor funciona bem nesta composição e também o usaremos como referência ao animar o cubo ao redor da janela de visualização.

Então, para corrigir a ordem das imagens, atualize a classificação desta segunda Lista de Coleções.

Desta vez, classifique os itens por  Ordem  do menor para o maior.

Agora a face inicial do cubo corresponde à imagem de fundo.

O cubo agora está pronto para brilhar.

19. Planejando a animação do cubo

Antes de adicionar mais ações, vamos pensar no comportamento que queremos.

Durante cada transição de fundo, o cubo deve fazer duas coisas:

1. girar para revelar a face correspondente à próxima imagem de fundo;
2. mova-se ao longo dos lados de um hexágono imaginário centralizado na janela de visualização.

Portanto, para cada transição, precisamos de duas ações adicionais:

• uma ação para girar o cubo;
• uma ação para mover o wrapper do cubo.

A maneira mais fácil de girar o cubo é girar a própria lista de cubos, porque ela contém todas as faces.

É por isso que adicionamos data-animate="cube-list".

E a maneira mais fácil de mover o cubo é mover o wrapper da lista de cubos, porque ele tem o mesmo tamanho da janela de visualização. Isso nos permite usar valores percentuais para movimento responsivo nos eixos X e Y.

É por isso que adicionamos data-animate="cube-list-wrapper".

20. Adicionando a primeira rotação do cubo

Abra a mesma interação de rolagem que criamos anteriormente e adicione uma nova ação de animação.

Chame-o de (CUBE) 1 → 2.

Alvo data-animate="cube-list".

Esta ação deve durar tanto quanto toda a primeira transição.

Da nossa linha do tempo, a primeira transição dura 1,3s.

Portanto, defina a duração como 1.3s e o valor inicial como 0s.

Nas propriedades animadas, remova tudo e adicione uma propriedade Rotate.

Para a primeira transição, o cubo precisa girar ao longo do eixo Y para revelar a segunda face.

Use uma  Para  animação e defina Rotate Y: 90deg.

Agora o cubo gira durante o mesmo intervalo de rolagem da primeira transição de fundo.

21. Movendo o cubo ao longo do hexágono

Em seguida, adicione outra Animate Action e chame-a de (CUBE) Move 1 → 2.

Alvo data-animate="cube-list-wrapper".

Defina a duração para 1,3s.

Defina o valor inicial como 0s.

Manter apenas  Mover X  e  Mover Y  nas propriedades animadas.

Esta também é uma  To  animação.

Para o primeiro movimento, podemos usar:

###PRE_80e6c3a37c7b8f8e9ab77b1a4ca2a191###

Por que -17.5% no eixo X?

Porque inicialmente movemos o wrapper para a esquerda em -35%. Trazê-lo de volta pela metade desse valor cria um belo movimento diagonal em direção ao próximo vértice imaginário do hexágono.

Agora, se visualizarmos a interação, o cubo gira enquanto se move para a próxima posição, o fundo desaparece, o texto atual desliza para fora e o próximo texto desliza para dentro.

É aqui que toda a composição começa a parecer viva.

22. Concluindo a animação do cubo

A partir daqui, o resto segue a mesma lógica.

Para cada transição em segundo plano, adicione:

1. uma ação de rotação de cubo direcionada a data-animate="cube-list";
2. uma ação de movimento de cubo visando data-animate="cube-list-wrapper".

Mantenha as ações agrupadas e codificadas por cores por transição, para que a linha do tempo permaneça legível.

Por exemplo, na segunda transição, a rotação do cubo vai de Rotate Y: 90deg para Rotate Y: 180deg.

E o movimento do cubo vai de Move X: -17.5% para Move X: 17.5% enquanto a posição Y permanece a mesma.

Em outra transição, como da imagem 3 para a imagem 4, o cubo pode girar ao longo do eixo X, por exemplo: Rotate X: -90deg

Os valores exatos dependem de como as faces do cubo estão organizadas, mas o princípio permanece o mesmo: o cubo gira para revelar a face correspondente à imagem de fundo, enquanto o invólucro se move ao redor do hexágono.

Depois que todas as ações estiverem implementadas, role de volta ao topo, entre no modo de visualização e teste a interação completa.

O texto desliza para fora. A imagem desaparece. O cubo muda e gira. O próximo texto aparece.

Agora tudo está conectado.

23. Corrigindo estouro horizontal

Há um pequeno problema que podemos notar, especialmente ao rolar de volta para cima: estouro horizontal.

Isso acontece porque o wrapper da lista de cubos tem o mesmo tamanho da janela de visualização e se move pela janela de visualização durante a animação.

A correção é muito simples.

Selecione o contêiner principal e defina o overflow para:

###PRE_46ae32c162953a392f985e2821baa211###

24. Evitando o salto de rolagem do macOS

Há mais um pequeno refinamento que torna a experiência ao vivo mais limpa, especialmente no macOS.

Se publicarmos o projeto e rolarmos até o final, poderemos ver o comportamento padrão de rolagem elástica: aquele espaço em branco saltitante que aparece quando tentamos continuar rolando além do final da página.

Podemos desativá-lo com um pequeno snippet CSS global:

###PRE_51b217345fe5e0e38497e52a86552be9###

Adicione um elemento Embed próximo ao topo da página, cole o snippet e atribua a ele uma classe como global-styles.

Em seguida, defina sua posição como  None  e mova-o para o topo da estrutura da página, para que ele carregue antes do restante do conteúdo.

Publique o projeto novamente, atualize o link ativo e o salto de rolagem desaparecerá.

25. Uma observação rápida sobre capacidade de resposta

Toda a seção foi construída pensando na capacidade de resposta.

O contêiner fixo preenche a janela de visualização, as imagens de fundo usam object-fit: cover, o texto usa unidades da janela de visualização e a largura do cubo usa: min(30vw, 30vh).

Dito isto, em telas mais estreitas, alguns pequenos ajustes podem tornar a composição mais equilibrada.

Por exemplo, no ponto de interrupção Tablet, podemos reduzir o tamanho do texto de 12vw para 11vw.

E atualize a largura da lista de cubos de min(30vw, 30vh) para min(25vw, 25vh).

Nada dramático é necessário. Estamos simplesmente empurrando um pouco mais a configuração já responsiva.

Considerações finais

E é isso.

Construímos uma galeria 3D baseada em CMS e com rolagem no Webflow usando interações baseadas em GSAP, animações de texto dividido, transformações 3D e uma pequena quantidade de CSS personalizado.

Ao longo do caminho, criamos:

• uma galeria CMS empilhada em tela cheia;
• transições de texto escalonadas;
• imagem controlada por rolagem desaparece;
• um cubo 3D baseado em CMS;
• segmentação de animação baseada em atributos;
• um sistema coordenado de rotação e movimento do cubo;
• um layout responsivo usando unidades de janela de visualização e min();
• alguns pequenos refinamentos para tornar a experiência final mais limpa.

A ideia mais importante por trás de toda a construção é que interações complexas se tornam muito mais acessíveis quando as dividimos em sistemas menores e repetíveis.

A transição de fundo é apenas um grupo de três ações.

A animação do cubo é apenas um par de ações adicionadas a cada transição.

Os campos CMS são apenas uma forma de armazenar os valores de transformação que cada face precisa.

Depois que todas essas peças estiverem conectadas, o resultado final parecerá muito mais avançado do que as etapas individuais por trás dele.

E isso, honestamente, é uma das minhas coisas favoritas sobre a construção de interações no Webflow hoje: você pode começar a partir de uma tela em branco, combinar algumas ideias bem estruturadas e terminar com algo que parece um pequeno pedaço de magia criativa de front-end.