Construindo um herói de depoimento animado usando a linha do tempo GSAP e dados dinâmicos de CMS | Codrops

Eu queria que esta seção parecesse feita à mão, com um layout que tivesse características próprias, embora cada parte dela fosse orientada por Webflow dados CMS.

Ele combina um contador estilo caça-níqueis, uma colagem organizada manualmente de retratos de membros e uma animação em loop que apresenta continuamente novos rostos. Tanto os retratos quanto o contador são orientados por dados CMS, portanto a seção é atualizada automaticamente ao longo do tempo.

Fazer com que tudo isso funcionasse em conjunto acabou sendo a parte interessante. As listas de coleções do Webflow são projetadas para repetir o mesmo layout para cada item, enquanto esse design exige que cada retrato tenha seu próprio tamanho e posição.

Eu queria resolver isso permanecendo dentro do Webflow Designer o máximo possível. Neste artigo, examinarei as três técnicas que tornaram isso possível:

• um contador de caça-níqueis configurável
• uma colagem organizada manualmente com CMS
• uma animação GSAP em loop integrada Linha do tempo visual do Webflow

Pilha de tecnologia

• Webflow  para o layout e estrutura
• Webflow CMS  para os dados do membro e o valor do contador
• Consultas de contêiner CSS + cqw e unidades em  para dimensionar a colagem
• Um pequeno auxiliar de JavaScript  para a animação do contador
• GSAP via linha do tempo visual do Webflow  para a animação em loop

Parte 1: O contador

O contador é a primeira coisa que você vê quando a seção aparece, então deve ser bom: um número que gira como os rolos de uma máquina caça-níqueis. O número vem de uma entrada CMS ao vivo que é atualizada todos os meses com base nas vendas do meu curso. E como já há muita coisa acontecendo no layout, eu queria que o contador tocasse primeiro e todo o resto acompanhasse, mas falaremos mais sobre essa animação depois.

Eu não consigo escrever JavaScript sozinho, então, para um artigo como esse, deixei a IA codificá-lo para mim e realmente comecei a gostar de trabalhar dessa maneira. Há alguns anos, eu teria pesquisado algum trecho online e adaptado onde pudesse. Agora é rápido e exatamente como eu quero. A única parte complicada foi a flexibilização. Eu queria que os últimos dígitos ficassem mais lentos e assentassem suavemente no final, para que se ajustassem à sensação de calma de toda a página, e essa sensação exata exigia muito vaivém. É por isso que agora lido com essas coisas de maneira diferente: em vez de descrever os ajustes em palavras, peço à IA que construa para mim um pequeno configurador. Alguns controles deslizantes que eu mesmo posso ajustar, até que a suavização esteja correta.

Essas configurações foram meu feedback para a IA: elas disseram exatamente como gerar o JS. E como eu preciso de animações de contagem como essa em projetos de clientes o tempo todo, transformei-a em uma ferramenta gratuita que você pode abrir e usar: configure-a, exporte o JS e defina um atributo em um elemento de texto, o script encontra o número automaticamente.  Gerador de animação de contador →

Como funciona o script

Posso ler o código o suficiente para segui-lo, mas não consigo dizer se a forma como ele é construído é padrão ou se há algo inteligente que vale a pena compartilhar. Então pedi à IA que apontasse o que realmente torna esse roteiro interessante, para que eu pudesse passar as ideias principais para vocês. Aqui está a versão curta.

A ideia central: não conte, deslize.  Em vez de animar um valor de 0 até seu destino, o script cria uma faixa vertical de dígitos para cada casa do número:

• cada dígito fica em uma célula com overflow: hidden, exatamente uma linha de altura
• dentro da célula há uma faixa de números empilhados (0, 1, 2… 9, 0, 1…), tantos quantos o dígito precisar girar, com o dígito de destino bem no final
• a faixa desliza para cima com transform: translateY, e como a célula corta tudo menos um dígito, você vê os números girando até que o alvo chegue

