Antes de minha carreira saltar para o desenvolvimento, fiz vários trabalhos gráficos em movimento no After Effects. Mas mesmo com esse histórico, eu ainda achava a animação na web bastante desconcertante.
Os gráficos de vídeo são projetados dentro de uma proporção específica e depois exportados. Feito! Mas não existem “configurações de exportação” na web. Nós apenas empurramos o código para o mundo e nossas animações precisam se adaptar a qualquer dispositivo em que pousem.
Então vamos falar de animação responsiva! Como abordamos melhor a animação na web selvagem? Vamos cobrir algumas abordagens gerais, algumas dicas específicas do GSAP e alguns princípios de movimento. Vamos começar com alguns enquadramentos…
Como essa animação será usada?
Artigo de Zach Saucier sobre animação responsiva recomenda dar um passo atrás para pensar no resultado final antes de entrar no código.
A animação será um módulo repetido em várias partes do seu aplicativo? Precisa escalar em tudo? Manter isso em mente pode ajudar a determinar o método no qual uma animação deve ser dimensionada e evitar que você desperdice esforço.
Este é um ótimo conselho. UMA enorme parte do design de animação responsiva é saber se e como essa animação precisa ser dimensionada e, em seguida, escolher a abordagem certa desde o início.
A maioria das animações se enquadra nas seguintes categorias:
- Fixo: Animações para itens como ícones ou carregadores que mantêm o mesmo tamanho e proporção em todos os dispositivos. Nada para se preocupar aqui! Codifique alguns valores de pixel e continue com o seu dia.
- Fluido: Animações que precisam se adaptar com fluidez em diferentes dispositivos. A maioria das animações de layout se enquadra nessa categoria.
- Visadas: Animações que são específicas para um determinado dispositivo ou tamanho de tela ou mudam substancialmente em um determinado ponto de interrupção, como animações somente para desktop ou interações que dependem de interação específica do dispositivo, como toque ou foco.
Animações fluidas e direcionadas exigem diferentes formas de pensar e soluções. Vamos dar uma olhada…
Animação fluida
As Andy Bell diz: Seja o mentor do navegador, não o microgerente — dê ao navegador algumas regras e dicas sólidas e deixe-o tomar as decisões certas para as pessoas que o visitam.
(Aqui estão os slides dessa apresentação.)
A animação fluida tem tudo a ver com deixar o navegador fazer o trabalho duro. Muitas animações podem se ajustar facilmente a diferentes contextos apenas usando as unidades certas desde o início. Se você redimensionar esta caneta você pode ver que a animação usando unidades de janela de visualização dimensiona com fluidez à medida que o navegador se ajusta:
A caixa roxa até altera a largura em diferentes pontos de interrupção, mas como estamos usando porcentagens para movê-la, a animação também é dimensionada.
Animando propriedades de layout como left e top pode causar reflows de layout e animação instável, então, sempre que possível, mantenha as transformações e a opacidade.
No entanto, não estamos limitados apenas a essas unidades - vamos dar uma olhada em algumas outras possibilidades.
Unidades SVG
Uma das coisas que adoro em trabalhar com SVG é que podemos usar unidades de usuário SVG para animação que são responsivas prontas para uso. A pista está no nome realmente - Escalável Gráfico de vetor. No SVG-land, todos os elementos são plotados em coordenadas específicas. O espaço SVG é como um pedaço infinito de papel milimetrado onde podemos organizar os elementos. o viewBox define as dimensões do papel milimetrado que podemos ver.
viewBox="0 0 100 50”Nesta próxima demonstração, nosso SVG viewBox is 100 unidades de largura e 50 unidades de altura. Isso significa que se animarmos o elemento por 100 unidades ao longo do eixo x, ele sempre se moverá por toda a largura de seu SVG pai, não importa quão grande ou pequeno seja esse SVG! Redimensione a demonstração para ver.
Animar um elemento filho com base na largura de um contêiner pai é um pouco mais complicado na terra do HTML. Até agora, tivemos que pegar a largura do pai com JavaScript, o que é bastante fácil quando você está animando from uma posição transformada, mas um pouco mais complicada quando você está animando to em algum lugar como você pode ver na demonstração a seguir. Se o seu ponto final for uma posição transformada e você redimensionar a tela, terá que ajustar manualmente essa posição. Desarrumado… 🤔
Se você ajustar os valores no redimensionamento, lembre-se de debochar, ou até mesmo acionar a função depois que o navegador terminar de redimensionar. Os ouvintes de redimensionamento disparam uma tonelada de eventos a cada segundo, portanto, atualizar as propriedades em cada evento é muito trabalhoso para o navegador.
Mas, esse aumento de velocidade de animação em breve será coisa do passado! Toque de tambor por favor… 🥁
Unidades de contêineres! Coisas lindas. No momento em que estou escrevendo isso, eles só funcionam no Chrome e no Safari - mas talvez quando você ler isso, teremos o Firefox também. Confira-os em ação nesta próxima demonstração. Olhe para aqueles garotinhos vão! Não é uma animação empolgante que é relativa aos elementos pai!
Esses dados de suporte do navegador são de Eu posso usar, que tem mais detalhes. Um número indica que o navegador suporta o recurso nessa versão e superior.
Computador de mesa
| Chrome | Firefox | IE | borda | Safári |
|---|---|---|---|---|
| 105 | Não | Não | 105 | 16.0 |
Celular / Tablet
| Android Chrome | Firefox Android | Android | iOS Safari |
|---|---|---|---|
| 106 | Não | 106 | 16.0 |
Transições fluidas de layout com FLIP
Como mencionamos anteriormente, no SVG-land cada elemento é colocado em uma grade e muito fácil de mover de forma responsiva. Na terra do HTML é muito mais complexo. Para construir layouts responsivos, usamos vários métodos de posicionamento e sistemas de layout diferentes. Uma das principais dificuldades de animar na web é que muito de alterações no layout são impossíveis de animar. Talvez um elemento precise se mover da posição relative para fixed, ou alguns filhos de um contêiner flexível precisam ser embaralhados suavemente pela janela de visualização. Talvez um elemento precise ser re-parentado e movido para uma posição totalmente nova no DOM.
Complicado, hein?
Nós iremos. A técnica FLIP está aqui para salvar o dia; ela nos permite animar facilmente essas coisas impossíveis. A premissa básica é:
- Primeiro nome: Pegue a posição inicial dos elementos envolvidos na transição.
- Sobrenome: Mova os elementos e pegue a posição final.
- Inverter: Calcule as alterações entre o primeiro e o último estado e aplique transformações para inverter os elementos de volta à sua posição original. Isso faz com que pareça que os elementos ainda estão no primeiro posição, mas na verdade não são.
- Jogar: Remova as transformações invertidas e anime para seus falsificado primeiro estado para o último Estado.
Aqui está uma demonstração usando o plugin FLIP do GSAP que faz todo o trabalho pesado para você!
Se você quiser entender um pouco mais sobre a implementação do vanilla, vá para Paul Lewis's no blog — ele é o cérebro por trás da técnica FLIP.
Dimensionamento fluido de SVG
Você me pegou... isso não é clientes uma dica de animação. Mas definir o cenário corretamente é imperativo para uma boa animação! O SVG escala muito bem por padrão, mas podemos controlar como ele escala ainda mais com preserveAspectRatio, que é muito útil quando a proporção do elemento SVG e o viewBox proporção são diferentes. Funciona muito da mesma forma que o background-position e background-size propriedades em CSS. A declaração é composta por um valor de alinhamento (background-position) E um Conheça or Fatia referência (background-size).
Quanto às referências do Meet and Slice — slice é como background size: cover e meet é como background-size: contain.
preserveAspectRatio="MidYMax slice"— Alinhe ao meio do eixo x, na parte inferior do eixo y, e amplie para cobrir toda a viewport.preserveAspectRatio="MinYMin meet"— Alinhe à esquerda do eixo x, a parte superior do eixo y, e amplie, mantendo todo oviewBoxvisível
Tom Miller leva isso um passo adiante usando overflow: visible em CSS e um elemento de contenção para revelar “stage left” e “stage right” mantendo a altura restrita:
Para animações SVG responsivas, pode ser útil usar a caixa de visualização SVG para criar uma visualização que recorta e dimensiona abaixo de uma certa largura do navegador, ao mesmo tempo em que revela mais animação SVG à direita e à esquerda quando o navegador é mais largo que isso limite. Podemos conseguir isso adicionando overflow visível no SVG e unindo-o com um
max-heightwrapper para evitar que o SVG seja dimensionado muito verticalmente.
Escala de tela fluida
O Canvas tem muito mais desempenho para animações complexas com grande quantidade de partes móveis do que animar SVG ou HTML DOM, mas também é inerentemente mais complexo. Você tem que trabalhar para esses ganhos de desempenho! Ao contrário do SVG, que possui unidades responsivas encantadoras e dimensionamento pronto para uso, tem que ser comandado e microgerenciado um pouco.
Eu gosto de configurar meu para que funcione da mesma maneira que o SVG (posso ser tendencioso) com um adorável sistema de unidades para trabalhar e uma proporção fixa. também precisa ser redesenhado toda vez que algo mudar, então lembre-se de atrasar o redesenho até que o navegador termine de redimensionar ou debounce!
George Francis também juntar isso linda pequena biblioteca que permite definir um Canvas viewBox atributo e preserveAspectRatio — exatamente como SVG!
Animação direcionada
Às vezes, você pode precisar adotar uma abordagem menos fluida e mais direcionada para sua animação. Os dispositivos móveis têm muito menos espaço e menos animação em termos de desempenho do que uma máquina desktop. Portanto, faz sentido fornecer animação reduzida para usuários móveis, potencialmente até sem animação:
Às vezes, a melhor animação responsiva para celular não é animação! Para UX móvel, priorize permitir que o usuário consuma conteúdo rapidamente em vez de esperar que as animações terminem. As animações móveis devem aprimorar o conteúdo, a navegação e as interações, em vez de atrasá-lo. Eric van Holtz
Para fazer isso, podemos usar consultas de mídia para segmentar tamanhos de janela de visualização específicos, assim como fazemos quando estamos estilizando com CSS! Aqui está uma demonstração simples mostrando uma animação CSS sendo manipulada usando consultas de mídia e uma animação GSAP sendo manipulada com gsap.matchMedia():
A simplicidade desta demo esconde um monte de magia! As animações JavaScript requerem um pouco mais de configuração e limpeza para funcionar corretamente em apenas um tamanho de tela específico. Eu vi horrores no passado onde as pessoas simplesmente ocultavam a animação da visualização em CSS com opacity: 0, mas a animação ainda está em segundo plano, consumindo recursos. 😱
Se o tamanho da tela não corresponder mais, a animação precisa ser eliminada e liberada para coleta de lixo, e os elementos afetados pela animação precisam ser limpos de qualquer estilo inline introduzido por movimento para evitar conflitos com outros estilos. Até gsap.matchMedia(), este foi um processo complicado. Tivemos que acompanhar cada animação e gerenciar tudo isso manualmente.
gsap.matchMedia() em vez disso, permite que você coloque facilmente seu código de animação em uma função que só é executada quando um determinado consulta de mídia fósforos. Então, quando não corresponder mais, todas as animações GSAP e Gatilhos de rolagem nessa função são revertidos automaticamente. A consulta de mídia na qual as animações são exibidas faz todo o trabalho duro para você. Está no GSAP 3.11.0 e é um divisor de águas!
Também não estamos restritos apenas aos tamanhos de tela. Há um toneladas de recursos de mídia por aí para ligar!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */Na demonstração a seguir, adicionamos uma verificação para prefers-reduced-motion para que qualquer usuário que ache a animação desorientadora não seja incomodado por coisas zunindo.
E confira a outra demonstração divertida de Tom Miller, onde ele usa a proporção do dispositivo para ajustar a animação:
Pensando fora da caixa, além dos tamanhos de tela
Há mais para pensar em animação responsiva do que apenas tamanhos de tela. Dispositivos diferentes permitem interações diferentes, e é fácil entrar em um emaranhado quando você não considera isso. Se você estiver criando estados de foco em CSS, poderá usar o hover recurso de mídia para testar se o usuário primário mecanismo de entrada pode pairar sobre os elementos.
@media (hover: hover) {
/* CSS hover state here */
}Alguns conselhos de Jake Whiteley:
Muitas vezes, baseamos nossas animações na largura do navegador, fazendo a suposição ingênua de que os usuários de desktop desejam estados de foco. Pessoalmente, tive muitos problemas no passado em que mudaria para o layout da área de trabalho > 1024px, mas poderia fazer a detecção de toque no JS - levando a uma incompatibilidade onde o layout era para desktops, mas o JS era para celulares. Hoje em dia eu me apóio em hover e pointer para garantir a paridade e lidar com ipad Pros ou superfícies de janelas (que podem alterar o tipo de ponteiro dependendo se a tampa está abaixada ou não)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Em seguida, casarei minhas consultas de layout CSS e minhas consultas JavaScript, então estou considerando o dispositivo de entrada como o principal fator suportado por largura, e não o contrário.
Dicas do ScrollTrigger
Se você estiver usando GSAPs Plugin ScrollTrigger, há um pequeno utilitário prático ao qual você pode se conectar para discernir facilmente os recursos de toque do dispositivo: ScrollTrigger.isTouch.
0- não toque (somente ponteiro/mouse)1- somente toque dispositivo (como um telefone)2– o dispositivo pode aceitar tocar entrada e ponteiro do mouse (como tablets Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Outra dica para animação responsiva acionada por rolagem…
A demonstração a seguir está movendo uma galeria de imagens horizontalmente, mas a largura muda dependendo do tamanho da tela. Se você redimensionar a tela quando estiver na metade de uma animação depurada, poderá acabar com animações quebradas e valores obsoletos. Este é um speedbump comum, mas que é facilmente resolvido! Coloque o cálculo que depende do tamanho da tela em um valor funcional e defina invalidateOnRefresh:true. Dessa forma, ScrollTrigger irá recalcular esse valor para você quando o navegador for redimensionado.
Dica de nerd GSAP bônus!
Em dispositivos móveis, a barra de endereço do navegador geralmente é exibida e oculta à medida que você rola. Isso conta como um evento de redimensionamento e disparará um ScrollTrigger.refresh(). Isso pode não ser o ideal, pois pode causar saltos em sua animação. GSAP 3.10 adicionado ignoreMobileResize. Não afeta o comportamento da barra do navegador, mas impede ScrollTrigger.refresh() de disparar para pequenos redimensionamentos verticais em dispositivos somente de toque.
ScrollTrigger.config({
ignoreMobileResize: true
});Princípios de movimento
Pensei em deixar algumas práticas recomendadas a serem consideradas ao trabalhar com movimento na web.
Distância e facilidade
Uma coisa pequena, mas importante que é fácil de esquecer com a animação responsiva é a relação entre velocidade, impulso e distância! Boa animação deve imitar o mundo real para se sentir crível, e leva mais tempo no mundo real para cobrir uma distância maior. Preste atenção à distância que sua animação está percorrendo e certifique-se de que a duração e a atenuação usadas façam sentido no contexto de outras animações.
Você também pode aplicar uma atenuação mais dramática a elementos com mais para percorrer para mostrar o aumento do impulso:
Para certos casos de uso, pode ser útil ajustar a duração de forma mais dinâmica com base na largura da tela. Nesta próxima demonstração, estamos usando gsap.utils para fixar o valor que recebemos de volta da corrente window.innerWidth em um intervalo razoável, mapeamos esse número para uma duração.
Espaçamento e quantidade
Outra coisa a ter em mente é o espaçamento e a quantidade de elementos em diferentes tamanhos de tela. Citação Steven Shaw:
Se você tiver algum tipo de animação ambiental (paralaxe, nuvens, árvores, confetes, decorações, etc) que estejam espaçadas ao redor da janela, certifique-se de que elas dimensionem e/ou ajustem a quantidade de acordo com o tamanho da tela. Telas grandes provavelmente precisam de mais elementos espalhados por toda parte, enquanto telas pequenas precisam apenas de alguns para o mesmo efeito.
Eu amo como Opher Vishnia pensa a animação como um palco. Adicionar e remover elementos não precisa ser apenas uma formalidade, pode ser parte da coreografia geral.
Ao projetar animações responsivas, o desafio não é como colocar o mesmo conteúdo na janela de visualização para que “encaixe”, mas como selecionar o conjunto de conteúdo existente para que ele comunique a mesma intenção. Isso significa fazer uma escolha consciente de quais conteúdos adicionar e quais remover. Normalmente, no mundo da animação, as coisas não aparecem ou saem do quadro. Faz sentido pensar em elementos como entrando ou saindo do “palco”, animando essa transição de uma forma que faça sentido visual e temático.
E isso é tudo. Se você tiver mais dicas de animação responsivas, coloque-as na seção de comentários. Se houver algo super útil, adicionarei a este compêndio de informações!
Termo aditivo
Mais uma nota de Tom Miller enquanto preparava este artigo:
Provavelmente estou muito atrasado com esta dica para o seu artigo de animações responsivas, mas recomendo “finalizar todas as animações antes de construir”. Atualmente estou adaptando algumas animações do site com “versões móveis”. Graças a Deus por
gsap.matchMedia… mas eu com certeza gostaria que soubéssemos que haveria layouts/animações móveis separados desde o início.
Acho que todos nós apreciamos que essa dica de “planejar com antecedência” veio no último minuto. Obrigado, Tom, e boa sorte com esses retrofits.