Sem lógica de contagem, apenas uma faixa recortada e móvel:

###PRE_4709de5c30f1ebef298f50270e46c5d3###

Três pequenos detalhes são o que realmente fez com que parecesse certo:

Conte as revoluções da direita, não espalhadas pelo número.  Eu queria que o dígito esquerdo travasse primeiro e o da direita girasse mais. Se você distribuir os giros por todo o número, o salto de 952 para 1.000 reorganiza todos os lugares e a sensação muda. Contados a partir da direita, a casa das unidades sempre se comporta da mesma forma, não importa o tamanho do número:

###PRE_176093bb5beea8122a7294dd7e1b1bd1###

Separe “quantas rodadas” de “quanto tempo leva”.  Uma pura desaceleração começa a toda velocidade, o que parece agitado. Dividir os dois (revoluções versus duração) foi o que deu controle real sobre a sensação, e é o par de controles deslizantes em que passei mais tempo:

###PRE_649818133abae3f38c7aa70ad70030fb###

Leia a altura real da linha, não codifique 1em.  Meu cabeçalho usa uma line-height: 0.9 apertada, então uma célula 1em seria muito alta e quebraria o espaçamento abaixo. O script lê a altura real da linha com getComputedStyle e move a faixa na mesma unidade:

###PRE_cb4bb9f9fa0f292c0dcb58dba97e19ee###

E finalmente a ligação do CMS: um pequeno segundo script no rodapé lê o número real e o expõe globalmente. O contador espera por esse sinal e por um IntersectionObserver para confirmar que está à vista, então ele é executado exatamente uma vez, com o número real, no momento certo, que é o que você vê na visualização acima.

Parte 2: Uma grade de colagem individual do Webflow CMS

O layout de destino

Esta é a parte que a maioria das pessoas presume que só funciona com código personalizado ou alguma solução alternativa, e acabou sendo um pequeno desafio divertido de resolver.

É aqui que o Webflow atrapalha. Tenho quatro retratos, em quatro tamanhos diferentes, dispostos como uma colagem, mas eles vêm de uma Lista de Coleções CMS. Normalmente, se você quiser uma grade organizada manualmente, você colocaria os itens em uma grade CSS e daria a cada um seu próprio tamanho e posição. Isso funciona perfeitamente, mas apenas fora de uma lista de coleção. Atualmente, uma lista de coleção do Webflow CMS não permite definir itens em posições individuais.

Por padrão, o Webflow apenas exibe todos os itens da mesma maneira: mesmo tamanho, mesma ordem, mesmo texto repetido abaixo. Mas o design precisa de cada retrato no seu próprio tamanho e posição, e esse é o desafio.

A principal constatação foi que não preciso reordenar os itens, só preciso  estilizar cada posição . Em CSS simples você pode direcionar basicamente qualquer item que desejar, o que é realmente útil. O Webflow oferece apenas quatro dessas opções diretamente no menu suspenso Designer:

• primeiro filho
• último filho
• itens ímpares
• itens pares

Eu queria ver até onde conseguiria chegar apenas com esses quatro, sem escrever nenhum CSS personalizado. Acabou sendo o suficiente.

Assim, cada posição recebe sua própria largura, além de um deslocamento vertical em duas delas para que os blocos não fiquem em uma linha reta:

###PRE_008c6ecf0cd24d24148c99bd68de4f36###

Você deve ter notado anteriormente na saída padrão que o Webflow adiciona o mesmo nome e rótulo de função em  cada  item, já que o CMS repete o conteúdo para cada um. Os mesmos seletores filhos também cuidam disso: com uma pequena incorporação de CSS, escondo todos os rótulos por padrão e mostro apenas um por colagem, o rótulo do terceiro item na colagem superior e o rótulo do segundo item na colagem inferior.

###PRE_ce93b69b4493d4e8867d93220ed3a0df###

Trabalhando com unidades em para dimensionar o layout

Muitas pessoas que seguem meus tutoriais percebem que eu trabalho com em aqui e ali, mas ainda não o incluíram em seu próprio fluxo de trabalho. Este layout é um ótimo exemplo de por que vale a pena.

O princípio: se você mantiver todos os valores dentro de user_grid-wrapper em em, você pode escalar todo o layout para cima ou para baixo apenas com o wrapper tamanho da fonte. Cada item é redimensionado com ele, sem trabalho extra.

Veja como ele é configurado:

• o wrapper recebe container-type: inline-size, que você adiciona como uma propriedade personalizada no Webflow, já que não está no painel de estilo para escolha. Isso faz com que a própria largura do wrapper seja a referência para os valores em dentro dele
• seu font-size é definido como 1cqw, um por cento dessa largura
• porque em é relativo ao tamanho da fonte, 1em agora é igual a um por cento da largura do wrapper, então um item de 10em é 10% dele, um item de 5em é 5% e assim por diante
• o user_grid-wrapper fica dentro do meu contêiner de página, que tem uma largura máxima

###PRE_c18012042e5ca0a2a51b7ee8078f0b34###

Todos os quatro itens da coleção CMS são dimensionados proporcionalmente a ele, junto com a forma gradiente atrás deles, que é exatamente o que você deseja para um gráfico como este. Altere o tamanho da fonte base e toda a colagem aumentará ou diminuirá como uma única peça.

Isso torna o redimensionamento do layout, especialmente para capacidade de resposta, incrivelmente simples e rápido. No ponto de interrupção para dispositivos móveis e tablets, troco a base cqw por vw e, como o contêiner da página já tem largura total, um vw se comporta como um cqw. Eu configurei a colagem para 2vw então ela ficou maior imediatamente e o layout ainda funcionou bem.

Parte 3: Uma animação GSAP em loop, construída na linha do tempo do Webflow

Para esta animação usei a nova linha do tempo visual do Webflow. Ele permite que você crie animações GSAP reais diretamente no Designer, sem escrever nenhum código GSAP por conta própria.

Antes de animar qualquer coisa, penso na ordem em que as coisas devem aparecer. É uma seção no meio da página, então a animação precisa de uma faísca inicial para chamar a atenção do visitante, mas também não deve acontecer de uma vez, pois o layout tem muitos pequenos detalhes e a maioria deles se perde se tudo se mover ao mesmo tempo. Assim, o contador gira primeiro e, à medida que desacelera, o resto segue. Uma grande parte do trabalho foi encontrar o ponto ideal no tempo: quanto tempo o contador corre e quando os itens da colagem começam a ser trocados, para que os intervalos não pareçam muito longos e a animação mantenha a atenção do espectador. Todos os elementos nesta seção desaparecem ligeiramente escalonados.

Os gradientes da forma da máscara também aumentam um pouco, o que lhes dá um movimento extra.

Uma coisa que vale a pena fazer: eu reproduzo a linha do tempo ao entrar, pauso ao sair e retomo ao rolar para trás, para que ela não fique rodando em segundo plano o tempo todo e prejudique o desempenho.

O efeito de loop de membro 3D

O loop de membro é realmente o destaque de toda a animação. Como a seção continua sendo preenchida com novos membros ao longo do tempo, eu queria que os rostos trocassem em vez de aparecerem apenas uma vez. E como eles trocam, eu precisava de uma animação nos dois sentidos, uma para trazer um cenário e outra para enviá-lo, o que fica especialmente bonito no texto à medida que ele volta cambaleando. A configuração é simples: cada lista de coleção fica na seção duas vezes, e a segunda é colocada position: absolute logo em cima da primeira. Ele avança na coleção (pular quatro, pular oito) para mostrar rostos diferentes e, em seguida, uma lista é animada enquanto a outra é animada.

O detalhe que faz com que pareça premium é o efeito 3D. Um rotateX simples por si só parece plano: o cartão apenas se inclina, mas não há profundidade real nele. A correção é a perspectiva, e a parte útil é que você pode definir  perspectiva e origem diretamente na IU de etapa de ação do GSAP , sem configurar primeiro uma transformação 3D no Webflow Designer.

As configurações que usei para as imagens recebidas:

• Girar X : -90° a 0°, o giro 3D real
• Y : 50% a 0%, então eles se movem para o lugar
• Escala : 0,7 a 1, crescendo até o tamanho máximo
• Opacidade : 0 a 100, fade in
• Perspectiva : 1000, que é o que dá profundidade real à rotação
• Escalonamento : deslocamento de 0,08s, a partir do item 4
• Facilidade : Elástico (para fora), para o salto

A facilidade é uma grande parte do personagem aqui. Eu queria um pouco de recuperação no final, o tipo de movimento elástico que você vê muito na interface do iOS da Apple. Dá à troca um toque divertido e funciona bem com os gradientes calmos que desaparecem suavemente. É algo que pretendo reutilizar em toda a página, e esta seção foi um bom lugar para ver como funciona. O bom da linha do tempo GSAP do Webflow é que você escolhe a curva visualmente, com uma visualização integrada, para que possa moldar o elástico exatamente como deseja.

O texto usa seu próprio efeito, dividido linha por linha para que ele entre e saia cambaleando:

• Move Y : 110%, as linhas deslizam para cima
• Opacidade : fade in
• Dividir texto : por linha, com uma máscara de linha
• Escalonamento : deslocamento de 0,035s, a partir das bordas
• Facilidade : Elástico (Fora)

Mais dois detalhes desta etapa:

A ação definida.  Como as duas listas de coleção ficam uma em cima da outra, mantenho a segunda em opacity: 0 por padrão no Webflow Designer, para que ambas não fiquem visíveis ao mesmo tempo enquanto estou trabalhando e elas ficam fora do meu caminho. Na animação, uso uma ação  set  para mudar para opacidade total em um instante, logo antes de a animação entrar, enquanto a outra está fora. Não é uma interpolação, apenas uma mudança imediata de estado no momento certo.

Escalone de fora para dentro.  Todo o layout é construído em torno do centro, com a colagem espalhada em direção às bordas, para que a troca fique melhor quando for executada das bordas externas para dentro, em vez da esquerda para a direita. Como cada lista tem exatamente quatro itens, começo o escalonamento a partir do item quatro, para que as imagens sejam trocadas de fora em direção ao balcão do meio.

Para o loop, meu primeiro instinto foi definir toda a linha do tempo para repetir infinitamente, mas isso também repete o fade-in de entrada único, o que eu definitivamente não queria. A solução limpa é dividi-lo em duas interações separadas: user-hero-beginning lida com a entrada e toca uma vez, e user-hero-collection-loop lida apenas com a troca de rosto e se repete infinitamente. O tempo precisa de uma espera entre as trocas, aproximadamente quatro segundos, então o loop é realmente troca, entrada, pausa, repetição.

Acessibilidade

Para movimento reduzido, o loop de troca 3D é demais, mas o fade-in suave quando a seção rola para a visualização é bom. Foi aqui que dividir a animação em duas valeu a pena novamente: com o fade de introdução e o loop como interações separadas, eu poderia manter o fade para todos e desligar apenas o loop. A reprodução condicional do Webflow cuida disso, para que os visitantes que preferem movimento reduzido vejam a seção desaparecer uma vez e depois ficar parada, sem troca de rostos.

Veja ao vivo

A seção está ativa  na página do meu curso FORMBURG .

Créditos

• Criação e animação de webflow:   Jonas Arleth , fundador da FORMBURG
• Design:   Oliver Gareis
• Ferramentas:  Fluxo Web, GSAP